Latest: Tutorials

Monday, 24 February 2014

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  
<script src=""></script>
adding Jquery JavaScript Plugin

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.
Adding HTMLJavaScript Widget

<style type="text/css"> @import url(,600,300);
@charset 'UTF-8';
/* Base Styles */
#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 > {
  border-bottom: none;
#cssmenu > ul > > 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 > > a span {
  border: 1px solid #97be10;
#cssmenu > ul > li.has-sub > a span {
  background: url( 98% center no-repeat;
#cssmenu > ul > > a span {
  background: url(
) 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;
<div id='cssmenu'>
   <li><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
         <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>
   <li class='has-sub'><a href='#'><span>Company</span></a>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>
<script type='text/javascript'>//<![CDATA[
$( document ).ready(function() {
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  var checkElement = $(this).next();
  if(('ul')) && (':visible'))) {
  if(('ul')) && (!':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
Save the gadget and you are done! 
  • 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


0 comments: Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

Post a Comment

Blogger Widgets

Contact Form


Email *

Message *

Jquery Dropdown Menu

Author's Bio

Founder & Author: Oyejobi Adeola is a blog designer, web developer and a loving person currently working on several web projects, he is managing several blogs from his living.He loves to help and teaches different people on how they can make it big online without age barrier.Do you really love his blog? If yes, then
Read More About Him


Related Posts Plugin for WordPress, Blogger...
Copyright © 2013 Noblenaijablog All Right Reserved
Designed by oyejobiA | Powered by Blogger