Grow your CSS skills. Land your dream job.

Help with CSS Menu States

  • # March 29, 2013 at 12:45 pm

    Hey all,

    I recently took on a client for a code touch-up gig. Their site was all sloppy javascript, inline css, and tables – yes, tables!

    Anyway, I’ve gotten it pretty nicely cleaned up but I have one thing left to do that I’m not sure HOW to do.

    The menu is a simple horizontal list with styling … the client is requesting that the menu have page-specific states. Meaning if I’m on page whatever.php then the menu buttons “whatever” should be a different color than the rest of the menu buttons, signifying my location.

    http://vapedgoodz.com

    I don’t know how to pull that off, could someone give me a hand or point me in the right direction?

    Very Best,
    Tanner Campbell

    # March 29, 2013 at 12:51 pm

    There are a couple of ways to do it.

    The easiest way is to give each page an ID (or class)

    Thus, if you have a menu with 3 items you give each of those list items a class of its own.

    So you could have a `.home`, `.contact`, `.clients` etc on your list items.

    The you can target the page and list items with

    #page-1 .home {
    background:xxxxxx;
    }

    #page-2 .home {
    background:xxxxxx;
    }

    etc…. if you see what I mean.

    # March 29, 2013 at 1:23 pm

    Here’s the rub: index.php file calls on header.php where the menu lives. I’ll have to pull the menu out of the header to make this work .. won’t I?

    # March 29, 2013 at 1:33 pm

    I don’t see why…for the menu all you are doing is adding classes not moving things around.

    Ditto for the page ids.

    Everything else is in your CSS sheet

    # March 29, 2013 at 1:44 pm

    Alright, this sounds awesome. I’ve never given an entire page a class so I’m going to Google! I’ll let you know how it works out.

    Thanks Paulie,
    Tanner

    # March 29, 2013 at 1:48 pm

    @tannercampbell, if I’m understanding you correctly, you’d just need to add an `active` class to be assigned to whichever nav link corresponds to the page you’re actually on? jQuery would be your solution for this.

    http://docs.jquery.com/Tutorials:Auto-Selecting_Navigation

    # March 29, 2013 at 1:52 pm

    Chris,

    No. Haha. I mean yes, you’re probably right that would work, but I don’t want any java on this site. The dude is a java addict. Thank you though!

    Best,
    Tanner

    # March 29, 2013 at 1:57 pm

    @Paulie_D

    So here’s my confusion:

    Google taught me how to give a page a class:

    and

    #contact-page {background-color: #fff;}

    but … and I’m sorry if this is a stupid questions … if the BODY tag is in the header.php file … how do I have more than one instance of body id = “whatever”?

    # March 29, 2013 at 2:08 pm

    can you wrap the header.php file in a div?

    # March 29, 2013 at 2:10 pm

    Can I wrap the header file in a div … hmmm. That’s an interesting thought.

    I’ll give it a try … would have never thought of that on my own. I’ll let you know what happens @cwork

    # March 29, 2013 at 2:20 pm

    Well @cwork a div didn’t work but a span did. Now I guess the last question is how to I tell this:

    .button
    {
    display: inline-block;
    white-space: nowrap;
    background-color: #fff000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1c5400), to(#339900));
    background-image: -webkit-linear-gradient(top, #1c5400, #339900);
    background-image: -moz-linear-gradient(top, #1c5400, #339900);
    background-image: -ms-linear-gradient(top, #1c5400, #339900);
    background-image: -o-linear-gradient(top, #1c5400, #339900);
    background-image: linear-gradient(top, #1c5400, #339900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#1c5400′, EndColorStr=’#339900′);
    border: 2px solid #000;
    padding: .5em;
    margin: 0 0 0 11px;
    font: normal 12px ethnocentricregular, Arial;
    text-decoration: none;
    color: #fff000;
    text-shadow: 0 1px 0 rgba(0,0,0,1);
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    -moz-box-shadow: 0 0 1px 1px rgba(28,84,0,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 1px 1px rgba(28,84,0,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    box-shadow: 0 0 1px 1px rgba(28,84,0,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    }

    to respect what I put in

    .about {color: #fff;}

    # March 29, 2013 at 2:29 pm

    I think I’m going down the wrong path here. If anyone else can help I would appreciate it. I’m going to continue to look for the answer. Thanks!

    Tanner

    # March 29, 2013 at 3:53 pm

    As Paulie mentioned, there are a few ways to do this. You’re using a server side scripting language (PHP) so that’s one way – you could use PHP to add a class to the menu item based on url.

    Paulie’s method works well too, so I’ll try to explain it better.

    put a class on each of your menu items (like .home, .contact, .about). Then for each page (or section) of the site put a similar id or class on the body – so the home page would have an id of home on the body element and the contact page would have an id of contact on the body, and let’s say there’s an about page and a sub about page, each would have an id of about on the body. Then, set your css up like this:

    #home .home,
    #contact .contact,
    #about .about {
    styling for active menu item }

    so that when the .home classed menu item is a child of the #home id (which only occurs on the homepage) it gets the active menu item styling; or when the .about classed menu item is a child of the #about id (on either of the two about pages) then it gets the active menu styling…

    # March 29, 2013 at 4:08 pm

    wolfcry is pretty much spot on; excellent explanation. But, if I understand correctly, the issue he is having is how does he dynamically put a class on the body, since it’s being called from a header.php file. That’s why I thought a wrapper around the header might be the simplest.

    edit: could you alter the header.php file to not include the body tag? and then put the body tag in your page files?

    # March 29, 2013 at 5:10 pm

    @cwork, you’re quite right – I missed that.

    Here’s an article on different ways to accomplish [dynamic ids with php](http://perishablepress.com/dynamic-body-class-id-php-wordpress/ “”).

Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.

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