jquerymenuzotonic

How do I get desktop-style drop-down menus in Zotonic?


The top menu in my Zotonic site renders in place without acting like a desktop application menu.

All items in the menu are rendered on screen with none hidden and it looks terrible. It looks like it is supposed to be a superfish menu, but I don't see the necessary code for superfish to work. My stop-gap solution is to have a single-level menu, but that doesn't meet what the client is looking for :(

How do I get desktop-style drop-down menus in Zotonic?


Solution

  • Download Superfish http://users.tpg.com.au/j_birch/plugins/superfish/superfish-1.4.8.zip

    Extract content of superfish-1.4.8 folder in superfish-1.4.8.zip to priv/sites/default/lib/.

    Add the following to priv/sites/default/templates/base.tpl:

    {% lib "css/superfish.css" "css/superfish-navbar.css" "css/zp-compressed.css" "css/zp-project.css" "css/zp-menu.css" %}
    {% lib "js/apps/modernizr.js" "js/jquery-1.4.2.min.js" "js/superfish.js" %}
    <script type="text/javascript">
        // initialise plugins
        jQuery(function(){
            jQuery('ul.do_superfish').addClass('sf-menu').superfish({speed: 'fast'});
    });
    </script>
    

    scomp_menu_menu.erl sets do_superfish as a class on the list instead of sf-menu so I use addClass('sf-menu') to compensate.

    I omit "js/hoverIntent.js" from the JS lib because it makes the menu painfully slow to open and set {speed: 'fast'} to make the menus snap open immediately.