Smooth jQuery Multi Level Drop Down Menu For Blogger - V1

How To Add Multi Drop Down Menu To Blogger

• Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout)
• Click on add a gadget link just below of Header

Paste below code and save it.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script><script type="text/javascript">ddsmoothmenu.init({ mainmenuid: "smoothmenu1", orientation: 'h', classname: 'ddsmoothmenu', contentsource: "markup" })</script> <style> .ddsmoothmenu { width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9yER6BpkIQXJX9ERzReolOG9mDLlqu5MnPTpOnVpYyLCYDOjKUyF2nW6UvMkRr_eEv_6zS4k04ZimiG_2G9iAGfSnEvpG97Jr15cCYY7rgzmVcPcjJDPo0b5vIc_afKbIoRqVlj3Gxi0/s1600/menu-bg.png); vertical-align: middle; height: 33px; font-family: Verdana; font-size: 13px; font-weight: bold;} .ddsmoothmenu ul { z-index: 100; margin: 0; padding: 0; list-style-type: none;} .ddsmoothmenu ul li { position: relative; display: inline; float: left;} .ddsmoothmenu ul li a { display: block; color: white; padding: 8px 10px; border-right: 1px solid #778; color: #666666; text-decoration: none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9yER6BpkIQXJX9ERzReolOG9mDLlqu5MnPTpOnVpYyLCYDOjKUyF2nW6UvMkRr_eEv_6zS4k04ZimiG_2G9iAGfSnEvpG97Jr15cCYY7rgzmVcPcjJDPo0b5vIc_afKbIoRqVlj3Gxi0/s1600/menu-bg.png);} * html .ddsmoothmenu ul li a { display: inline-block;} .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited { color: white;} .ddsmoothmenu ul li a.selected { background: black; color: white;} .ddsmoothmenu ul li a:hover { background: black; color: white;} .ddsmoothmenu ul li ul { position: absolute; left: 0; display: none; visibility: hidden;} .ddsmoothmenu ul li ul li { display: list-item; float: none;} .ddsmoothmenu ul li ul li ul { top: 0;} .ddsmoothmenu ul li ul li a { font: normal 13px Verdana; width: 160px; padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray;} * html .ddsmoothmenu { height: 1%;} .downarrowclass { position: absolute; top: 12px; right: 7px;} .rightarrowclass { position: absolute; top: 6px; right: 5px;} .ddshadow { position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver;} .toplevelshadow { opacity: 0.8;} </style> <div id="smoothmenu1" class="ddsmoothmenu"> <ul> <li> <a href="http://www.helperblogger.com/">Home</a> </li> <li> <a href="#">Folder 0</a> <ul> <li> <a href="#">Sub Item 1.1</a> </li> <li> <a href="#">Sub Item 1.2</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> </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> </ul> </li> <li> <a href="http://shirazshakeel.blogspot.com/2013/01/smooth-jquery-multi-level-drop-down.html">Create This</a> </li> </ul> <br style="clear: left" /> <br style="clear: left" /></div>

That's It 

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →