Home/ Questions/Q 7680487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T18:07:31+00:00

I am a little stuck. I have created almost everything in the picture below.

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0