Today we are going to see about how to create multilevel dropdown menu using simple Css, Html and JavaScript code. This is one of the useful code we can use this code for your website menu without any difficulty. Now a days lot of website having the more pages with links, when you can display all the links in the menu you are facing some difficulties but this types of multi-level-drop-down menu is easily reduce your difficulties. This types of menu structure is commonly used one. The additionally it supports responsive. It is properly displayed all the devices like Mobile, Tab, Laptop, Desktops.
In this example i used the menus like below. First you should include the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> Because then only it detects the device for responsive menu otherwise it will not work.
Set the Navigation bar:
#nav {position: relative;
min-height: 60px;
max-width: 100%;
background-color: transparent !important;
color: #000;
}
This code is helps to set the Navigation bar, You can also customize the min-height and max-width according to the your website layout. Then the media screen you can write the respective code to display the menu perfectly. The below is the media query code.
Full Code for Multi Level Dropdown Menu using Css:
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi Level Dropdown menu using css and javascript</title>
<style>
html { font-family: 'roboto', sans-serif; }
.container {
width: 90%;
margin: 10vh auto;
}
a { color: inherit; }
#nav, #nav ul, #nav li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
box-sizing: border-box;
}
#nav {
position: relative;
min-height: 60px;
max-width: 100%;
background-color: transparent !important;
color: #000;
}
@media screen and (min-width: 650px) {
#nav { display: inline-block; }
}
@media screen and (max-width: 650px) {
#nav { display: block; }
}
#nav li { position: relative; }
#nav a {
text-decoration: none;
height: 100%;
display: block;
padding: 0 50px;
}
@media screen and (min-width: 650px) {
#nav a:focus { outline: none; }
}
.plusMark {
margin-left: 10px;
font-size: 20px;
font-weight: 700;
}
@media screen and (min-width: 650px) {
#nav li {
text-align: left;
width: 200px;
}
}
@media screen and (max-width: 650px) {
#nav li {
text-align: center;
width: 100%;
}
}
@media screen and (min-width: 650px) {
a + ul { position: absolute; }
a + ul:not(.js-showElement) { display: none; }
}
@media screen and (max-width: 650px) {
a + ul { position: relative; }
a + ul:not(.js-hideElement) { display: block; }
}
#nav > ul, .fa {
height: 100%;
line-height: 60px;
}
#nav > ul > li {
position: relative;
text-align: center;
line-height: 60px;
}
@media screen and (min-width: 650px) {
#nav > ul > li {
float: left;
width: auto;
}
}
@media screen and (max-width: 650px) {
#nav > ul > li {
float: none;
display: block;
width: 100%;
}
}
#nav > ul > li > a { background-color: transparent !important; }
#nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu { background-color: #D35400; color:#007bff; }
@media screen and (min-width: 650px) {
#nav > ul > li: not(: last-child) {
border-right: 1px solid #D35400;
border-bottom: none;
}
}
@media screen and (max-width: 650px) {
#nav > ul > li: not(: last-child) { border-right: none; }
#nav > ul > li:not(:last-child):not(:first-child) { border-bottom: 1px solid #D35400; }
}
#nav > ul > li:not(#toggleMenu):not(.js-showElement) { }
@media screen and (min-width: 650px) {
#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: inline-block; }
}
@media screen and (max-width: 650px) {
#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: none; }
}
@media screen and (min-width: 650px) {
#nav #toggleMenu { display: none; }
}
@media screen and (max-width: 650px) {
#nav #toggleMenu {
display: block;
width: 100%;
}
#nav #toggleMenu.js-open { border-bottom: 1px solid #D35400; }
#nav #toggleMenu.js-open .fa-times { display: block; }
#nav #toggleMenu.js-open .fa-bars { display: none; }
#nav #toggleMenu.js-open a { background-color: #D35400; }
#nav #toggleMenu:not(.js-open) .fa-times { display: none; }
#nav #toggleMenu:not(.js-open) .fa-bars { display: block; }
}
span#toggleMenu-text {
position: absolute;
opacity: 0;
}
#nav > ul > li > ul { background-color: #D35400; }
@media screen and (min-width: 650px) {
#nav > ul > li > ul {
top: 60px;
left: 0;
}
}
@media screen and (max-width: 650px) {
#nav > ul > li > ul {
width: 100%;
position: relative;
}
#nav > ul > li > ul:not(.js-showElement) { display: none; }
}
#nav > ul > li > ul > li > a { background-color: #F5F5F5;
border: 1px solid #ECECEC; }
#nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus { color:#007bff; }
#nav > ul > li > ul > li:not(:last-child) a { }
@media screen and (min-width: 650px) {
#nav > ul > li > ul > li > ul {
top: 0;
left: 200px;
}
}
@media screen and (max-width: 650px) {
#nav > ul > li > ul > li > ul {
width: 100%;
position: relative;
}
#nav > ul > li > ul > li > ul:not(.js-showElement) { display: none; }
}
#nav > ul > li > ul > li > ul > li > a { background-color: #E67E22; }
#nav > ul > li > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > ul > li > a:focus { background-color: #D35400; }
#nav > ul > li > ul > li > ul > li:not(:last-child) > a { border-bottom: 1px solid #D35400; }
#nav .js-hideElement { display: none; }
#nav .js-showElement { display: block; }
html.no-js li:hover > a + ul, html.no-js li:focus > a + ul { display: block; }
@media screen and (max-width: 650px) {
html.no-js #nav: hover > ul > li: not(#toggleMenu), html.no-js #nav: focus > ul > li: not(#toggleMenu) { display: block; }
html.no-js #nav:hover li:hover > a + ul, html.no-js #nav:hover li:focus > a + ul, html.no-js #nav:focus li:hover > a + ul, html.no-js #nav:focus li:focus > a + ul { display: block; }
}
</style>
</head>
<body>
<nav id="nav">
<ul>
<!-- Menu tooggle on smaller screens -->
<li id="toggleMenu"> <a href="/sitemap.html"> <i class="fa fa-bars"></i> <i class="fa fa-times"></i>
<span id="toggleMenu-text"></span> </a> </li>
<li> <a href="#">We</a>
<ul>
<li><a href="#">Who we are</a></li>
</ul>
</li>
<li> <a href="#">Connect</a>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li> <a href="#">Services</a>
<ul>
<li><a href="#">Stall Design</a></li>
<li><a href="#">Stall Exibition</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="">Client</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</li>
</ul>
</nav>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
// Remove no-js class
$('html').removeClass('no-js');
$('#toggleMenu').on('click', function() {
if ($(this).hasClass('js-open')) {
$('#nav > ul > li:not(#toggleMenu)').removeClass('js-showElement');
$(this).removeClass('js-open');
} else {
$('#nav > ul > li:not(#toggleMenu)').addClass('js-showElement');
$(this).addClass('js-open');
}
return false;
})
// Add plus mark to li that have a sub menu
// sub menu
// ------------------------
// When interacting with a li that has a sub menu
$('li:has("ul")').on('mouseover keyup click mouseleave', function(e) {
// If either -
// tabbing into the li that has a sub menu
// hovering over the li that has a sub menu
if (e.keyCode === 9 | e.type === 'mouseover') {
// Show sub menu
$(this).children('ul').removeClass('js-hideElement');
$(this).children('ul').addClass('js-showElement');
}
// If mouse leaves li that has sub menu
if (e.type === 'mouseleave') {
// hide sub menu
$(this).children('ul').removeClass('js-showElement');
$(this).children('ul').addClass('js-hideElement');
}
// If clicking on li that has a sub menu
if (e.type === 'click') {
// If sub menu is already open
if ($(this).children('a').hasClass('js-openSubMenu')) {
// remove Open class
$(this).children('a').removeClass('js-openSubMenu');
// Hide sub menu
$(this).children('ul').removeClass('js-showElement');
$(this).children('ul').addClass('js-hideElement');
// If sub menu is closed
} else {
// add Open class
$(this).children('a').addClass('js-openSubMenu');
// Show sub menu
$(this).children('ul').removeClass('js-hideElement');
$(this).children('ul').addClass('js-showElement');
}
return false;
} // end click event
});
// Tabbing through Levels of sub menu
// ------------------------
// If key is pressed while on the last link in a sub menu
$('li > ul > li:last-child > a').on('keydown', function(e) {
// If tabbing out of the last link in a sub menu AND not tabbing into another sub menu
if ((e.keyCode == 9) && $(this).parent('li').children('ul').length == 0) {
// Close this sub menu
$(this).parent('li').parent('ul').removeClass('js-showElement');
$(this).parent('li').parent('ul').addClass('js-hideElement');
// If tabbing out of a third level sub menu and there are no other links in the parent (level 2) sub menu
if ($(this).parent('li').parent('ul').parent('li').parent('ul').parent('li').children('ul').length > 0 && $(this).parent('li').parent('ul').parent('li').is(':last-child')) {
// Close the parent sub menu (level 2) as well
$(this).parent('li').parent('ul').parent('li').parent('ul').removeClass('js-showElement');
$(this).parent('li').parent('ul').parent('li').parent('ul').addClass('js-hideElement');
}
}
})
})
</script>
</body>
</html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi Level Dropdown menu using css and javascript</title>
<style>
html { font-family: 'roboto', sans-serif; }
.container {
width: 90%;
margin: 10vh auto;
}
a { color: inherit; }
#nav, #nav ul, #nav li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
box-sizing: border-box;
}
#nav {
position: relative;
min-height: 60px;
max-width: 100%;
background-color: transparent !important;
color: #000;
}
@media screen and (min-width: 650px) {
#nav { display: inline-block; }
}
@media screen and (max-width: 650px) {
#nav { display: block; }
}
#nav li { position: relative; }
#nav a {
text-decoration: none;
height: 100%;
display: block;
padding: 0 50px;
}
@media screen and (min-width: 650px) {
#nav a:focus { outline: none; }
}
.plusMark {
margin-left: 10px;
font-size: 20px;
font-weight: 700;
}
@media screen and (min-width: 650px) {
#nav li {
text-align: left;
width: 200px;
}
}
@media screen and (max-width: 650px) {
#nav li {
text-align: center;
width: 100%;
}
}
@media screen and (min-width: 650px) {
a + ul { position: absolute; }
a + ul:not(.js-showElement) { display: none; }
}
@media screen and (max-width: 650px) {
a + ul { position: relative; }
a + ul:not(.js-hideElement) { display: block; }
}
#nav > ul, .fa {
height: 100%;
line-height: 60px;
}
#nav > ul > li {
position: relative;
text-align: center;
line-height: 60px;
}
@media screen and (min-width: 650px) {
#nav > ul > li {
float: left;
width: auto;
}
}
@media screen and (max-width: 650px) {
#nav > ul > li {
float: none;
display: block;
width: 100%;
}
}
#nav > ul > li > a { background-color: transparent !important; }
#nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu { background-color: #D35400; color:#007bff; }
@media screen and (min-width: 650px) {
#nav > ul > li: not(: last-child) {
border-right: 1px solid #D35400;
border-bottom: none;
}
}
@media screen and (max-width: 650px) {
#nav > ul > li: not(: last-child) { border-right: none; }
#nav > ul > li:not(:last-child):not(:first-child) { border-bottom: 1px solid #D35400; }
}
#nav > ul > li:not(#toggleMenu):not(.js-showElement) { }
@media screen and (min-width: 650px) {
#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: inline-block; }
}
@media screen and (max-width: 650px) {
#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: none; }
}
@media screen and (min-width: 650px) {
#nav #toggleMenu { display: none; }
}
@media screen and (max-width: 650px) {
#nav #toggleMenu {
display: block;
width: 100%;
}
#nav #toggleMenu.js-open { border-bottom: 1px solid #D35400; }
#nav #toggleMenu.js-open .fa-times { display: block; }
#nav #toggleMenu.js-open .fa-bars { display: none; }
#nav #toggleMenu.js-open a { background-color: #D35400; }
#nav #toggleMenu:not(.js-open) .fa-times { display: none; }
#nav #toggleMenu:not(.js-open) .fa-bars { display: block; }
}
span#toggleMenu-text {
position: absolute;
opacity: 0;
}
#nav > ul > li > ul { background-color: #D35400; }
@media screen and (min-width: 650px) {
#nav > ul > li > ul {
top: 60px;
left: 0;
}
}
@media screen and (max-width: 650px) {
#nav > ul > li > ul {
width: 100%;
position: relative;
}
#nav > ul > li > ul:not(.js-showElement) { display: none; }
}
#nav > ul > li > ul > li > a { background-color: #F5F5F5;
border: 1px solid #ECECEC; }
#nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus { color:#007bff; }
#nav > ul > li > ul > li:not(:last-child) a { }
@media screen and (min-width: 650px) {
#nav > ul > li > ul > li > ul {
top: 0;
left: 200px;
}
}
@media screen and (max-width: 650px) {
#nav > ul > li > ul > li > ul {
width: 100%;
position: relative;
}
#nav > ul > li > ul > li > ul:not(.js-showElement) { display: none; }
}
#nav > ul > li > ul > li > ul > li > a { background-color: #E67E22; }
#nav > ul > li > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > ul > li > a:focus { background-color: #D35400; }
#nav > ul > li > ul > li > ul > li:not(:last-child) > a { border-bottom: 1px solid #D35400; }
#nav .js-hideElement { display: none; }
#nav .js-showElement { display: block; }
html.no-js li:hover > a + ul, html.no-js li:focus > a + ul { display: block; }
@media screen and (max-width: 650px) {
html.no-js #nav: hover > ul > li: not(#toggleMenu), html.no-js #nav: focus > ul > li: not(#toggleMenu) { display: block; }
html.no-js #nav:hover li:hover > a + ul, html.no-js #nav:hover li:focus > a + ul, html.no-js #nav:focus li:hover > a + ul, html.no-js #nav:focus li:focus > a + ul { display: block; }
}
</style>
</head>
<body>
<nav id="nav">
<ul>
<!-- Menu tooggle on smaller screens -->
<li id="toggleMenu"> <a href="/sitemap.html"> <i class="fa fa-bars"></i> <i class="fa fa-times"></i>
<span id="toggleMenu-text"></span> </a> </li>
<li> <a href="#">We</a>
<ul>
<li><a href="#">Who we are</a></li>
</ul>
</li>
<li> <a href="#">Connect</a>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li> <a href="#">Services</a>
<ul>
<li><a href="#">Stall Design</a></li>
<li><a href="#">Stall Exibition</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="">Client</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</li>
</ul>
</nav>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
// Remove no-js class
$('html').removeClass('no-js');
$('#toggleMenu').on('click', function() {
if ($(this).hasClass('js-open')) {
$('#nav > ul > li:not(#toggleMenu)').removeClass('js-showElement');
$(this).removeClass('js-open');
} else {
$('#nav > ul > li:not(#toggleMenu)').addClass('js-showElement');
$(this).addClass('js-open');
}
return false;
})
// Add plus mark to li that have a sub menu
// sub menu
// ------------------------
// When interacting with a li that has a sub menu
$('li:has("ul")').on('mouseover keyup click mouseleave', function(e) {
// If either -
// tabbing into the li that has a sub menu
// hovering over the li that has a sub menu
if (e.keyCode === 9 | e.type === 'mouseover') {
// Show sub menu
$(this).children('ul').removeClass('js-hideElement');
$(this).children('ul').addClass('js-showElement');
}
// If mouse leaves li that has sub menu
if (e.type === 'mouseleave') {
// hide sub menu
$(this).children('ul').removeClass('js-showElement');
$(this).children('ul').addClass('js-hideElement');
}
// If clicking on li that has a sub menu
if (e.type === 'click') {
// If sub menu is already open
if ($(this).children('a').hasClass('js-openSubMenu')) {
// remove Open class
$(this).children('a').removeClass('js-openSubMenu');
// Hide sub menu
$(this).children('ul').removeClass('js-showElement');
$(this).children('ul').addClass('js-hideElement');
// If sub menu is closed
} else {
// add Open class
$(this).children('a').addClass('js-openSubMenu');
// Show sub menu
$(this).children('ul').removeClass('js-hideElement');
$(this).children('ul').addClass('js-showElement');
}
return false;
} // end click event
});
// Tabbing through Levels of sub menu
// ------------------------
// If key is pressed while on the last link in a sub menu
$('li > ul > li:last-child > a').on('keydown', function(e) {
// If tabbing out of the last link in a sub menu AND not tabbing into another sub menu
if ((e.keyCode == 9) && $(this).parent('li').children('ul').length == 0) {
// Close this sub menu
$(this).parent('li').parent('ul').removeClass('js-showElement');
$(this).parent('li').parent('ul').addClass('js-hideElement');
// If tabbing out of a third level sub menu and there are no other links in the parent (level 2) sub menu
if ($(this).parent('li').parent('ul').parent('li').parent('ul').parent('li').children('ul').length > 0 && $(this).parent('li').parent('ul').parent('li').is(':last-child')) {
// Close the parent sub menu (level 2) as well
$(this).parent('li').parent('ul').parent('li').parent('ul').removeClass('js-showElement');
$(this).parent('li').parent('ul').parent('li').parent('ul').addClass('js-hideElement');
}
}
})
})
</script>
</body>
</html>
0 Comments