Toggle nav in vanilla JavaScript Vanilla JS
Toggling navigation on a website is showing and hiding the navigation menu when a menu icon is clicked. There are 2 types of toggling navigation. The first has a single toggle link (menu icon) that both shows and hides the navigation. The second has separate links to show and hide the navigation.
This is how to make a single toggle navigation link functional in vanilla JavaScript.
sidebar = document.querySelector('#sidebar');
toggle.addEventListener('click', function(e) {
e.preventDefault();
sidebar.classList.toggle('hidden');
});
This stores the toggle link and navigation element in variables and then inside a click event listener adds or removes the class 'hidden' to the sidebar element each time the toggle element is clicked depending on whether the sidebar element already has the class or not using element.classList.toggle('class-name').
When using an <a> (anchor) element for purposes like a toggle or tab instead of standard links, you can leave the href value as '#'. The e.preventDefault() stops an anchor from sending the user to its href url when it is clicked.
The class 'hidden' that is applied to the sidebar is used to create a CSS rule that visually hides the navigation so all that is required of the JavaScript is to add and remove the class.
You may also want to create an animated menu icon which turns into an x (close) icon when clicked if you are using a single toggle link for toggling your navigation.
For more control, you can manually add and remove the class you are toggling on your navigation like this.
sidebar = document.querySelector('#sidebar');
toggle.addEventListener('click', function(e) {
e.preventDefault();
if (sidebar.classList.contains('hidden')) {
sidebar.classList.remove('hidden');
} else {
sidebar.classList.add('hidden');
}
});
In this example, the class is being added an removed inside a conditional statement which checks if the element already has the class with element.classList.contains('class-name').
The class is then added with element.classList.add('class-name') and removed with element.classList.remove('class-name').
The benefit of toggling a class manually is that you can also write more code inside each code block in the conditional statement to perform other actions at the same time depending on whether the element already had the class or not.
Now let's say you have a navigation with a menu icon and a separate close icon. This is how to make a 2 link toggle navigation system functional in vanilla JavaScript.
close = document.querySelector('#close'),
sidebar = document.querySelector('#sidebar');
toggle.addEventListener('click', function(e) {
e.preventDefault();
sidebar.classList.remove('hidden');
});
close.addEventListener('click', function(e) {
e.preventDefault();
sidebar.classList.add('hidden');
});
In this case you'll need an event listener for both of the toggle links, one for the link to show the navigation and one for the link to close it. Since we already know whether the user wants to open or close the navigation in a 2 link system by which link they clicked, we don't need to add or remove (toggle) a class in each event listener; each event listener always performs the same action. The link to show the navigation will remove the class that hides the element visually and the link to hide the navigation adds the class that hides it.
If you're using a 2 link system to toggle your navigation, you'll want 2 icons. A menu icon and a close icon.
Thanks for reading.
Ryan
Published on 22 Mar 2019 (on a previous domain)
Last modified on 22 Aug 2022