Blog for web designers

Third level navigation with responsive

Third level navigation with responsive

In this tutorial I am going to show you how to create a third level navigation with responsive that supports up to cross devices. With an increased mobility now a days it is very important to make your website compatible across all devices. The most but atleast one of the difficult phase while making a website responsive is navigation. It requires an extra time and attention to make it happen. The get start how to build third level navigation with responsive that supports across all browers.

File structure of third level navigation with responsive


project-folder
    css
       style.css
       bootstrap.css
    js
      bootstrap.js
      custom.js
      jquery.js

    index.html

How to build third level nagigation with responsive

Create a file name index.html inside any new folder or where ever you want to use it. Copy the below code into your index.html


<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigation Third level with responsive</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel='stylesheet' type='text/css'>
<link href="css/style.css" rel='stylesheet' type='text/css'>
</head>
<body>
<div class="menus_item">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<div class="menu-wcmenu-container">
<ul id="menu-wcmenu" class="nav-menu">
<li class="menu-item menu-item-has-children">
<a href="#"> Home</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item">
<a href="#"> Testi Home</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
</ul>
</li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">About</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#"> Testimonial</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item menu-item-has-children">
<a href="#"> Testi sub</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
</ul>
</li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
</ul>
</li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
<li class="menu-item"><a href="#"> Lorem ipsum</a></li>
</ul>
</div> <!-- /.menu-wcmenu-container -->
</div><!--/.nav-collapse -->
</div><!-- /.main-menu -->
</div><!-- /.col-md-12 -->
</div><!-- /.row -->
</div> <!-- /.container -->
</div><!-- /.menus_item -->

<script src="js/input/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>

</body>
</html>

Note: For demo purpose I have added all the required doctype and script line along with the head.

Now for css create a new file called style.css inside the css folder


.main-menu ul {
text-align:center;
float:right;
margin:0;
padding:0;
}

.main-menu li {
list-style:none;
float:left;
border-left:1px solid #efefef;
}

.main-menu a {
font-family:'Open Sans', sans-serif;
font-size:14px;
color:#fff;
text-transform:uppercase;
line-height:50px;
display:block;
-webkit-transition:all ease .3s;
-o-transition:all ease .3s;
transition:all ease .3s;
padding:0 15px;
}

.main-menu a:hover {
text-decoration:none;
color:#FFF;
background:#057893;
}

.main-menu li:last-child {
border-right:1px solid #efefef;
}

.nav-menu>li {
position:relative;
}

.nav-menu>li:hover a {
background:#057893;
}

.nav-menu>li:hover .sub-menu {
display:block;
width:300px;
}

.nav-menu>li:hover .sub-menu li {
display:block;
width:100%;
border:0;
border-bottom:1px solid #ddd;
}

.nav-menu>li:hover .sub-menu li:hover a {
background:#055B6F;
}

.nav-menu>li:hover .sub-menu li .sub-menu a {
line-height:32px;
}

.nav-menu>li:hover .sub-menu li a {
line-height:40px;
display:block;
width:100%;
text-align:left;
padding:0 5px;
}

.sub-menu {
position:absolute;
top:100%;
z-index:3;
background:#057893;
display:none;
}

#main-header {
padding-top:15px;
}

.menus_item {
border-top:1px solid #EEE9D6;
margin-top:15px;
background:#0795B6;
border-bottom:5px solid #efefef;
}

.main-menu {
width:100%;
float:left;
}

.navbar-toggle .icon-bar {
background:#fff;
}

