.....

5 Smooth Multi Level Drop-Down Menu Using jQuery







UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........







Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:
]]></b:skin>
And immediately before it, paste this code:

/*Some IE fixes*/
.ddsmoothmenu ul li {zoom:1;}
.ddsmoothmenu ul li {display:inline;}

.ddsmoothmenu{
font: 12px Verdana;
background : #ffffff none repeat scroll 0% 50%;
border : 1px solid #ececec;
margin : 5px 3px 5px 3px;
padding : 0;
width : 973px;
height: 30px;
}

.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.ddsmoothmenu ul li{position: relative; display: inline; float: left; }

/*Top level menu link items style*/
.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Verdana; }

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: black;}

.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/
color: #BF0000;}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{position: absolute;left: 0; background: white;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{ top: 0; }

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/
padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; border-left: 1px solid gray; border-right: 1px solid gray;}

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{ position: absolute; top: 7px; right: 4px;}

.rightarrowclass{position: absolute; top: 6px; right: 5px;}

/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{position: absolute; left: 0; top: 0; width: 0px; height: 0px; background: white; display:none; visibility: hidden;}


STEP #3

Now find (CTRL+F) this code in the template:
</head>
And immediately before it, paste this code:


<!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/2886083/w8/googlepages/whddmenu.txt' type='text/javascript'/>


Now click Save Template









STEP #4 Log in to Blogger, go to Layout




page-elements

Add a Gadget of HTML/JavaScript type.



image
Then add this code in to it:.

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://bdlab.blogspot.com">Home</a></li>
<li><a href="#">page 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>
<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="#">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>
<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://bdlab.blogspot.com">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

Now click Save

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

5 Responses So Far:

KTS Lâm Hà Mạnh said...

that great!
thank you

Jaime said...

Thank you so much. I customized it and uploaded it to my godaddy account that I already had. Thanks again...This is PERFECT!!

Vermine said...

Hi, and thanks, great post.

I have one issue, I can't find how to center the items on the bar...

Any idea?

Thanks :-)

FC BAZOS said...

Problem code:
"<div id="smoothmenu1"..."
http://www.fcelectrica1869timisoara.com/
TINYPIC Images
Help !

Christo P. Ney said...

Having some issues with what looks like the right arrow in the submenus as I'm getting 'TinyPic image has been moved or deleted'.

foodwithwine.blogspot.com

The menus with only the initial dropdown seem to work but any dropdown with a multilevel function gives the message.

Any help?

Thanks.

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger