Nice Menus horizontal children

Last updated on
30 April 2025

I use Nice Menus (thank you for that module!) and wanted to use 'down' option but with the 2nd level (and next) displayed horizontally. The current code allows the first level to be horizontal but every next one is displayed in vertical position.
To achieve that I modified css and also added 'downdown' options to the module code. Changes to the nice_menus.module file (step 2 of 2) are not necessary since the css code can simply replace, for example, css code for 'down' . (in that case, replace downdown with down in the step 1 of 2)

I used nice_menus_default.css file (from modules/nice_menus/) to create my own nice_menus.css http://drupal.org/node/185543 and placed it in themes/zen/ folder (where zen is my current theme).
After that, I modified that nice_menus.css file as well as added extra option downdown to modules/nice_menus/nice_menus.module file.

The code is probably not perfect and I didn't test it using the administration part, I simply added code

  $menu = theme('nice_menu', 1, 77, 'downdown');   
  print $menu['content'];

to the template where I wanted the menu to be displayed. In my case 77 is the menu id - to find your menu id, check Administer -> Menus -> hover over the Edit link under your menu name. You will see the path like http://.../?q=admin/build/menu/menu/edit/77 where the the last number is your menu id.

Step 1 of 2

Changes to nice_menu.css - add this code:

/******************************
 HORIZONTAL (downdown) menus
******************************/

ul.nice-menu-downdown {
  width: 65.5em; /* width of the 2nd level menu horizontal line - if you have more items in the menu, you may need to change this value so they all fit in one horizontal line*/
}

ul.nice-menu-downdown li {
  width: 12.5em;
}

ul.nice-menu-downdown ul {
  width: 65.5em;  /* width of the 2nd level menu horizontal line - if you have more items in the menu, you may need to change this value so they all fit in one horizontal line*/
  left: 5em; /* change if you want the 2nd level menu to be shifted to the right/left */
}

ul.nice-menu-downdown ul ul {
  width: 65.5em;  /* width of the 3rd level menu horizontal line - if you have more items in the menu, you may need to change this value so they all fit in one horizontal line*/
  left: 5em; /* change if you want the 3rd level menu to be shifted to the right/left */
  top: 1.8em; /* height of the 2st menu level and also margin after which 3rd level starts */
}

ul.nice-menu-downdown li.menuparent,
ul.nice-menu-downdown li li.menuparent {
  background: #eee url(arrow-down.png) right center no-repeat;
}

ul.nice-menu-downdown li.menuparent:hover,
ul.nice-menu-downdown li.over,
ul.nice-menu-downdown li li.menuparent:hover,
ul.nice-menu-downdown li li.over {
  background: #ccc url(arrow-down.png) right center no-repeat;
}

Step 2 of 2

Changes to nice_menus.module (located in modules/nice_menus/)
Replace

      $form['nice_menus_type_'. $delta] = array(
        '#type' => 'select',
        '#title' => t('Menu Style'),
        '#description' => t('right: menu items are listed on top of each other and expand to the right') .'<br />'. t('left: menu items are listed on top of each other and expand to the left') .'<br />'. t('down: menu items are listed side by side and expand down'),
        '#default_value' => variable_get('nice_menus_type_'. $delta, 'right'),
        '#options' => drupal_map_assoc(array('right', 'left', 'down')),
      );
      return $form;

with the code

      $form['nice_menus_type_'. $delta] = array(
        '#type' => 'select',
        '#title' => t('Menu Style'),
        '#description' => t('right: menu items are listed on top of each other and expand to the right') .'<br />'. t('left: menu items are listed on top of each other and expand to the left') .'<br />'. t('down: menu items are listed side by side and expand down').'<br />'. t('downdown: menu items are listed side by side on all levels'),
        '#default_value' => variable_get('nice_menus_type_'. $delta, 'right'),
        '#options' => drupal_map_assoc(array('right', 'left', 'down', 'downdown')),
      );
      return $form;

Help improve this page

Page status: Not set

You can: