Grow your CSS skills. Land your dream job.

Show a div if nav item is selected

  • # March 5, 2012 at 8:28 am

    Hello,
    I want to show a little message underneath a nav item if its currently selected. I have been doing some research on how to do this and haven’t gotten very far. I know I have seen this done in css3 and in jquery. i know I posted this in the javascript forum but I would like to know how to do it both ways. Here is a screen shot of what i want to accomplish http://cl.ly/3f3W04401f1w1L2K212F I already have a ul for the nav, with a class of .current for the selected nav item. Now i just need to know what the best way to hide the information for the unselected nav item. I played around with some jquery, using a if statement .hasClass and .removeClass functions with no luck. I just need to be pointed in the right direction. Thanks for any help.

    # March 5, 2012 at 11:29 am

    all css

    ul li {
    display:inline-block;
    background:red;
    margin:5px;
    padding:5px;
    width:50px;
    height:50px;
    text-align:center;
    }

    ul li a span {
    margin-top:20px;
    visibility:hidden;
    position:relative;
    top:20px;

    }

    ​ul li a span.current {
    visibility:visible;
    }​

    html

    ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

    This isn’t pretty but it should accomplish what you are trying or at least get you moving in the right direction.

    # March 5, 2012 at 6:13 pm

    Slight change on Schmotty’s work
    http://jsfiddle.net/hAgJ8/

    # March 5, 2012 at 6:21 pm

    Here is a pure CSS version for you: http://jsfiddle.net/joshnh/a2HGf/

    If you have any questions feel free to ask!

    # March 5, 2012 at 7:32 pm

    Thanks guys for the information. Joshuan thats exactly what I needed. Much appreciated

    # March 5, 2012 at 7:35 pm

    No worries at all! Feel free to use/abuse that code too.

    # May 12, 2013 at 6:57 pm

    How do you make this a vertical menu?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

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