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: 297 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

Robocalls, autodialers, silent calls and the Indian scam arriving to Australia

That initial call you get, with silence on the other end, is essentially the first of the re...

Read more

Are you interested in great content? From nigerian scammers

Are you interested in great content? Be aware of the nigerian scam...

Read more

Capoeira classes in the Central Coast Australia with the Grupo Capoeiras

CAPOEIRA CLASSES IN THE CENTRAL COAST (FORMADO COMPRIDO 0439 007 017)
Wednesday 4pm-5pm at...