Dropdown Menu

Dropdown-Menus (also called Flayout-Navigation) there are a dime a more. However, a general layout-independent implementation designed for such is much difficult. Why is included in JYAML now a separate dropdown menu concept, is because, as with almost all possible solutions has limited or no keyboard navigation (keyword: Accessibility). Therefore the focus was on accessibility. Also it expand the submenus completely without javascript, if the browser does support this.

The keyboard navigation works with the Tab and Shift + Tab key (default) and also the arrow keys.

To enable the Dropdown-Menu you must select in a menu module the Alternative Layout "dropdown". In each menu module additional options are available to influence the behavior. A part of these options can also be changed per menu item, for example to change the submenu direction for a specific menu item.

Layout File: /html/mod_menu/dropdown.php
Stylesheet: navigation.dropdown.css

Take a look at the examples in the stylesheet tocustomize the layout.

Tip's and Notes:

  • With the Dropdown-Menu an the function "Insert modules into a menu item" you can even realize of so-called Mega-Menus.
  • To show all sub-menus on all pages you must set in the module settings the option "Show sub-menu items to Yes.

Following a list of all available settings.


Default orientation

Here you can set the direction (vertical, horizontal) and orientation (left, right, up, down) for all menu items. The Dropdown-Menu will automatically detect if there is no room in the browser window (viewport) and change the horizontal alignment from right to left or left to right automatically. The vertical orientation is influenced not automatic, to prevent layout overlays with other submenus.

This option is also avaiable on each menu item in the Joomla! Menu Manager.

Linear/Multicolumn Submenu

When activated, the submenu will be extended to the full width and all direct submenus are automatically split into a multi-column grid.

Show/Hide Animation Effect

Determines the effect of the animation while displaying and hiding of submenus will be used.

There are several combinations of slide and fade effects possible.

Submenu Opacity

Determines the opacity of the submenus. This setting corresponds to the CSS property "opacity".

Submenu Hide Delay (ms)

Determines the delay time in milliseconds when the submenu will be hidden when you leave the mouse or keyboard of a submenu.

Effect Show Duration (ms)

Determines the duration of the animation effect in milliseconds when the submenu appears.

On Show Transition

Specifies the transition effect (type of animation effect) on show a submenu.

These effects are based on the jQuery Easing Effects. A demonstration of the effects can be found here: http://jqueryui.com/resources/demos/effect/easing.html

Effect Hide Duration (ms)

Bestimmt die Dauer des festgelegten Animation-Effekts in Millisekunden, wenn das Untermenü ausgeblendet wird.

Determines the duration of the animation effect in milliseconds when the submenu disappears.

On Hide Transition

Specifies the transition effect (type of animation effect) on hide a submenu.

These effects are based on the jQuery Easing Effects. A demonstration of the effects can be found here: http://jqueryui.com/resources/demos/effect/easing.html

Stretch first submenu

When activated, the width of the submenus are stretched to the same width if the submenu are narrower than the parent menu item.