Flat drop down Responsive Navigation Menu - blogger widget

Looking for responsive navigation menu? Here is the flat style responsive drop down navigation menu for your template.

Now adding responsiveness in template is become necessary and we have to make our template responsive in design. The reason tocreate responsive template is to providing flexibility and easiness to the mobile users.

We also have to make our navigation menus responsive because, they are extremely useful in providing a friendly and clean environment to your visitors and every good blogger always care his readers and try to provide a easy and clear environment to his readers.

Therefore, if you also wish to get responsive navigation menu for your site then your are at right spot because in this post I have created a brand new flat responsive navigation menu for blogger.

You can freely use this widget on your blog.

Let's see how you can install this responsive menu on your blog: ;)

Recommended Topics:

1. Subcribe Box with Pure CSS Social Buttons
2. 14 Best Free css scrollbar style for blogger
3. Add Complication Box blogger widget to your blog New!
4. Best Tools and Resources required for blogger template designer

Add it on blogger

1. Goto blogger dashboard >> Template 
2. Back up your template
3. Edit HTML
4. At there search for the ]]></b:skin> tag and just above it paste the following code:

 /*--------Resposive menu by PakMax.net----------------*/
#nav-trigger {
    display: none;
    text-align: center;
}
#nav-trigger span {
    display: block;
    background-color: #5b97f9;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 25px;
    color: white;
    font-weight:bold;
    line-height: 67px;
}
nav#nav-mobile {
    margin: 0px;
}
#pmflatnav a {color:#ecf0f1;}
#pmflatnav ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#pmflatnav ul li {

  font: bold 12px/18px sans-serif;
    border-top:2px solid;
    border-right:1px dotted;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #5b97f9;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#pmflatnav ul li:hover {
  background: #34495e;
  color: #fff;
}
#pmflatnav ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#pmflatnav ul li ul li {
  background: #5b97f9;
  display: block;
  color: black;

}
#pmflatnav ul li ul li:hover { background: #34495e; }
#pmflatnav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
nav#nav-mobile {
    position: relative;
    display: none;
}
nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ddf0f9;
    z-index: 10;
    padding: 0px;
    border-bottom: solid 1px #cc0028;
}
nav#nav-mobile li:last-child {
border-bottom: none;
}
nav#nav-mobile a {
display: block;
color: #29a7e1;
padding: 10px 30px;
text-decoration: none;
border-bottom: 1px solid #00aeef;
}
nav#nav-mobile a:hover {
background-color: #e6002d;
color: #fff;
}
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
#nav-trigger {
    display: block;
}
nav#pmflatnav {
    display: none;
}
nav#nav-mobile {
    display: block;
}
}
/*--------Resposive menu by PakMax.net----------------*/

•  After this, now again search for the </head> tag and just above it paste the following code:

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $("#nav-mobile").html($("#pmflatnav").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
            $(this).removeClass("open");
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
        }
    });
});
//]]>
</script>

• Now come to the final step. Paste the following below code where you want menu to appear.

 <nav id='pmflatnav'>
<ul><li><a href="#">Home</a></li>
  <li><a href="#">Games</a></li>
  <li>
    <a href="#">Portfolio</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Animation</a></li>
      <li><a href="#">Photography</a></li>
    </ul>
  </li>
  <li><a href="#">Trending</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>
<div id='nav-trigger'>
    <span>Menu <i class='fa fa-list'/></i></span>
</div>
<nav id='nav-mobile'/></nav>

Note: Don't forget to change the names of the menu to what you want and also replace the # within link tag with your links.

Further customization

• To add more drop down menus just add the below code after any </li> tag

  <ul>      <li><a href="#">Web Design</a></li></ul>

• After adding the above line your code looks like this:

 <nav id='pmflatnav'>
<ul><li><a href="#">Home</a>
 <ul>      <li><a href="#">Web Design</a></li></ul></li>
  <li><a href="#">Games</a></li>
  <li>
    <a href="#">Portfolio</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Animation</a></li>
      <li><a href="#">Photography</a></li>
    </ul>
  </li>
  <li><a href="#">Trending</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>
<div id='nav-trigger'>
    <span>Menu <i class='fa fa-list'/></i></span>
</div>
<nav id='nav-mobile'/></nav>

The highlighted is the code which is added to make submenu of it. For more options repeat the process.

Credits

You are most welcome to share this responsive menu with your own readers on your blog BUT you have to give proper credits to PakMax blog by attaching link back to this post.
Recommended Posts: