Blogger Widget : Multi-Drop Down Menu

1 comments
Save to del.icio.us 0 hits!



Today, we are providing you the widget that surely will make you feel good to see on your blog/site. This widget is Drop Down Menu bar. Many of us seen simple navigation menu's but this one is very unique and impressive. Try and see yourself.

Steps to follow :




1) First, Download the files below and upload them into your file hosting site (eg: googlepages)
to get the DIRECT LINKS to these files.

slidemenu_hori.css &
slidemenu_horiz.js


2) Now, log in into blogger and go to LAYOUT

3) Click on Edit HTML

4) Find </head> (Use Ctrl + F)

5) Before </head> Place the code below:



<link rel="stylesheet" type="text/css" href="http://sigmirror.com/............/slidemenu_hori.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://sigmirror.com/.............../slidemenu_horiz.js"></script>


NOTE: Replace the above links with yours.


6) Save the Template.

7) Again, go to LAYOUT Section & Click on ADD PAGE ELEMENT, where you want to add
this widget.

8) Place the code below:



<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>



9) Edit the above code as per your requirement and save the widget.



Credit: Bloggerstop




"If you still face any problem, do write your problem in comment box. I will try to solve it as soon as possible"

Related Posts :



Comments
1 comments
Do you have any suggestions? Add your comment. Please don't spam!
Subscribe to my feed
Rahul said...

Awesome Tutorial !!

Post a Comment

About Me

Latest posts

Blogger Zone