Blogger Widget : Multi-Drop Down Menu

Save to 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 &

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="" />

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

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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">
<li><a href="">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<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>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<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>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
<li><a href="">Blogger Help</a></li>
<br style="clear: left" />

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 :

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