Setup the Menus
This tutorial explains how you define a menu module as dropdown or accordion menu using the Menu Class Suffix in a template based on the Warp framework.
Define a menu module as a dropdown menu
To create a menu module with dropdown functionality for your Main Menu go to Extensions -> Module Manager and create a new module. Choose Menu. Select the position menu.
To the right you find the parameter Menu Name; choose mainmenu. Set the End Level to 3 to show three levels (1, 2 and 3) and Always show sub-menu Items to Yes. Now click on Advanced Parameters.
As the Menu Class Suffix, you need to type in menu-dropdown. As the Module Class Suffix, type in style-menu. That's it!
Define a menu module as an accordion menu
The first level items of the menu you want to display (on whose click you want to display their sub items with an accordion effect; in the example Accordion A and Accordion B) must be separators to achieve the accordion effect.
To create a menu module with accordion functionality go to Extensions -> Module Manager and create a new module. Choose Menu. Select a position where a vertical menu fits, preferably a column, like the left position.
To the right, you find the parameter Menu Name; choose the menu you want to display. Set the End Level according to how many levels you want to display. Now click on Advanced Parameters.
As the Menu Class Suffix you need to type in menu-accordion. As the Module Class Suffix type in style-menu. Done!