Smooth jQuery Multi Level Drop Down Menu For Blogger - V2

How To Add Multi Level 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 (see image below)

• 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/AVvXsEgEO6EOBQyj5z3ldfNNU5fQnsjNhvQgax2Et5Jwg7stIXqxtffHM7dl03ga2b0J3MGr2OGdr5zjfNItfYLEzZ_d20gpY0j9pCn-CBiYKvxCHUjA6-JkEPf_PLd-ulClXpn0Ut1wyMLqg_c/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/AVvXsEgEO6EOBQyj5z3ldfNNU5fQnsjNhvQgax2Et5Jwg7stIXqxtffHM7dl03ga2b0J3MGr2OGdr5zjfNItfYLEzZ_d20gpY0j9pCn-CBiYKvxCHUjA6-JkEPf_PLd-ulClXpn0Ut1wyMLqg_c/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://www.helperblogger.com/">Create This</a>
        </li>
    </ul>
    <br style="clear: left" />
    <br style="clear: left" />
</div>

Customizations

Note - I highly recommend you to use our HTML Editor to make your changes.You can see a live preview of your menu with using HTML Editor.Copy all of the above code and paste it into editor.

Any Help?

Many blogger gets problem while adding links and texts.If you are getting the same problem then simply provide a tree menu of your menu,I will build the HTML part for you.Also feel free to ask your any little query...

Tweet