Jquery And CSS Vertical Dropdown Menu For Blogger

Today i will be sharing you cute Jquery and CSS Vertical Dropdown Menu for blogger, without wasting much time..let us start the tutorial..his menu is very easy to use for your BlogSpot blog. I make this post with two simple steps for adding this menu to your blogger blog. First one is adding Jquery plugin inside your blogger templates <head></head> section and other one is adding main codes of menu to your blog sidebar section by using a html JavaScript widget.

Note: This tutorial is 100% working, so you have no option to do this at a very first time and start seeing awesome CSS drop down on your blog.

Step 1: Adding jquery plugin to your blogger blog template.

These are the simple steps to add Jquery plugim to your blogger blog, incase you have done this process before, no need of doing it again

Go to your blogger blog dashboard>> template Tab>> Edit Html
Search for <head> tag inside blogger html editor
And then Add below line of code Before </head> tag

Step 2: Adding Dropdown Menu Widget on your blogger blog.

Go to Blogger Dashboard >> Locate your Blog >> Layout
Select an HTML/JavaScript Widget.
Copy bellows code and Paste inside the widget.

<style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 300px;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 3px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu > ul > li {
margin: 0 0 2px 0;
}
#cssmenu > ul > li:last-child {
margin: 0;
}
#cssmenu > ul > li > a {
font-size: 15px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
border: 1px solid #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul > li > a > span {
display: block;
border: 1px solid #666666;
padding: 6px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
background: #97be10;
background: -moz-linear-gradient(#97be10 0%, #79980d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97be10), color-stop(100%, #79980d));
background: -webkit-linear-gradient(#97be10 0%, #79980d 100%);
background: linear-gradient(#97be10 0%, #79980d 100%);
color: #fff;
text-shadow: 0 1px 1px #000;
border: 1px solid #79980d;
}
#cssmenu > ul > li.active > a span {
border: 1px solid #97be10;
}
#cssmenu > ul > li.has-sub > a span {
background: url(https://lh5.googleusercontent.com/-21rx6aIUzic/UqSoMviGxWI/AAAAAAAACPw/_Qq7GteXckM/h120/icon_plus.png) 98% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
background: url(https://lh6.googleusercontent.com/-1qb7a6ft13M/UqSoMYncT1I/AAAAAAAACPs/ZFr7yxcDvv4/h120/icon_minus.png
) 98% center no-repeat;
}
/* Sub menu */
#cssmenu ul ul {
padding: 5px 12px;
display: none;
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
display: block;
color: #595959;
font-size: 13px;
font-weight: bold;
}
#cssmenu ul ul a:hover {
color: #79980d;
}
</style>
<div id='cssmenu'>
<ul>
   <li><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;"> </div>
<script type='text/javascript'>//<![CDATA[
$( document ).ready(function() {
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
    return true;
} else {
    return false;
}
});
});
//]]></script>

Save the gadget and you are done!

Customizations:

Replace all the blue highlighted # tag with you site links.
Replace all the teal highlighted text with your menus text that you wont to show.
If you need to change the plus icon of the menu then replace green highlighted link with your new icon link.
and if you need to change the minus icon of the menu then replace red highlighted link with your new icon link.
if you need to increase of decrees the menu width then replace the purple colored css code (width: 300px;).

If you have any query/ problem doing this, let me know using the comment box below

BLOGGING TIPS

Monday, 24 February 2014