Grow your CSS skills. Land your dream job.

Current page nav highlight tutorial on my site

  • # August 5, 2008 at 9:41 pm

    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.

    # August 7, 2008 at 1:49 pm

    Good tutorial =)

    A lot of times I like to handle "current navigation" through applying unique ID’s to the body:
    http://css-tricks.com/id-your-body-for- … ecificity/

    In WordPress, this is difficult because the header section is included on every page and doesn’t give you a chance to apply that unique ID. In this case, you can snag that uniquness from the actual URL:

    Code:
    < ?php
    $page = $_SERVER['REQUEST_URI'];
    $page = str_replace("/","",$page);
    $page = str_replace(".php","",$page);
    $page = $page ? $page : 'default'
    ?>

    # August 7, 2008 at 7:13 pm

    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!

    # October 23, 2008 at 12:48 pm

    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 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".