How I Did That - Why 'How I Did That'

« Back

Click drop menu

Posted by: mark | May 11, 2013 | Category: Menus jQuery

With the advent of touch screens the Hover drop(HD) menu has become a problem, the fix is to use click drop menus, maybe? we'll see, read on.

A lot of HD menus have links in the top menu items for this to work we can't have them as the browser will go to that page, the same thing that happens now with touch pads and HD menus.

So we are going to be using section headers, our menu templates by default give them an <a > type link with no href= when they are parents (have children under them).

The example is using the cssmenu.tpl and as you can see it doesn't work with 3 level menus, yet, I hope to figure it out some time.

Example

Code

Call the jQuery and javascript function
 
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
 or
<script type="text/javascript" src='uploads/jquery/jquery-1.8.3.min.js'></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#menu_vert").click(function(e){
        e.stopPropagation(); // this stops the bubbling from going any higher
    });
    $('body').click(function(){ // this is only reached if the clicks comes outside the #menu_vert
        $("#menu_vert ul ul").slideUp('fast');
    });
    $("#menu_vert ul li").click(function() {
        $("#menu_vert ul ul").slideUp("fast", function(){});

        $("ul", this).slideDown("fast", function(){
            $("ul", this).slideUp("fast");
        });
        e.stopPropagation(); // I added this and the code below in hopes of getting the 3rd level to work.
    });
    $("#menu_vert ul li li").click(function() {
        $("#menu_vert ul ul ul").slideUp("fast", function(){});

        $("ul ul", this).slideDown("fast", function(){
            $("ul ul", this).slideUp("fast");
        });
        e.stopPropagation();
    });
});
</script>

^ Top