views:

37

answers:

1

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?

A: 

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.

Alain O'Dea