CODEWITHSUNDEEP
htmlcssnavigation
atrljoe
atrljoe

Reputation: 8151

Can this navigation be done completely in CSS

I am a little stuck. I have created almost everything in the picture below. What I am stuck on is I am trying to figure out how I would set it up so that when a user clicks one of the links it makes the line below become red (after the next page loads). Obviously I would need to use Jquery to detect the page then add inline css, but what I am struggling with is I want this to be as easy as possible so that I can give this template to others and then they can add or remove items as necessary. I was trying to figure out if I could somehow use a li element to do this but I have not found a way yet. Does anyone have any ideas to help me?

enter image description here

Upvotes: 6

Views: 176

Answers (3)

Stefan
Stefan

Reputation: 3900

Build your menu like this, in HTML:

<body id='Search' >
    <div id='menu'>
        <div class='bars'></div>
        <a href='/home/' title='Home'>Home</a>
        <a href='/community/' title='Community'>Community</a>
        <a href='/search/' title='Search'>Search</a>
        <a href='/contact/' title='Contact'>Contact</a>
        <div class='bars shift'></div>            
    </div>
</body>

Note that the body tag has a page-specific id (as Cody suggests). Also note that this id must be the same as the value of the title attribute for the menu link.

Then use this CSS:

.bars {border-top:1px solid #CCC;border-bottom:1px solid #CCC;height:5px;}
.shift {margin-top:-6px;}
#menu {font-family:arial;font-size:12pt;text-align:center;}    
#menu a {display:inline-block;padding:7px;text-decoration:none;color:#000;}
.active {border-bottom:5px solid red;}

Finally, add this jQuery to each page:

$(document).ready(function(){
    var id = $('body').attr('id');
    $('#menu a').each(function () {
        var title = $(this).attr('title');
        $(this).removeClass('active');
        if (title == id) $(this).addClass('active');
    });
});

You can see a live fiddle demo here. (To test, just change the id of the body element and press run.)

EDIT: The benefits of this method compared to Cody Grays' method is that you don't need to modify the css every time you change the HTML when you add, remove or edit a menu item. On the other hand it uses jQuery. However, if you want a pure css solution, just remove the jQuery, and the id of the body element, and instead directly apply the .active class to the particular link, depending on the particular page (similar to jackJoe's suggestion).

This can easily be modified if you must use <li> elements.

Upvotes: 1

Cody Gray
Cody Gray

Reputation: 245012

You could do it the way jackJoe suggests and set the active class server-side on the currently selected page, but you could also do this with pure CSS and a little advance planning.

This involves first setting the id attribute for the <body> tag of your page, which is a good practice to get into anyway. Then, your CSS file will take advantage of that body id to determine which <li> should appear as "active".

Sample page code:

<body id="main"> <!-- change this id for each page -->
    <ul>
        <li class="main-nav"><a href="#">Main</a></li>
        <li class="community-nav"><a href="/community">Community</a></li>
        <li class="search-nav"><a href="/search">Search</a></li>
    </ul>
</body>

Sample CSS:

li.main-nav,
li.community-nav,
li.search-nav
{
    background: #FFF;
    /* your other awesome styles */
}

#main li.main-nav,
#community li.community-nav,
#search li.search-nav
{
    /* style the active tab differently */
    background: #F00;
}

This way, the HTML code for the navigation section can stay completely static on every page. It doesn't have to be rendered server-side or modified dynamically on the client side.

There's a nice write-up about this technique available over on CSS Tricks: ID Your Body For Greater CSS Control and Specificity

Upvotes: 3

jackJoe
jackJoe

Reputation: 11168

It's fairly straightforward. Create a class for the "active" state and style it:

<li class="active">Home</li>

and style it (depends on the HTML structure, but you get the idea)

CSS:

.active {
    border-bottom: 3px red solid;
}

All you need to do is place the class when the page loads (server-side for instance)

Upvotes: 2

Related Questions