Shawson's Code Blog

Following on from my previous post about drop downs, I recently expanded the code to allow for sub menus- as many levels deep as you would like.

The Code:

$(document).ready(function () { // Shawsons' Teeny-Tiny Recursive Drop Downs!
    $('.drop-down-menu>li>ul').hide().mouseleave(function () {
        $('.highlighted', this).removeClass('highlighted');
        $(this).hide();
    });
    $('.drop-down-menu li>a').mouseenter(function () {
        var menu_root = $(this).parent().parent();
        $('ul', menu_root).hide();
        $('.highlighted', menu_root).removeClass('highlighted');
        $('>ul', $(this).addClass('highlighted').parent()).show();
    }).mouseleave(function (o) {
        if ($(this).parent().has($(o.relatedTarget)).length < 1) {
            $('ul', $(this).parent()).hide();
        }
    });
});

The Markup:

<ul class="drop-down-menu">
        <li>Drop Down Menu - Demo Title : </li>
        <li><a href="">Menu 1</a>
            <ul>
                <li><a href="a.htm">a</a></li>
                <li><a href="b.htm">b</a></li>
                <li><a href="c.htm">c &raquo;</a>
                    <ul>
                        <li><a href="c-a.htm">c-a</a></li>
                        <li><a href="c-b.htm">c-b &raquo;</a>
                          <ul>
                              <li><a href="c-b-a.htm">c-b-a</a></li>
                              <li><a href="c-b-b.htm">c-b-b &raquo;</a>
                                  <ul>
                                      <li><a href="c-b-b-a.htm">c-b-b-a</a></li>
                                  </ul>
                              </li>
                          </ul>
                        </li>
                        <li><a href="c-c.htm">c-c</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">Menu 2</a>
            <ul>
                <li><a href="d.htm">d</a></li>
                <li><a href="e.htm">e</a></li>
                <li><a href="f.htm">f</a></li>
            </ul>
        </li>
    </ul>

Some CSS:

.drop-down-menu { display:block; }
.drop-down-menu li { float:left; padding: 8px; }
.drop-down-menu>li>a { padding:8px; }
.drop-down-menu li ul  
{
    position:absolute; 
    background-color:#fff; 
    border: 1px solid #999;
    border-radius: 0px 7px 7px 7px; -moz-border-radius:0px 7px 7px 7px; -webkit-border-radius:0px 7px 7px 7px;
    padding:5px; 
    width: 50px;
}
.drop-down-menu li ul a {
   display:block;
   width:50px;
}
.drop-down-menu li ul li ul 
{
    margin-left:50px;
    margin-top: -20px;
}
.drop-down-menu li ul li { float:none; }
.drop-down-menu li ul li a { color:#000; }
.drop-down-menu li ul a.highlighted { background-color:#F68833; }

Demo :

Bookmark