Creating Awesome Menus in Drupal: Part 1

by: outlierdavid

When it comes to the development of a website, there's nothing more fun than the intricate detail that goes into a main navigation menu. There are so many variables, from applying padding to the A tags instead of the LI tags to create a bigger hit box, to specifying font sizes and line-heights, to writing media queries to turn your menu HTML/CSS into a mobile friendly navigation (without duplicating markup).  And then taking all that spiffyness and adding CSS3 animations to polish the end experience.

In this blog, I'm going to show you how I like to build my menus, from what modules I use, to the settings I use, and even some advanced things like javascript logic to make cool transition effects happen.

Step 1: Install Menu Block

Drupal by default will allow every single one of your menus to already be a block, so why use this? The reason is because Menu Block gives you fine control over how far down you want your menus to expand.  You can set options such as "only show the first level" or "only show the 2nd level children of my current menu tree (awesome for sub menus).  Here's a screenshot of what the interface looks like and the awesome detailed controls you have with it.

Simply looking at these options should make your mouth water in excitement, but just in case you're not quite there yet, I'll go over a few.

  • Block title as link This could potentially be your "Home" button or link. This would best be used if a "back to home" element, icon/image was a key part of your layout and wanted it to be ever present.  
  • Starting Level This is extremely cool.  Setting this to "Second Level" can make sidebar sub-navigation by menu category a breeze.  Simply make a new block of your main menu navigation, set the starting level to "Second Level" and you're good to go! If your primary level menu items have no submenu items, then the block will simply not display. SO EASY! I made the following in 2 minutes.

  • Expand all Children of this tree This is it.  The great bambino. This is the #1 reason I love this module so much.  In default Drupal, to show a menu as expanded, you have to go into the parent item and literally click "expand this menu item". With this, you can CSS out your menus and submenus to your hearts content.

There are other options available, but these are the ones that are the most commonly used and I couldn't be happier with the module.


Video, Web, and Design Agency