How To Create Multi Level Responsive Dropdown Navigation Menu

Mostly we discuss regarding responsive web design in our blogger related tutorials. Do you wish to make your own responsive menu for your website, but don't know how ? during this tutorial we'll show you 4 awesome responsive menus that will be very useful to build your own website navigation.  For straightforward navigation, the solutions is straight-forward, However, if you’re performing on something a bit more complex, perhaps with multiple lists and dropdowns, a additional dramatic arranging is also so as. during this approach to responsive navigation, we’re reaching to use associate approach that may accommodate large, multi-level navigation menus using media queries, while making an attempt to stay with our easy markup and our external resources minimal, In this article you will see how you can build an amazing CSS3 animated responsive dropdown menu.

 

Live Preview       Download Source

 

 

Creating Responsive Nested Navigation Menu

Firstly, simple markup of multi-leveled unordered lists with a little bit of HTML5 flavor. My example consists of three levels. Three is not the limit, you may have infinite levels on your next super project.

 

Step 1. Creating HTML Structure

<div class="nav-container">
              <div>
              <label class="responsive_menu" for="responsive_menu">
              <span>Menu</span>
              </label>
              <input id="responsive_menu" type="checkbox">
              <ul class="menu">
              <li><a href="#">Home</a></li>
              <li class="dropdown"><a href="#">Categoriesˇ</a>
                <ul>
                  <li><a href="#">SEO</a></li>
                  <li><a href="#">Webmaster Tools</a></li>
                  <li><a href="#">Google News</a></li>
                  <li class="dropdown"><a href="#">Web Design ›</a>    
                    <ul>
                      <li><a href="#">Social Plugin</a></li>
                      <li><a href="#">Plugins</a></li>
                      <li class="dropdown"><a href="#">Templates ›</a>
                        <ul>
                          <li><a href="#">Blogger</a></li>
                          <li><a href="#">WordPress</a></li>
                          <li><a href="#">Jomla</a></li>
                          <li><a href="#">Website Template</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                 
                </ul>
              </li>
              <li class="dropdown">
              <a href="#">Tutorialsˇ</a>
              <div class="columndrop">
                <div class="col">
                  <h3>± SEO</h3>
                  <ul>
                    <li><a href="#">Basic</a></li>
                    <li><a href="#">Off Page</a></li>
                    <li><a href="#">On Page</a></li>
                    <li><a href="#">Blogger SEO</a></li>
                  </ul>
                </div>
                <div class="col">
                  <h3>± Navigation</h3>
                  <ul>
                    <li><a href="#">Website Menu</a></li>
                    <li><a href="#">Blogger Menu</a></li>
                    <li><a href="#">Wordpress Menu</a></li>
                    <li><a href="#">All in One</a></li>
                  </ul>
                </div>
                <div class="col">
                  <h3>± Plugins</h3>
                  <ul>
                    <li><a href="#">Social</a></li>
                    <li><a href="#">Blogger</a></li>
                    <li><a href="#">Wordpress</a></li>
                    <li><a href="#">Website</a></li>
                  </ul>
                </div>
              </div>
              </li>
              <li class="dropdown"><a href="#">Resourcesˇ</a>
              <div class="megadrop">
                <div class="col">
                  <h3>Graphic</h3>
                  <ul>
                    <li><a href="#">Illustrator</a></li>
                    <li><a href="#">CorelDraw Styles</a></li>
                    <li><a href="#">Adobe Plugin</a></li>
                   
                  </ul>
                </div>
                <div class="col">
                  <h3>Vector Graphic</h3>
                  <ul>
                    <li><a href="#">Vectors</a></li>
                    <li><a href="#">Icons</a></li>
                    <li><a href="#">UI Kit</a></li>
                   
                  </ul>
                </div>
                <div class="col">
                  <h3>Template</h3>
                  <ul>
                    <li><a href="#">HTML Templates</a></li>
                    <li><a href="#">Wordpress Themes</a></li>
                    <li><a href="#">Blogger Templates</a></li>
                   
                  </ul>
                </div>
                <div class="col">
                  <h3>Social Media</h3>
                  <ul>
                    <li><a href="#">Social Plugin</a></li>
                    <li><a href="#">Social Icons</a></li>
                    <li><a href="#">Social Vector Icons</a></li>
                   
                  </ul>
                </div>
               </div>
              </li>
              <li><a href="#">Faqs</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact Us</a></li>
              </li>
          </ul>
        </div>
      </div>

 

Now let's just give a sense to the HTML above with the CSS below.

 

Step 2. Let’s add some very basic styling to get our list looking like a navigation bar:

 

.menu-container {
    width:100%;
    margin: 0 auto;
    padding: 20px 0;
}

.menu {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    position: relative;
    padding: 0 0 0 4px;
    margin: 0;
    background-color: #005b68;
}

/* Reset Links */
.menu a, .menu a:link, .menu a:visited, .menu a:focus, span {
    color: #fff;
    text-decoration: none;
}

.menu a:hover {
color: #c4c4c4;
text-decoration: none;
}

/* Main element */
.menu > li {
    display: inline-block;
    text-align: center;
    margin-left: -4px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
   
    }

/* Link Style */
.menu > li > a {
    padding:20px 18px;
    display: block;
}

.menu > li:hover > a{
    color: #005b68;
}

.menu > li:hover {
    background-color: #fff;
}
.menu > li:first-child {
border-left: none;
box-shadow: none;
}

 

Step 3. Next, let’s get the horizontal dropdown menus happening. While this could be done with pure CSS using the:hover .

 

/* Simple multilevel dropdown */
.menu > li > ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    list-style: none;
    top:55px;
    background-color: #005b68;
    width: 200px;
    text-align: left;
    margin-top:30px;
    padding: 0px;
    z-index: 99;
}

/* First level appear */
.menu > li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin-top: 0px;
}

/* Style for dropdown links */
.menu li > ul li {
    font-size: 13px;
    position: relative;
    display: block;
    padding: 15px 10px;
   
}

.menu > li > ul  li:hover {
    background-color: #fff;

}

.menu ul  li:hover > a {
    color: #005b68;
}

/* Second and third dropdown level */
.menu > li > ul li ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    list-style: none;
    top:0px;
    left: 200px;
    background-color: #005b68;
    width: 200px;
    text-align: left;
    padding: 0px;
    margin-left: 30px;
}

.menu > li > ul li ul li:hover {
    background-color: #fff;
}
input#responsive_menu { display: none; }

.menu > li > ul li ul li ul {
    background-color: #005b68;
}

.menu > li > ul li ul li ul li:hover {
    background-color: #fff;
}

/* Second and third level appears */
.menu > li ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin-left: 0px;
}

 

We’ve just floated our list items into a horizontal line, set some colors up and hidden the submenus off the screen using absolute positioning….!!!

 

Step 4. Here is we are going to stylize our column dropdown and mega dropdown list.

 

/* columndrop dropdown */
.menu .columndrop {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    list-style: none;
    top:55px;
    background-color: #005b68;
    min-height: 100px;
    text-align: left;
    margin-top:30px;
    padding: 0;
    padding: 0 10px;
    z-index: 99;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.menu > li:hover .columndrop {
    opacity: 1;
    visibility: visible;
    margin-top: 0px;
    color: #fff;
}

.menu .columndrop .col {width: 130px;margin:0 9px;}

/*.coldrop full width dropdown */
.menu .col {
    width: 14.1%;
    float: left;
    color:white;
    margin: 0 0 0 2.2%;
}

.menu .col ul {
    padding: 0;
    margin: 0;
}

.menu .col ul li {
    padding: 0;
    list-style: none;
    font-size: 11px;
}

.menu .col h3 {
    font-size: 16px;
    padding: 14px 0;
    font-weight: 400;
    margin: 5px 0 5px 0;
}

.menu .col ul li a {
    display: block;
    padding: 0 0 15px 0;
}
.menu .col ul li a:hover {
    color: #111;
    text-decoration: underline;
}

/*Animation Effect for Dropdown  */
.menu > li > ul li ul, .menu li >ul li, .menu > li > .megadrop, .menu > li > .columndrop, .menu > li > ul, .menu > li {
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out; /* Firefox 4 */
    -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
      -ms-transition: all 0.2s ease-in-out; /* IE 11 */
    -o-transition: all 0.2s ease-in-outs; /* Opera */
}

 

Step 5. Our lovely horizontal dropdown menu unfortunately looks quite tiny on mobile screens, so let’s make sure mobile browsers will be fully zoomed-in when they load our page by adding the viewport meta tag.

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Of course, now our dropdown menu looks even worse on mobile devices, and most of it doesn’t even fit on the screen! Let’s add in some media queries to style our list into a vertical list below our breakpoint. Our breakpoint is determined by the point at which our menu breaks onto two lines.

 

Step 6. At our breakpoint, we’ll remove the floats and set the list items and unordered lists to width: 100%. Right now, when we hover over our parent items, their child lists are displayed over top of the items beneath it.

 

/* Responsive container Setting */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .menu-container {
        width:768px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .menu-container {
        width: 420px;
    }
}

@media only screen and (max-width: 479px) {
    .menu-container {
        width: 300px;
    }
}

label.responsive_menu span {
    margin-left: 10px;
    color: white;
    display: none;
}

@media only screen and (max-width: 959px) {

/* New direction for third dropdown level */
.menu > li > ul li ul li ul {
    left: -200px;
    z-index: 3;
}

.menu > li > a{
    padding: 20px 12px;
    font-size: 12px;
}

.menu .columndrop .col {width: 120px;margin:0 5px;}

}

@media only screen and (max-width: 767px) {

    .menu {
      display: none;
    }

    label.responsive_menu span {
        display: inline;
        font-size: 20px;
        font-variant: small-caps;
        font-weight:400;
    }

    label.responsive_menu {
      position: relative;
      display: block;
      width: 100%;
      background-color: #005b68;
      padding: 15px 0;
     
    }

    .menu {
        padding: 0;
    }

    .menu li {
        width: 100%;
        display:block;
        text-align: left;
        margin-left: 0;
    }

    .menu > li {
        border-right: none;
        padding: 18px 0px;
        position: relative;
    }

    .menu > li > a {
        display: inline;
    }

    .menu li ul, .menu li .megadrop, .menu li .columndrop {
        top:45px;
    }

    .menu li ul {
        padding: 0;
    }

    .menu .megadrop, .menu .columndrop {
        width: 100%;
        padding: 0 2.5%;
    }

    .menu li > ul li {
        padding: 18px 0px;
    }

    .menu .col, .menu .columndrop .col {
        width: 94%;
        padding: 0 3%;
    }

    .menu > li > ul {
        width: 100%;
    }

    .menu > li > ul li ul {
        width: 100%;
        top:43px;
        left: 0;
        margin-top: 30px;
        z-index: 2;
    }

    .menu > li > ul > li:hover ul {
        margin-top: 0;
    }
   
        #responsive_menu:checked+.menu {
        display: block;
    }

    label:after {
        position: absolute;
        top:9px;
        right: 10px;
        content: "\2263";
        font-size: 35px;
        color: #FFF;
    }

    .menu > li > ul li ul li ul {
        width: 100%;

        top:43px;
        left: 0px;
        margin-left: 0;
        margin-top: 30px;
    }

    .menu > li > ul > li ul li:hover ul{
        margin-top: 0;
    }

    .menu > li > ul li{
        padding: 15px 0 15px 6%;
        width: 94%;
    }

    .menu > li > ul li ul li{
        padding: 15px 0 15px 9%;
        width: 91%;
    }

    .menu > li > ul li ul li ul li{
        padding: 15px 0 15px 12%;
        width: 88%;
    }
   
    .menu ul li.dropdown:after {
        left: 90%;
    }  

    /* Disable animation for dropdown */
    .menu > li > ul li ul, .menu li >ul li, .menu > li > .megadrop, .menu > li > .columndrop, .menu > li > ul, .menu > li {
        transition: none;
        -moz-transition: none;
        -webkit-transition: none;
         -ms-transition: none;
        -o-transition: none;
    }

}

 

Though this technique may be well-suited to certain situations and menu structures, there are still a lot of other options out there for taming navigation on mobile devices. In our next Tutorial we are going to tell you how add it to blogger. stay tuned for our next tutorial.