.navbar-toggle {
border:1px solid #fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

.navbar-toggle.collapsed {
border-color:transparent;
}

.main-menu a.parent {
padding-right:28px;
position:relative;
}

.main-menu a.parent:after {
content:"";
width:0;
height:0;
position:absolute;
top:23px;
right:10px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #fff;
}

@media screen and min-width 1000px{
.nav-menu>li:hover .sub-menu .sub-menu {
display:none;
}

.main-menu .sub-menu a.parent:after {
top:15px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-left:5px solid #fff;
}

.menu-item-has-children>ul.sub-menu li.menu-item-has-children {
position:relative;
}

.menu-item-has-children>ul.sub-menu li.menu-item-has-children .sub-menu {
position:absolute;
left:300px;
top:0;
display:none;
}

.menu-item-has-children>ul.sub-menu li.menu-item-has-children:hover .sub-menu {
display:block;
}

.menu-item-has-children>ul.sub-menu li.menu-item-has-children:hover li a:hover {
background:#064959;
}

.menu-item-has-children>ul.sub-menu li.menu-item-has-children .sub-menu a,.menu-item-has-children>ul.sub-menu li.menu-item-has-children:hover li a {
font-size:12px;
}
}

@media screen and max-width 767px{
.nav-menu>li:hover .sub-menu li .sub-menu a {
line-height:40px;
}

.widget ul.menu li {
width:100%!important;
}

.nav-menu>li {
width:100%;
border-left:0;
margin:0;
}

.nav-menu>li .sub-menu {
position:static;
display:block;
width:100%;
float:left;
margin:0;
}

.nav-menu>li .sub-menu li {
float:left;
width:100%;
display:block;
border:0;
border-bottom:1px solid #ddd;
margin:0;
}

.nav-menu>li .sub-menu li a {
line-height:40px;
display:block;
width:100%;
text-align:left;
padding:0 5px;
}

.main-menu a {
text-align:left;
border-left:0;
}

.nav-menu>li:hover .sub-menu {
display:block;
width:100%;
}

.sub-menu {
height:0;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
-webkit-transition:all .3s ease;
transition:all .3s ease;
overflow:hidden;
}

.hoverr .parent {
background:#076C84;
}

.hoverr>.sub-menu {
height:auto;
max-height:900px;
}

.hoverr li.hoverr .parent {
background:#055567;
}

.hoverr li.hoverr>.sub-menu {
height:auto;
max-height:900px;
background:#055567;
}

.parent:after {
padding-right:0;
}

.main-menu a.parent:after {
top:18px;
}

.nav-menu>li:last-child,.nav-menu>li .sub-menu li:last-child {
border-right:0;
}
}

Now JS. Lets create a new file called custom.js Paste the below code into custom.js



var ww = document.body.clientWidth;
$(document).ready(function() {
  $(".nav-menu li a").each(function() {
    if ($(this).next().length > 0) {
      $(this).addClass("parent");
    };
  })

  adjustMenu();
});



$(window).bind('resize orientationchange', function() {
  ww = document.body.clientWidth;
  adjustMenu();
});
var adjustMenu = function() {
  if (ww < 999) {

   // $(".responsive_menu_icon").css("display", "block");
  $(".navbar-toggle").click(function(e) {
    // e.preventDefault();
    $(".nav-menu li").removeClass('hoverr');
    
  });

$('a.parent').each(function(){
    var s = $(this).clone().wrap('

').parent().html(); $(this).siblings('.sub-menu').prepend(s); $(".sub-menu > a").wrap('

  • ').removeClass('parent'); $(".unique-mobile-class + .unique-mobile-class").remove(); // console.log(s); }); $(".nav-menu li").unbind('mouseenter mouseleave'); $(".nav-menu li a.parent").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(".unique-mobile-class + .unique-mobile-class").remove(); $(this).parent("li").toggleClass("hoverr"); }); } else { $(".nav-menu li").bind('mouseenter mouseleave'); $(".unique-mobile-class").remove(); } }

    Note: Javascript must be placed at the footer of the page.
    This demo is a modified version of bootstrap navigation and still required the common bootstrap files such as bootstrap.css and bootstrap.js along with jquery.js
    You can easily download the complete source code of third level navigation with responsive below.

    Downlaod
    Demo

    Santosh Shah

    My name is Santosh Shah and blogs at santosh-shah.com


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.