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?
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.