Display your menus

The dropdown menus (main menus):

With this template, you can displayed a drop down menu on the left side, on the right side or on both side.

On the demo, I create and published 2 menus for the Home page. The first on the left side and the second on the right side.
For the others pages, I create a third menu with a copy of all my menu items. I published this new menu on the right side. Of course, you must use the "Menu assignment" option to publish a menu (or any module) only on specifics pages.



Drop down menu on the top left side :

You can see this menu in action on the Home page

To obtain that, you must select your main menu in module manager and enter these settings :

  • position : "menu_left"
  • Always show sub-menu items : "yes"
  • none Module class suffix



Drop down menu on the top right side :

You can see this menu in action on the top right side of this page.

It's exactly the same settings with the module position "menu_right" :

  • position : "menu_right"
  • Always show sub-menu items : "yes"
  • none Module class suffix




Additional Vertical menu

You can publish an additional vertical menu in the left or right module position, like these example below. The background color of active item is the same as active link in the content part (option in Template manager). If you choose a background color, the links will be white. To obtain that, you must :

  • In Module manager, publish a menu in the position "left", "right" or "userX"
  • add the Module class suffix : "vertical-menu"
  • Add a code color if you want a background-color : "white", "grey", "black", "brown", "orange", "red", "green", "violet", "turquoise" or "blue" Example CSS class " vertical-menu-green"

CSS class : vertical-menu-grey

CSS class : vertical-menu-blue

CSS class : vertical-menu-orange

CSS class : vertical-menu-turquoise

CSS class : vertical-menu-black

CSS class : vertical-menu-red

CSS class : vertical-menu-green

CSS class : vertical-menu-violet

CSS class : vertical-menu-white

CSS class : vertical-menu-brown





Additional Horizontal menu

You can publish an additional horizontal menu in the Top, Bottom or UserX position, like these example below. The background color of active item is the same as active link in the content part (option in Template manager). If you choose a background color, the background color will be darker. To obtain that, you must :

  • In Module manager, publish a menu in the position "top", "bottom" or "userX"
  • add the Module class suffix : "horizontal-menu"
  • Add a code color if you want a background-color : "grey", "black", "brown", "orange", "red", "green", "violet", "turquoise" or "blue" Example CSS class " horizontal-menu-green"

CSS class : horizontal-menu

CSS class : horizontal-menu-grey

CSS class : horizontal-menu-blue

CSS class : horizontal-menu-orange

CSS class : horizontal-menu-turquoise

CSS class : horizontal-menu-black

CSS class : horizontal-menu-red

CSS class : horizontal-menu-green

CSS class : horizontal-menu-violet

CSS class : horizontal-menu-brown

Note : All these menus work without javascript code (pure CSS : no risk of conflict with another module !).