To structure your menu in HTML, follow this format:
<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>
Remember to assign a unique id to the body tag as suggested by Cody. This id should match the value of the title attribute for each menu link.
Next, apply the following CSS styles:
.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;}
Include this jQuery script on 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');
});
});
For a live demonstration, visit this link and change the body element's id to see how it works.
Additionally, this method eliminates the need to constantly adjust CSS when modifying the HTML menu, unlike other approaches. While it relies on jQuery, you can opt for a pure CSS solution by directly applying the .active class based on the current page. This technique can also be adapted for use with <li> elements if needed.