Active Menu using jquery in Wordpress

Active Menu using jquery in WordPress

by Bhumi // Feb 25,2013 // No comment

WordPress is a open source content management system based on PHP and MySQL.Its easy and fast to develop site using wordpress.

Today I am going to share how to create an active tab effect in a navigation bar by fetching the # from the url. This is used when we are developing one page layout theme for wordpress and want to make menu as active when its clicked and scroll down to that menu.

Well, Its pretty simple to make navigation bar active, when you are linking to the different page But its quite difficult for the same page.Here I have used jQuery code to fulfil that purpose.

Let’s see the following code which is used to make navigation active on same page.


$('.menu a').click(function () {
 setTimeOut(function(){
    var loc_hash = window.location.hash;
    $('.menu a').each(function () {
       if (loc_hash == $(this).attr('href')) {              
        //To remove class from all other menus
        $('.menu a').removeClass('active');
        //To add class into the selected menu
        $(this).addClass('active');
       }
    });
}, 500);
});

$('.menu a').click(function () {

setTimeOut(function(){

var loc_hash = window.location.hash;

$('.menu a').each(function () {

if (loc_hash == $(this).attr('href')) {

//To remove class from all other menus

$('.menu a').removeClass('active');

//To add class into the selected menu

$(this).addClass('active');

}

});

}, 500);

});

window.location.hash return the value starts from # in the url.Here In above code setTimeout is used to execute function after link is clicked.so it make current link active.

Or if you have used jQuery Scroll for page scrolling which gives smooth scrolling effect to the page.then you can use below code to add active class into it.


$(function() {
     $('.menu a').bind('click',function(event){
         var $anchor = $(this);
         $('html, body').stop().animate({                       scrollLeft: $($anchor.attr('href')).offset().left
                     }, 1000);
        //To remove class from all other menus
        $('.menu a').removeClass('active');
        //To add class into the selected menu
        $(this).addClass('active');
                    event.preventDefault();
         });
   });

$(function() {

$('.menu a').bind('click',function(event){

var $anchor = $(this);

$('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left

}, 1000);

//To remove class from all other menus

$('.menu a').removeClass('active');

//To add class into the selected menu

$(this).addClass('active');

event.preventDefault();

});

Thank you for reading, good luck and let me know if you run in to any problems & I’ll help as much as I can

Hope this post will helpful for you, waiting for your responses.Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Jquery Tabs in wordpress without plugin

Before today, I was using plugin for add tabbing in wordpress. but today I have tried one thing to use tabbing in wordpress without plugin READ MORE

Customize Upload mime types in wordpress

Here in this quick post,I am going to explain about how to customize media uploads types in wordpress. In the latest version of wordPress, you READ MORE