Navigation menu's help your readers to easily navigate through your blog and remember making things easy to your reader is a very good thing for every blogger.We previously shared a smooth jQuery multi-level drop down menu and you will observe it is still present in the popular posts widget.In this menu we have edited some CSS to give it perfect look and I hope you will also like this menu.The original script for this menu is taken from dnyamicdrive and we bloggerized this menu to works perfectly with your blogger blog.See the demo the menu first.


Live Menu Demo

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(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/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(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/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...

Post a Comment

  1. This is very nice menu too, but not working in my blog.
    Why?

    ReplyDelete
  2. Nice menu but unfortunately the sub menus not appear in my blog

    ReplyDelete
    Replies
    1. I think this may causing because of jQuery conflict property.Try after removing jQuery script from above code.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Hi, great code!

    How can I change the background color from black to light grey? And how could I round the top corners? I tweaked the code to change the colors of the fond and the hover but I cannot change the background and my blog's tabs are grey, white and dark pink.

    My blog: Journey with Words
    URL: http://soireb.blogspot.com/

    I want to keep the same feel, just be able to have sub-menus, in the blog.

    Thank you

    ReplyDelete
    Replies
    1. Ok give me some time to make this menu as you want.

      Delete
    2. Wow That would be awesome, thank you

      Delete
  5. Hello,

    Can you help me with http://www.chdknowledge.com/ I'm wondering if the CSS on the template I am using is conflicting with the CSS for your dropdown menu.

    Thanks,
    Christine

    ReplyDelete
  6. hey sub menu not displayed on my blog why?

    ReplyDelete




  7. Buy twitter followers,also, promotes social connections among students.It may be used to improve communication building and critical thinking.
    Domizi (2013) utilized Twitter in a graduate seminar requiring students to create weekly tweets to increase classroom discussions.
    Students reportedly used Twitter for connecting with content and other students.

    social media services
    buy facebook likes
    buy facebook fans

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top