Active Style

Active Style

What is active style for navigation?

We have seen in all websites, the navigation menu item for the current page will be highlighted. This helps the users to know in which page he/she is. This is a fundamental requirement for basic usability. To achieve this, most of the developers use ‘active’ class or active style css for links in each page. They will have to change the HTML code behind the navigation for each and every page. Otherwise developers use jquery for adding active style for the navigation. Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Or without using jQuery? Of course it is possible to add active style for the menu

How to add active style for navigation?

We will see step by step process of adding active style for navigation. First, we will give the HTML required for this.

HTML required for Active style for navigation

    <li><a href="#" class="home">Home</a></li>
    <li><a href="#" class="about">About us</a></li>
    <li><a href="#" class="services">Services</a></li>
    <li><a href="#" class="contact">Contact us</a></li>

Here, we have assigned a class to each navigation item. Next we need to insert an id into the <body> tag. The id should be representative of where users are in the site. It should change when users move to a different site section or a page. When in ‘Home’ it should read <body id=”home”>, in ‘About Us’ it should be <body id=”about”>, in ‘Services’ it should be <body id=”services”> and in ‘Contact Us’ <body id=”contact”>.

Next step is to add some styles for the items.

CSS required for Active style for navigation

#home .home, #about .about, #services .services, #contact .contact {
    background: red;

This basically creates a rule that only takes effect when a particular class is inside a particular ID.When class=”home” is contained within id=”home”, active style is added for home item. The same way active style is applied for other items, based on the id. These situations will only occur when the user is in the appropriate site section, seamlessly creating our highlighted navigation item. Note that this is useful when you are doing static website.

Hope this article helps to create active menu style or highligted menu with the csss for your web pages.

label, , , , , , ,

About the author