A simple responsive jQuery menu for Blogger

There are already tons of other responsive menus for you available on jQuery plugins inventory. But I found many difficulties when I was trying to install them on my Blogger site. So I decided to create a super simple and easy to install jQuery responsive menu for Blogger and finally I was able to make one. Today I will share a small but a powerful jQuery menu that will help you to install a responsive menu in your Blogger Blog.

In-fact it’s my own creation, have a look at the DEMO by clicking on the following button:

DEMO

Just re-size your browser window and make it less than 320px(width). Or use MobileTest.me and enter the URL of the DEMO page to have a look of this super simple menu.

Well, to install it first create an ordinary HTML5 menu which should look like this:

[php]</pre>
<nav>
<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Portfolio</li>
<li>Gadgets</li>
<li>Snapshots
<ul>
<li>List #1</li>
<li>List #2</li>
<li>List #3</li>
<li>List #4</li>
</ul>
</li>
</ul>
</nav>
<pre>
<span class="menu">Menu<img src="https://articlesteller.com/wp-content/uploads/2015/08/nav-button2.jpg" alt="" width="20px" height="20px" /></span>
[/php]

Note: Do not forget to also add the <span> section in the code.

Now it’s time to add jQuery in your Javascript sheet:

[code lang=”js”]

$(document).ready(function(){
$(‘.menu’).click(function(){
$(‘nav’).slideToggle();
});
});

$(window).on(‘resize’, function(event){
var windowWidth = $(window).width();
if(windowWidth &gt; 1000) {
$(‘nav’).fadeIn();
}
});

[/code]

Now add few of CSS  styles for the menu in your stylesheet:

[php]

nav {
height: 40px;
background-color: #E0E0E0;
width: 100%;
float: left;
border-bottom: 1px solid #C8C8C8;
}

nav ul {
width: 100%;
list-style: none;
float: left;
}

nav ul li {
background-color: #E0E0E0;
font-family: ‘Source Sans Pro’, sans-serif;
padding-top: 9px;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
float: left;
padding-bottom: 10px;
}

nav ul li:hover {
color: black;
background-color: #C8C8C8;
}

nav li li {
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
display: block;
float: none;
position: relative;
background-color: #C0C0C0;
width: 115px;
z-index: 9999;
}

nav li ul {
padding-left: 0px;
background-color: gainsboro;
z-index: 9999;
width: 115px;
display: none;
position: absolute;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
animation-name: opacityC;
animation-duration: 0.5s;
}

nav li:hover &gt; ul {
display: block;
opacity: 1;
}

nav li li:hover {
color: black;
background-color: #E0E0E0;
}

[/php]

Now we should make this menu responsive, for this just below all of your existing CSS code paste these CSS styles:

[php]
@media only screen and (max-width: 720px) {
nav {
display: none;
float: none;
}

nav ul ul {
background-color: #565252;
width: 80%;
}

nav ul li, nav li li {
margin-top: 4px;
padding: 5px;
display: block;
float: none;
width: 92%;
text-align: center;
}

nav li li {
width: 100%;
}
}
[/php]

Conclusion

Hope everything will work fine. If you any further queries then please let us know by posting a small comment. Also first test this plugin and let us know if there are any bugs or problems that you have found in the menu.