WordPress is an open source content management system based on PHP and MySQL.It’s easy and fast to develop the 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 the menu as active when its clicked and scroll down to that menu.
Well, It’s pretty simple to make navigation bar active, when you are linking to the different page, But it’s 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 the same page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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 a function after a 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 following code to add active class into it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(function() { $('.menu a').bind('click',function(event){ var $anchor = $(this); 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 into 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.
Comments (1)