How to do a Responsive Top Navigation Bar cooler than the one in w3schools.com

Write By: No author Published In: Web Design Created Date: 2018-10-11 Hits: 455 Comment: 0

Learn how to create a responsive top navigation menu with CSS and JavaScript.

Starting with the nice example that w3schools gave us in this article, we have develop a version to collapse once the user click in the menu links. 

In the HTML side, add this to any link you want to give the collapse function:

class="tooglers"

And in your javascript file

$("#myTopnav a.tooglers").click(function() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav responsive") {
x.className = "topnav";
} else {
x.className = "topnav";
}
});

With that bit of code we'll ensure that everytime a visitor clicks the "tooglers" links, the div changes the class -producing the collapsable effect-.

Easy?

Thanks for sharing :)

Leave A Comment

Captcha


Latest Blog

Read more

Online customizations for the Hut Dogs rebranding

Hut Dogs™ offer Gourmet Hot Dog catering for all occasions – the best Hot Dogs that money can buy...

Read more

Nasty reviews for your businesses by Kath Read

The revenge of the legal representative LOL

...
Read more

jQuery show/hide based on select (survey mode)

I have developed a bit of code based in the infographic time: "What’s the best T-shirt printing t...