How to make a HTML and CSS multilevel navigation menu
One of the essential components of a website is the navigation menu.
A navigation menu is a set of links that allow users to move between different sections and pages of a website quickly. It is a crucial component for website usability as it helps visitors to find the information they need easily, which ultimately leads to a better user experience.
A well-designed navigation menu can also improve the website's SEO by making it easier for search engine bots to crawl the website and index it's content.
In this article, we will cover how to create a multilevel navigation menu using HTML & CSS.
What is a Multilevel Navigation Menu?
For large and complex websites with more pages and content, a multilevel navigation menu becomes necessary.
A multilevel navigation menu is a type of navigation menu that has several levels of submenus. It helps visitors easily and quickly navigate through the website hierarchy and find what they are looking for. It also helps to prevent cluttering the main menu.
Creating HTML & CSS Multilevel Navigation Menu
In this tutorial, we will create a main menu with four main menu items: Home, About, Services, and Contact Us. The About and Services menu items will have sub-menus, each with two additional menu items.
The second menu item of the Services sub-menu will also have a sub-menu with three menu items.
HTML Code
The first step is to create the HTML markup. We will use the <nav>, unordered list (<ul>), and anchor tag (<a>) HTML elements to structure the navigation menu.
The four main menu items are direct list items (<li>) of the parent <ul>.
Within the list items are the links made using the anchor tag (<a>).
For the menu items that will have sub-menus, we will add extra unordered lists just before the closing list tags (</li>). These unordered lists will hold the sub-menu items. So in them, we will add list items for the sub-menu items.
To add another level of sub-menus to the sub-menu items, we will repeat the same process as above by adding an unordered list with its own list items.
Below is an example HTML code demonstrating exactly that:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">Our Team</a></li>
<li><a href="#">Mission & Vision</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li>
<a href="#">Digital Marketing</a>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Email Marketing</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
CSS Styling
Now that we have our HTML markup for the navigation menu in place, it's time to style it with CSS. Below is an example CSS code we will be using:
/*Step 1*/
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #1e4451;
}
/*Step 2*/
nav li {
display: inline-block;
position: relative;
}
/*Step 3*/
nav a {
display: block;
padding: 0 10px;
line-height: 50px;
color: #fff;
font-size: 18px;
text-decoration: none;
}
/*Step 4*/
nav ul ul {
position: absolute;
top: 51px;
left: 0px;
display: none;
}
/*Step 5*/
nav ul li:hover > ul {
display:block;
}
/*Step 6*/
nav ul ul li {
width:200px;
}
/*Step 7*/
nav ul ul ul{
top: 0;
left: 200px;
}
/*Step 8*/
nav a:hover {
background-color:#63b175;
}
Breaking the code down
I have segmented the CSS code into steps using comments for a better explanation.
Step 1: By setting the list-style property to none we have removed the default bullet points associated with unordered lists. We have then set the background color, padding, and margin of the unordered list element to zero.
Step 2: By default, list items are displayed vertically, each on a new line. To reorganize them to be displayed horizontally we set the display property to "inline-block" and position to "relative".
Step 3: This step is typically the styling of the links. We set the text color, font size, padding, and line height of the links. By default, links are underlined in HTML. We remove the underline by setting the text decoration to "none".
Step 4: This step involves positioning the level 1 sub-menus to be directly below their parent menu items, and then hiding them from showing by default.
Step 5: This step allows the showing of the sub-menus (hidden in the previous step) when users hover the mouse cursor over their parent menu items.
Step 6: This helps set the desired width of sub-menus and their menu items.
Step 7: This helps position the child sub-menus directly to the right of their parent sub-menu items. In this case, this will place the "Digital Marketing" sub-menu directly to the right side of this item.
Step 8: In this step, we set the hover effect on the links to make it easier for the user to see which menu item they are hovering over. On hovering menu items, this changes their background color to green. You can also change the text color if you wish.
Full Code
Below is the full code for the navigation menu with HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<title>Multilevel Navigation Menu</title>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #1e4451;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
display: block;
padding: 0 10px;
line-height: 50px;
color: #fff;
font-size: 18px;
text-decoration: none;
}
nav ul ul {
position: absolute;
top: 51px;
left: 0px;
display: none;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul li {
width:200px;
}
nav ul ul ul{
top: 0;
left: 200px;
}
nav a:hover {
background-color:#63b175;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">Our Team</a></li>
<li><a href="#">Mission & Vision</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li>
<a href="#">Digital Marketing</a>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Email Marketing</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
</html>
Below is the menu from the above code:
Making the Menu Responsive
Though the above menu looks great on desktop screens, it may be a bit disorganized or require horizontal scrolling when viewed on mobile devices, which makes it challenging to navigate and use the site. Thus the need to make it responsive.
A responsive navigation menu dynamically adjusts its layout and structure based on the size of the user's device screen. This ensures that the user can easily use the menu regardless of their device, improving the user experience.
Now that we have our HTML & CSS multilevel navigation menu, it's time to make it responsive for both desktop and mobile devices.
To achieve this, we will use CSS media queries to detect the screen size and adjust the menu layout accordingly. The menu will be hidden by default on mobile devices' screens.
We will then have a menu icon which when clicked the collapsible menu will be shown or hidden with the help of JS/jQuery.
CSS media queries
@media screen and (max-width: 767px) {
nav ul {
position: absolute;
top: 50px;
right: 0;
width: 100%;
height: auto;
display:none;
}
nav li {
width: 100%;
position: relative;
display: block;
border-bottom: 1px solid #f2f2f2;
}
nav ul ul {
position: static;
}
nav ul ul li {
width:100%;
display: block;
border: none;
left: 0.5em;
border-top: 1px dotted #f2f2f2;
}
nav ul ul ul li {
left: 0.5em;
}
}
Code Description
The above CSS code applies to devices with a screen width of 767px or less.
We start by giving the menu an absolute position, 50px from the top to allow some space for showing the menu icon. We have also set the menu to full-screen width (100%), and its height to auto to make it responsive.
We have set its display property to none so that it will be hidden by default on mobile screens.
We then set the width of the list items to 100% and their display property to block to make them full width. We have also added a border to separate each menu item.
We adjusted the position of the sub-menu elements, so they appear below their parent menu items, and we set their display property to block to also make them full width. We have slightly indented them and used a different border style so as to distinguish them from their parent menu items.
Creating a Menu Icon
The HTML code below creates a simple menu icon using three div elements with the class "bar" inside a div with the class "menu-icon".
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
The CSS code below applies styling to make the bars appear as three lines and position the menu icon at the top-right corner of the screen. We will also hide it by default and show it only on mobile devices using the CSS media queries.
.menu-icon {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 18px;
cursor: pointer;
position: absolute;
right: 10px;
}
.bar {
width: 24px;
height: 3px;
background-color: #1e4451;
transition: all 0.2s ease-in-out;
}
.menu-icon:hover .bar {
background-color: #63b175;
}
We will then use jQuery to show (slide down) or hide (slide up) the navigation menu when the menu icon is clicked. The code below does the trick.
<script>
$(function() {
$(".menu-icon").click(function(){
$("nav ul").slideToggle();
});
});
</script>
Make sure to import the jQuery library into your web page before adding the above code.
Below is the complete HTML, CSS, and jQuery code for the responsive multilevel navigation menu.
<!DOCTYPE html>
<html>
<head>
<title>Multilevel Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #1e4451;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
display: block;
padding: 0 10px;
line-height: 50px;
color: #fff;
font-size: 18px;
text-decoration: none;
}
nav ul ul {
position: absolute;
top: 51px;
left: 0px;
display: none;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul li {
width:200px;
}
nav ul ul ul{
top: 0;
left: 200px;
}
nav a:hover {
background-color:#63b175;
}
.menu-icon {
flex-direction: column;
justify-content: space-between;
height: 18px;
cursor: pointer;
position: absolute;
right: 10px;
display:none;
}
.bar {
width: 24px;
height: 3px;
background-color: #1e4451;
transition: all 0.2s ease-in-out;
}
.menu-icon:hover .bar {
background-color: #63b175;
}
@media screen and (max-width: 767px) {
.menu-icon {
display: flex;
}
nav ul {
position: absolute;
top: 50px;
right: 0;
width: 100%;
height: auto;
display:none;
}
nav li {
width: 100%;
position: relative;
display: block;
border-bottom: 1px solid #f2f2f2;
}
nav ul ul {
position: static;
}
nav ul ul li {
width:100%;
display: block;
border: none;
left: 0.5em;
border-top: 1px dotted #f2f2f2;
}
nav ul ul ul li {
left: 0.5em;
}
}
</style>
</head>
<body>
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">Our Team</a></li>
<li><a href="#">Mission & Vision</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li>
<a href="#">Digital Marketing</a>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Email Marketing</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<script>
$(function() {
$(".menu-icon").click(function(){
$("nav ul").slideToggle();
});
});
</script>
</body>
</html>
Below is the responsive navigation menu from the above code:
If you are using a desktop browser on a large screen, you may try resizing the browser window to see the changes on the navigation menu above on different screen sizes and how it looks on a mobile screen.
Conclusion
A navigation menu is an essential component for website usability, and a multilevel navigation menu is necessary for websites with more pages and content.
In this article, we have demonstrated how to create a fully responsive multilevel navigation menu using HTML, CSS, and jQuery.
By following the steps outlined in this article, you can create a navigation menu that is easy to use, looks great, and improves the user experience of your website.
