Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Current page nav highlight tutorial on my site

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23040
    ThinkSoJoE
    Member

    I had asked a question here on the forums a while back about current page highlighting in a nav bar in WordPress. I hacked my way through it with some PHP if() coding to get it working on the project I was working on at the time. I actually figured out how to do it the proper way in WordPress, and I posted a tutorial: http://thinksojoe.thinksobrain.com/tuto … hlighting/

    If anybody needs help with that kind of thing, it should give you an idea of what you’re doing. It’s my first tutorial I’ve ever done online, so hopefully it turned out ok.

    #48967
    ThinkSoJoE
    Member

    That is pretty slick. I pretty much did the same thing with PHP if() tags and the WordPress is_home() code. For the pages I was using PHP if() and WordPress’s the_title, and named the CSS classes after the pages. Of course, I hacked out that convoluted solution because I didn’t think to learn how to get the URL of the page :oops:

    The method I described in my tutorial makes it much easier to do the current page highlighting than using body id tags for each page. In fact, since I wrote the tutorial, I’ve added rollover images to the nav bar, using the single image rollover trick that I learned from you in the second PSD to CSS & XHTML video series in combination with the technique described in my tutorial.

    Glad you liked it Chris, keep teaching us great CSS techniques, and myself and the rest of your readers will keep churning out functional and stylish sites!

    #50188
    sspice313
    Member

    This is a great tutorial.

    I have used a different sprite technique for my menu, but it is basically the same premise of image replacement. I will start off by saying that I am new to php. I would like to have my menu included using php, similar to how you did it in this tutorial, but I am not sure how to do it. The spans change dependent on what page you are on. So I can see using the body Id. But is there a way to use php to turn the span off and on or give it a value of "" if it should be off?
    #nav {
    /*width: 653px;*/
    height: 120px;
    margin: 0 auto;
    padding:0px; margin: 0px;
    overflow: hidden;
    }
    #nav li {
    display: inline;
    }
    #nav a {
    float: left;
    height: 120px;
    text-align: left;
    color: #ffffff;
    position: relative;

    }
    #nav a:link, #nav a:visited, #nav a:hover {
    text-decoration:none;
    color: #ffffff;
    }
    /*IE trigger*/
    #nav li a:hover, #nav li a:active {
    visibility: visible;/*it doesn’t really matter what you say, so I picked something that cannot change appearance*/
    }
    /*Switches out the navigation backround images */
    /*begin sprites-n-doors trick: http://www.fiftyfoureleven.com/weblog/w … et-sprites */
    #nav a span {
    position: absolute;
    height: 120px;
    top: 0;
    left: 0;
    background: url(../images/navPrimary.jpg) 0 -120px no-repeat;
    }

    /*Spans that change dependent on the page */
    #nav a span.index {
    background: url(../images/navWelcome.jpg) 0 -120px no-repeat;
    }
    #nav a span.portfolio {
    background: url(../images/navMyWork.jpg) -81px -120px no-repeat;
    }
    #nav a span.about {
    background: url(../images/navWhoIam.jpg) -162px -120px no-repeat;
    }
    #nav a span.service {
    background: url(../images/navWhatIdo.jpg) -243px -120px no-repeat;
    }
    #nav a span.contact {
    background: url(../images/navContactus.jpg)-324px -120px no-repeat;
    }

    /*Off state*/
    #nav .Welcome, #nav .Welcome span {
    width: 80px;
    background-position: 0 -120px;
    }
    /*On State*/
    #nav .Welcome:focus span, #nav .Welcome:hover span, #nav .Welcome:active span {
    background-position: 0 0px;
    }

    #nav .Work, #nav .Work span {
    width: 80px;
    background-position: -81px -120px;
    }
    #nav .Work:focus span, #nav .Work:hover span, #nav .Work:active span {
    background-position: -81px 0px;
    }

    #nav .About, #nav .About span {
    width: 80px;
    background-position: -162px -120px;
    }
    #nav .About:focus span, #nav .About:hover span, #nav .About:active span{
    background-position: -162px 0px;
    }

    #nav .Service, #nav .Service span {
    width: 80px;
    background-position: -243px -120px;
    }
    #nav .Service:focus span, #nav .Service:hover span, #nav .Service:active span{
    background-position: -243px 0px;
    }
    #nav .Contact, #nav .Contact span {
    width: 80px;
    background-position: -324px -120px;
    }
    #nav .Contact:focus span, #nav .Contact:hover span, #nav .Contact:active span {
    background-position: -324px 0px;
    }
    Note* this is how I do it on when it is within each pages code.
    <div class="Header">
    <a href="index.html" class="FloatLeft"><img src="images/nav_headerImage.gif" alt="Vivid Visual Solutions By Lisa Noble" /></a>
    <ul id="nav">
    <li><a class="Welcome" href="index.html">Welcome<span class="index"></span></a></li>
    <li><a class="Work" href="multibox/multibox/files/portfolio.html">My Work<span></span></a></li>
    <li><a class="About" href="about.html">Who I Am<span></span></a></li>
    <li><a class="Service" href="services.html">What I Do<span></span></a></li>
    <li><a class="Contact" href="contact.html">Contact Me<span></span></a></li>
    </ul>
    </div>

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.