Creating 3-Level Responsive Drop Down Navigation Menu with jQuery CSS3

mini demo
mini demo

A Beautiful 3-Level Responsive Drop Down Navigation Menu with jQuery CSS3 where sub-menu will either appear above or below the main menu with narrow symbol. With my previous tutorial, i also show how to create drop down responsive menu with CSS3 and jQuery as well.

screen-demoDemo download

This is a simple responsive dropdown menu that will show a submenu in 3 level with narrow symbol, we use narrow symbol with open fonts symbol that it is perfect fonts images when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available. Using the effect on menu will either react on hover or on click. Example media queries will show adjust responsive on screens size of computer or smartphone.

This Responsive Drop Down Navigation Menu using plugin such as:

The Markup Language

The HTML :

The CSS

.bold {
	font-weight:900;
}

/* --- header -- */
header{
	background: url(../img/header-pattern-150.png) repeat;
	margin:0;
	padding:0 0 20px;
	position:relative;
	z-index:2000;
}

/* --- menu --- */

header .navigation {
	float:right;
}

header ul.nav li {
	border:none;
	margin:0;
}

header ul.nav li a {	
	border:none;
	font-weight:400;
}
header ul.nav li ul {
	z-index:1000;
	margin-top:20px;
}
header ul.nav li ul li ul {
	margin:1px 0 0 1px;
}
header ul.nav li a i {	
	color:#fff;
}
.container,
.navbar-static-top .container{
  width: 940px;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}

.dropdown {
  position: relative;
}
.nav {
  margin-bottom: 20px;
  margin-left: 0;
  list-style: none;
}

.nav > li > a {
  display: block;
}

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}

.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
  cursor: pointer;
}

.navbar .nav a:hover {
	background:none;
}

.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
	font-weight:600;
}

.navbar .nav > .active > a:active,.navbar .nav > .active > a:focus {
	background:none;
	outline:0;
	font-weight:600;
}

