Css media

How to create a mobile menu bar with HTML, CSS, and JavaScript

Without a doubt, you can create a switchable mobile menu using CSS frameworks like TailWind or BootStrap.

But what is the concept behind? And how do you create one from scratch without depending on these CSS frameworks?

Doing the above yourself gives you full control over the personalization. So, without further ado, here’s how to create a toggle mobile menu using your favorite programming language.

If you haven’t already, open your project folder and create your project files (HTML, CSS, and JavaScript).

Below you’ll see sample code you need for all three types. And if you haven’t already, consider downloading these apps to learn the code before reading on.

We will start with HTML:




Mobile Navigation Menu













VIDEO OF THE DAY MAKEUSE

CSS:

/*This section demarcation is solely for the purpose of the tutorial*/
section{
width: 800px;
height: 600px;
margin-top: 50px;
margin-left: 250px;
border: solid black 1px;
background: #e6e3dc;
}
/*position the divs container in your DOM*/
#toggle-container{
display: grid;
width: fit-content;
margin-left: 720px;
margin-top: 10px;
}
/*Stack the three divs above each other. Then set a height and width for them.*/
#one, #two, #three{
background: black;
width: 30px;
height: 3px;
margin-top: 5px;
}
.toggle-content{
display: none;
margin-left: 700px;
margin-top: 20px;
}
.toggle-content a{
display: block;
text-decoration: none;
color: black;
font-size: 30px;
}
.toggle-content a:hover{
color: blue;
}
/*Display the class instance created by JavaScript in block*/
.displayed{
display: block;
}


Add JavaScript:

var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("click", function(){
//Apply a class intance to each navigation and set display to toggle:
toggleContents.classList.toggle("displayed");
});

This is what a working output looks like when you click the menu bar:


Final output of the switchable mobile menu

The menu is switchable, so clicking again on the bar – or anywhere on the page – hides the navigation.

Related: Website Style Elements With CSS Gradient Background

Your browser may not support hiding content when you click anywhere on your web page. You can try to force this by using an event target and a JavaScript loop. You can do this by adding the following block of code to your JavaScript:


//Add a click event to your webpage: 
window.onclick = function(event) {
//Target the click event on the menu bar to allow the webpage body to track it:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
//Hide the navigations by looping through each of them:
for (var i = 0; i < dropdowns.length; i++) {
var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}

So here is a summary of what you just did: You created three lines using the div HTML tag. You have adjusted their height and width and positioned them in your DOM. Then you assigned them a click event using JavaScript.


Related: How to Build a Website: For Beginners

You set the initial display of your navigation to nothing to hide them when loading the page. Then the Click on event on the three lines toggles these navigations based on an instantiated JavaScript class (attach). Finally, you used this new class to display the navigations in CSS, and in JavaScript toggleContent method.

Related: Neumorphic Design Trends in HTML, CSS, and JavaScript

The rest of the CSS, however, is up to your preferences. But the one in the example CSS snippet here should give you an idea of ​​how to style your own.

Be more creative when building your website

Making a visually appealing website takes some creativity. And a user-friendly website is more likely to convert your audience than a bland site.

While we’ve shown you how to create a custom navigation menu here, you can always go above and beyond and make it more engaging. For example, you can animate the navigation display, give them a background color, etc. And whatever you do, make sure your website uses best design practices and user-friendly layouts.


Three people in the office.
5 Surprising Ways Gamification Boosts Workplace Productivity

Commitment is the key to the success of your organization. Here are some ways you can take advantage of gamification to achieve this in your workplace.

Read more


About the Author