Follow by Email

How to change color or background of the menu tab of current page using css & jquery

Hello,
In this tutorial i will show you that how can we change the color or background of the menu tab when we are on that page.
<div class="menu">
            <ul>
                <li><a href="/Home">Home</a></li>
                <li><a href="/About Me">Forms</a></li>
                <li><a href="/Contact Me">Look &amp; Feel</a></li>
                <li><a href="/Blog">Security</a></li>
            </ul>
        </div>
 
 The css is somthing like this....
 
.menu ul{
    width100%;
    height21px;
    list-stylenone;
    margin0px;
    padding0px 0px 0px 3px;
}
  .menu ul li {
    displayblock;
    floatleft;
    text-aligncenter;
    margin-left3px;
    margin-right3px;
    border-radius5px 5px 0px 0px;
    -moz-border-radius5px 5px 0px 0px;
    -webkit-border-radius5px 5px 0px 0px;
    border-left1px solid black;
    border-right1px solid black;
    border-top : 1px solid black;
    background-color#ececec;
}  
 
 
 .menu ul li a{
    text-decorationnone;
    width90%;
    colorblack;
    padding-left29px;
    padding-right29px;
    
 } 
 
  .menu ul li a:hover{
     colorblue;
     text-decorationunderline;
 } 
 
 .menu ul li.active a{
    border-bottom2px solid white;
    background-colorwhite;
}
 
 
and a samll jquery which does all magic is ...
<script>
        $(".menu ul li").removeClass("active");
        $(function () {
            var url = window.location.pathname;  
            var activePage = url.substring(url.lastIndexOf('/') + 1);
            $('.menu ul li a').each(function () {
       var currentPage = this.href.substring(this.href.lastIndexOf('/') + 1);
             if (activePage == currentPage) {
               $(this).parent().addClass('active');
                }
            });
        });
</script>
 
  

0 comments:

Post a Comment