Suckerfish CSS Drop Down Menus in Drupal

Dropdown menus in Drupal the way I do it. By using the menu_block I am more flexible in how to display the menu. By using block_class I can reuse the css code without having to worry about the id drupal generates for the block.

Step 1. Install menu_block and block_class.

Step 2. Goto /admin/blocks and create a menu_block item with expanded children, a block classname "menublockmainmenu" and place where you like.

Step 3. Add css code.

div.block-menu-block.menublockmainmenu div.menu-block-wrapper * { margin: 0; padding: 0; }
div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul,
div.block-menu-block.menublockmainmenu div.menu-block-wrapper li,
div.block-menu-block.menublockmainmenu div.menu-block-wrapper a { width: 125px; height: 25px; } 
div.block-menu-block.menublockmainmenu div.menu-block-wrapper li { list-style: none; }
div.block-menu-block.menublockmainmenu div.menu-block-wrapper a { display: block; }
div.block-menu-block.menublockmainmenu div.menu-block-wrapper li { float: left; position: relative; }
div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul { top: 25px; left: 0px; position: absolute; }
div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul ul { margin: -25px 0 0 125px; }
div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul { display: none; }

Step 4. Add js code to your theme.

jQuery(document).ready(function(){
    var $ = jQuery;
    // dropdown menu handlers
    $(document).ready(function(){
      $('div.block-menu-block.menublockmainmenu li').hover(
        function(){
          $('ul:first', $(this)).show();
        },
        function(){
          $('ul', $(this)).hide();
        }
      );
    });
});

Step 5. Add css overrides, this is an override I did for a client;

body div.block-menu-block.menublockmainmenu div.menu-block-wrapper ul { height: 42px; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul,
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper li,
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper a { height: 42px; width: auto; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul { top: 42px; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul ul { margin: -42px 0 0 200px; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper a { padding: 0 14px; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul,
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul li,
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul a { width: 200px; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper ul { background-color: #042575; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper li {  }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper a { line-height: 42px; color: #ffdc00; text-decoration: none; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper ul ul li { height:24px; line-height: 24px; background-color: #fffdfa; border-style: solid; border-width: 0 1px 1px 1px; border-color: #042575; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper ul ul li li.first { border-width: 1px; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper ul ul li a { color: #042575; line-height: 24px; }
body div.block-menu-block.menublockmainmenu div.menu-block-wrapper li ul ul { margin-top: -43px; }

 

 

This artikel is largely based on: Eric Londons post from 2009.

Tags:

Share: