DropDown Menu For Blogger/Blogspot

Drop Down Menu for blogger lets you to put more links in a small area with a very good look. to make a drop down menu for your blogger blog. there are three steps to install this widget to your blog

Example of Dropdown menu in Blogger

working Demo of dropdown in blogger

Click here to see full demo of Blogger Dropdown menu

How to Install it to your blog:

Add a gadget "HTML/javascript" to your design and drag it to the top of post body where pages lie. Now past the code in to the HTML/javascript and click on save.

<ul class="menu" id="menu">
<li><a href="#" class="menulink">Dropdown1</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">NoDropdown</a></li>
<li>
<a href="#" class="menulink">Dropdown2</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown3</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript"> 
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>

CSS part of Dropdown menu

this is the style part of the deopdown menu
Add this above this piece of code ]]></b:skin>

ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#BD8F06; text-decoration:none;}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(http://i1089.photobucket.com/albums/i355/talentedaamer/Blogger/header.gif); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(http://i1089.photobucket.com/albums/i355/talentedaamer/Blogger/header_over.gif)}
ul.menu .sub {background:#d1d1d1 url(http://i1089.photobucket.com/albums/i355/talentedaamer/Blogger/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

now clickonsave and see. thanks!!

Free Blogger Templates and Layouts

Search This Blog