You are here: Home

Articles

  • Print

Horizontal Drop-Down Menus

What I wanted on this website was a single horizontal menu bar with several separate menus each with their own vertical drop-down options. Above is the Joomla default without tweaking. I wanted one menu for each Category as follows;  HOME, JOOMLA MANUAL, TEST PAGES, GENERAL, LOOK. (This website may have changed since writing in which case use your imagination!)

HOME had just 1 article; My Front Page

MANUAL had 8 articles including; About Joomla, Joomla Basic, Front End etc.

These and the other category menus were ALL assigned to Main Menu. 

Starting from scratch I went to Menus > Main Menu > Add New Menu item.

  • In the LEFT Hand Pane: Menu Item Type SELECT = Single Article
  • In the RIGHT Hand Pane: Select Article = My Front Page
  • In the LEFT Hand Pane: Menu Title = My Front Page
  • In the LEFT Hand Pane: Menu Location = Main Menu
  • In the LEFT Hand Pane: Parent Item = Menu Item Root

SAVE and CLOSE

That produced one menu, Home, with one Menu Item, My Front Page. Next I added another Menu.

Return to Menus > Main Menu > Add New Menu item.

  • In the LEFT Hand Pane: Menu Item Type SELECT = Single Artcile
  • In the RIGHT Hand Pane: Select Article = Joomla Manual
  • In the LEFT Hand Pane: Menu Title = Joomla Manual
  • In the LEFT Hand Pane: Menu Location = Main Menu
  • In the LEFT Hand Pane: Parent Item = Menu Item Root

SAVE and CLOSE

That produced two menus side by side, the Main Menu and Joomla Manual, with one Menu Item each; My Front Page, and Joomla Manual. Next I added another Menu Item to the Joomla Manual menu.

Return to Menus > Main Menu > Add New Menu item.

  • In the LEFT Hand Pane: Menu Item Type SELECT = Single Artcile
  • In the RIGHT Hand Pane: Select Article = Joomla Basics
  • In the LEFT Hand Pane: Menu Title = Joomla Basics
  • In the LEFT Hand Pane: Menu Location = Main Menu
  • In the LEFT Hand Pane: Parent Item = Joomla Manual

That's the crucial step!

SAVE and CLOSE

I now had two menus side by side, the Main Menu with one Menu Item and Joomla Manual now with two Menu Items. I added another Menu Item to the Joomla Manual menu.

Return to Menus > Main Menu > Add New Menu item.

  • In the LEFT Hand Pane: Menu Item Type SELECT = Single Article
  • In the RIGHT Hand Pane: Select Article = Front End
  • In the LEFT Hand Pane: Menu Title = Front End
  • In the LEFT Hand Pane: Menu Location = Main Menu
  • In the LEFT Hand Pane: Parent Item = Joomla Manual

Another crucial step!

SAVE and CLOSE

And so on ad infinitum.

SUMMARY. To add a new Menu horizontally alongside the others, the Parent Item of each = Menu Item Root. To add a new drop-down Menu Item, the Parent Item = the menu on the horizontal display from which you want the menu item to descend on mouse-over. The Menu Location for ALL is Main Menu.

The FINAL STEP is to associate the Menu with a Module. There are several Joomla extensions that generate horizontal menus, four of which are installed here; AriExtMenu, AriYuiMenu, KwickMenu, MaxiMenuCK. An example of each is on its own page - see Test Pages menu. They all seem to work in roughly the same way. Assuming you have installed and activated the necessary extension, go to Module Manager > New and from the list select whatever Module you are using. The main item to check is in the RIGHT hand pane under Basic Options where Menu to Render = Main Menu or whatever you have called your main menu.

Job done. What a palaver!

snake

©2012 Quivis