blog post

When we’re creating a navigation menu for a website, it’s always good to make it so the visitors or user on the website knows on which page or part of the site he is on. This can be accomplished by adding an “active class” or “current class” to the menu item that links to the page on which the visitor or user is

html

<div id="nav">
    <ul>
        <li><a href="active.html">Home</a></li>
        <li><a href="active1.html">Contact</a></li>
        <li><a href="active2.html">About</a></li>
        <li><a href="active3.html">Portfolio</a></li>
    </ul>

</div>

CSS

<style>
#nav {
	margin:200px auto;
	width:430px;
	}

#nav ul {
	list-style:none;
	background-color:#64abfb;
	}

#nav ul li {
	display:inline-block;
	line-height:44px;
	}

#nav ul li a {
	margin:10px;
	color:#FFF;
	padding:4px;
	font-size:20px;
	text-decoration:none;
	}

#nav ul li a:hover {
	border-bottom:3px #FFF solid;
	}

#nav ul li .active {
	border-bottom:3px #FFF solid;
	}
</style>

Script

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>

$(document).ready(function(){
  $("#nav>ul>li a").each(function () {
        if ($(this).attr("href") == window.location.pathname) {
            $(this).addClass("active");
        }
    });
});
</script>

  • Share This Story


Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla


I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Leave a comment

Name
E-mail
Url
Message

Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email

 

Style Switcher

Change Color

×! We use cookies to improve your user experience. More information