Create clearly arranged & even comprehensive interfaces with Warp's enhanced menu system.

provided menu types

  • drop down menus
  • accordion menus
  • tab and slider Menus
  • and many more fancy javascript menus

Menu System

Menu System Overview

The Warp framework provides a powerful menu system to handle menu types with different templates and styles, letting you create any interface you have in mind.

Depending on the complexity of your website you can either create very simple but yet nicely animated menus with a few menu items, or comprehensive menus that you can divide into a main menu with the most comprehensive dropdown functionality that is currently available, accordion menus in your layout columns and completely separate menu modules ... there is no limit for your imagination.

Learn more about the key features:

Feature Description Docs
Menu Types In addition to our default menu rendering we provide two different menu types: the accordion and drop down menu. Both can be loaded by using the menu class suffix. For example, use "dropdown" or "accordion" as the menu class suffix to render the specific menu type. View
Sub Titles Menu items can have subtitles to provide a more detailed explanation on what information a user will find. Just use the pipe character twice in your menu item name. For example, "My title || My Subtitle". View
JavaScript Effects Most YOOtheme menus come with lots of fancy effects like smooth transitions and fading colors. Take a look at the JavaScript based menus provided by the Warp Framework to learn more.
Background Images The menu item you set in the Joomla menu administration for each menu item will appear as the item's background image. It is also possible to load a different image for the same menu item, depending on the menu type. For example, if you have set an image "item1.jpg" for the dropdown menu and you need a smaller image in the sub menu, just place an image called "item1_alt.jpg" in the same folder. View
Page Color A page color can be set individually for each menu item. That way, you can style every page linked to from a menu item independently. For example, use "itemcolor-black" as the page class suffix and the CSS class black will appear in the body tag of that page. View

Drop Down Menu

Use "dropdown" as the menu class suffix and publish the menu in the "menu" position to load the drop down menu.

Feature Description Docs
Multi Columns The number of columns in the drop down area can be set individually for each menu item to suit any of your needs. For example, use "columns-2" in the page class suffix and the drop down menu of this menu item will have two columns. This way you can define different drop down columns for each menu item. View
Flexible Drop Down Width To keep CSS modification as simple as possible, we provide a template parameter for the column width of the drop down menu. You can set the column width in the template configuration. View
Drop Down Delay Moves the drop down area out with a smooth transition. The drop down area also remains visible for some milliseconds when the mouse leaves it unintendedly. And of course, the menu keeps fully functional if JavaScript is disabled.
Drop Down Module Position You can mix the drop down menu with any Joomla module by publishing it in the "menu" position. The login module, for example. The module will drop down and look like it is part of the menu. View
Drop Down Module Width You can set an individual drop down width for each module published in the "menu" position. The module will have its own width independent from the other dropdown menu items. View

Accordion Menu

Use "accordion" as the menu class suffix and publish the menu (for example, in the "left" or "right" position) to load the accordion menu.

Feature Description Docs
Menu Separator To trigger the the accodion effect on a menu item in level1 the item have to be a menu separator, not a link. All added menu items for the sub levels will appear with a nice, sliding accordion effect.
Sliding Modes The "default" mode closes all expanded accordion items when another accordion item is clicked. The "slide" mode makes it possible to open more than one accordion item at the same time. View
Closed/Opened State The CSS class "active" is automatically applied when the accordion item is opened. So the opened accordion item will look exactly a opened menu item without accordion effect.