.navbar .nav li .dropdown-menu {
	z-index:1000;
}
.navbar .nav {
  position: relative;
  left: 0;
  display: block;
  float: left;
  margin: 0 10px 0 0;
}
.navbar .nav > li {
  float: left;
}
.navbar .nav > li > a {
  float: none;
  padding: 10px 15px 10px;
  color: #777777;
  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: #333333;
  text-decoration: none;
  background-color: transparent;
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #555555;
  text-decoration: none;
  background-color: #e5e5e5;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

.navbar .nav > li > .dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.navbar .nav > li > .dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

.dropdown-menu {
  *border-right-width: 0;
  *border-bottom-width: 0;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;

}
.dropdown-menu .dropdown i {
	position:absolute;
	right:0;
	margin-top:3px;
	padding-left:20px;
}

.dropdown-submenu > .dropdown-menu {
  -webkit-border-radius: 0 0 0 0;
     -moz-border-radius: 0 0 0 0;
          border-radius: 0 0 0 0;
}

.navbar .nav {
  border-right:none;
  border-left:none;
}

.navbar .nav > li > a {
  float: none;
  font-size:13px;
  margin-left:10px;
  margin-right:0;
  text-decoration: none;
  text-shadow: none;
  border-right:none;
  border-left:none;
  color: #fff;
  border:2px solid transparent;
  padding:4px 10px 4px 10px;

  background-image: none;
   background: none;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
  color: #dddddd;
   background-color: none;
  background-image: none;
  background-repeat: repeat-x;
  filter: none; 
  text-decoration: none;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;	
  border:2px solid #302f2f;
  padding:4px 10px 4px 10px;
   background: #343434;
	-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
			border-radius: 6px;
   -moz-box-shadow:    inset 0 0 1px #555;
   -webkit-box-shadow: inset 0 0 1px #555;
   box-shadow:         inset 0 0 1px #555;		  
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #fff;
  border:2px solid #302f2f;
  padding:4px 10px 4px 10px;

  background-image: none;
   background: #343434;
  filter: none;  
  text-decoration: none;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
	-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
			border-radius: 6px;
   -moz-box-shadow:    inset 0 0 1px #555;
   -webkit-box-shadow: inset 0 0 1px #555;
   box-shadow:         inset 0 0 1px #555;
}

.navbar .nav  > a i[class^="icon-"]{
	color:#fdfdfd;
}
ul.nav li.dropdown a {
	z-index:1000;
	display:block;
}

ul.nav li.dropdown ul li ul.dropdown-menu {
	margin-left:0px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

ul.nav li.dropdown ul li i {
	margin-right:20px;
}

 select.selectmenu {
	display:none;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 180px;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
	background: #343434;
  border: none;
  border: none;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
border:2px solid #302f2f;
border-top:none;
  -webkit-background-clip: none;
     -moz-background-clip: none;
          background-clip: none;
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}
.dropdown-menu li {
	margin:0;
	padding:0;
}

.dropdown-menu li  a {
  color: #ddd;
  font-size:12px;
  padding:10px 15px 10px 15px;
  margin:0;
  text-shadow:none;
  border-bottom:1px solid #303030;
  text-decoration:none;
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a, 
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  color: #ffffff;
  text-decoration: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: none;
  filter:none;
}
.dropdown-menu .sub-menu-level1, .dropdown-menu .sub-menu-level2 {left:100%;position:absolute;top:0;visibility:hidden;margin-top: 0;}
.dropdown-menu li:hover .sub-menu-level1 {visibility:visible;}
.dropdown-menu li li:hover .sub-menu-level2 {visibility:visible;}

The CSS Responsive Style

@media (min-width: 1200px) {
  .container,
  .navbar-static-top .container{
    width: 1170px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {

  .container,
  .navbar-static-top .container{
    width: 724px;
  }
	nav ul li {
		display:none;
	}
    select.selectmenu  {    
      display: block;
	  width:100%;
	  margin-top:0;
	  color:#111;
	  margin-right:20px;
	  line-height:30px;
		font-size:13px;

    }

	select.selectmenu .bold {
		font-weight:bold;
	}

}
@media (max-width: 768px) {
  .navbar-static-top {
    margin-right: -20px;
    margin-left: -20px;
  }
  .container {
    width: auto;
  }
	nav ul li {
		display:none;
	}

	header .navigation {
		margin:0 auto;
		text-align:center;
		  width:90%;
		  float:none;
	}
    select.selectmenu  {    
      display: block;
	  width:100%;
	  float:left;
	  margin-bottom:20px;
	  color:#111;
	  margin-right:20px;
	  line-height:30px;
		font-size:13px;

    }

	select.selectmenu .bold {
		font-weight:bold;
	}

}
@media (max-width: 480px) {

	.headnav {
		text-align:center;
		float:none;
		margin:10px 0 0 0;
	}
}

The JavaScript Function

jQuery(document).ready(function($) {
"use strict";

		//add some elements with animate effect
		$(".box").hover(
			function () {
			$(this).find('span.badge').addClass("animated fadeInLeft");
			$(this).find('.ico').addClass("animated fadeIn");
			},
			function () {
			$(this).find('span.badge').removeClass("animated fadeInLeft");
			$(this).find('.ico').removeClass("animated fadeIn");
			}
		);

	(function() {

		var $menu = $('.navigation nav'),
			optionsList = '';

		$menu.find('li').each(function() {
			var $this   = $(this),
				$anchor = $this.children('a'),
				depth   = $this.parents('ul').length - 1,
				indent  = '';

			if( depth ) {
				while( depth > 0 ) {
					indent += ' - ';
					depth--;
				}

			}
			$(".nav li").parent().addClass("bold");

			optionsList += '';
		}).end()
		.after('');

		$('select.selectmenu').on('change', function() {
			window.location = $(this).val();
		});

	})();

		//Navi hover
		$('ul.nav li.dropdown').hover(function () {
			$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
		}, function () {
			$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
		});

});

Now! We have a 3-Level Responsive Drop Down Navigation Menu with jQuery CSS3. Check out the demo link, and feel free to download this example for future use. I hope you enjoyed this tutorial and find it useful!

Graham Bill's expertise in web design and his specialization in WordPress sites and blogs. With over a decade of experience, he likely possesses a deep understanding of the web design industry and the latest trends in WordPress development. Graham's blog, filled with helpful tips and tricks, is a valuable resource for those interested in improving their web design skills or optimizing their WordPress sites and blogs. Sharing his expertise through informative articles likely showcases his commitment to providing value to the web design community.