Multi Level Dropdown Menu using Css and Javascript | Sanwebcorner

Multi Level Dropdown Menu using Css and Javascript

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>

Here i provided the full code and the demo page. Please check the demo button below to check the menu live. And also you can download full code by clicking the download button below. I hope this code is very useful.

 

Post a Comment

Labels

360 degree view product image 3d rotate 3d text 3step-form Accordion menu ajax All Browsers Animated Background Gradient animation audio controller auto complete Best accordion menu bootstrap border bounce effect on hover Breadcrumb calculate age by dob calendar Captcha change image on mouse move color chooser countdown Counter on scroll create random number Css css animation css buttons css hover css3 customized upload Button Date picker delete data from table Different scroll speed email otp verification email verifier Embed eventlist Expanding Menu feedbck form flash news section close button full screen menu Google custom search Google Maps Google reCAPTCHA Google site search gradient hide menu Horizontal News ticker Hover Htm Html html dropdown html form html5 html5 form validation Iframe image hover increment decrement textbox value based on select box Javascript Jquery js Layered image effect on mouse hover lock & unlock page scroll marquee marquee with close button mobile number validation mobile otp login Multi-level-drop-down-menu multi-level-form Multi-Step-form mysql News ticker on hover change text to image our team page password generator password strength checker Photoshop PHP populate html selectbox Popup image on click the link pure css Question type form random number generate Random password Redirect page Based on the select box while submit the form responsive responsive menu responsive popup box Responsive Vertical Time line design rotate image selectbox based on select box simple coming soon page simple countdown based on end date simple typing effect slider sliding tab sms otp login statistic counter on scroll switch tag shape team member Time picker toggle toggle view transparent button underline animation up down slide validation vertical fixed sidebar Webtips Youtube