OMG Menu is a simple "mega menu" with these features:
- Multi-level dropdown
- Grouping submenus into columns
- Load module in submenus with chrome styles selectable (Raw/None and XHTML).
- Allows add description text into menu item (<a>)
- Allows custom the color for menu item (<a>)
- Allows add classsuffix to list item (<li>)
- Allows add icon (small image) for menu item
- Mobile layout, auto swicth to mobile layout when view on phones or small screen tablets.
Download
Mega Menu is packaged in an install package, includes a module (mod_omgmenu) and a plugin (plg_system_omgmenu).
Download Mega Menu for Joomla! 2.5 here
Module (mod_omgmenu) options
(*) In Joomla! 3 it may look differently but all options are the same.
| Option | Values |
|---|---|
|
|
| Dropdown animation effect |
|
| Animation speed |
|
| Apply custom font-family? | Yes | No (default) |
| Custom font-family | List of safefonts and google webfonts |
| Yes | No (default) | |
| Custom text color | (hexa color) Eg: #0088CC |
| Custom hovered text color | (hexa color) Eg: #005580 |
| Apply custom font-size? | Yes | No (default) |
| Custom font-size | (a pixel number) Eg: 12px |
Mega Menu item options (in Menu Manager: Edit Menu Item)
(*) In Joomla! 3 it may look differently but all options are the same.
Examples (help you know how to setup a mega menu with OMG Menu)
Example 1: columns - screenshot
Example 1: Menu items tree
Home
|— Beez 2
|—|— Typography Beez 2
|—|—|— Test 01
|—|—|— Test 02
|—|— Home Page Beez 2
|— Beez5
|—|— Typography Beez5
|—|— Home Page Beez5
|— Atomic
|—|— Typography Atomic
|—|— Home Page Atomic
Example 1: Menu items options
|
Where:
|
|||
| Option | Value for |
||
| Beez 2 |
Beez5 | Atomic | |
| Icon / image ... | --- | --- | --- |
| Item Description | All about template Beez2 | All about template Beez5 | All about template Atomic |
| List Item Class Suffix | --- | --- | --- |
| Custom Item Color | Yes | No | No |
| Item Text Color | #660922 | --- | --- |
| Width of sub-menu box | 200 | 200 | 200 |
| Margin of sub-menu box | 5 | 5 | 5 |
| Padding of sub-menu box | 5 | 5 | 5 |
| Group children into column | Yes | Yes | Yes |
| Load module | No | No | No |
| Select module | --- | --- | --- |
| Module Chrome Style | --- | --- | --- |
Example 2: Load module - screenshot
Example 2: Menu item tree
Login
|— Login form in dropdown
Example 2: Menu item options
|
Where:
|
|
| Option | Value for |
| Login form in dropdown |
|
| Icon / image ... | --- |
| Item Description | --- |
| List Item Class Suffix | --- |
| Custom Item Color | No |
| Item Text Color | --- |
| Width of sub-menu box | 310 |
| Margin of sub-menu box | 0 |
| Padding of sub-menu box | 5 |
| Group children into column | No |
| Load module | Yes |
| Select module | Login (mod_login) |
| Module Chrome Style | XHTML/RAW |
Example 3: multi-level dropdown - screenshot
Example 3: Menu item tree
Example Pages
|— Components
|—|— Content Component
|—|—|— Single Article
|—|—|— Article Categories
|—|—|— Article Category Blog
|—|—|— Article Category List
|—|—|— Featured Articles
|—|—|— Archived Articles
|—|—|— Submit Article
|—|— Contact Component
|—|—|— Contact Categories
|—|—|— Contact Single Category
|—|—|— Single Contact
|—|—|— Featured Contacts
|—|— Weblinks Component
|—|—|— ...
|—|— News Feeds Component
|—|—|— ...
|—|— Users Component
|—|—|— ...
|—|— Search Components
|—|—|— ...
|—|— Administrator Components
Example 3: Menu item options
All OMG Menu item options: leave default. You can change the option Width of sub-menu box at will.
Notice!
- The CSS stylesheet comes with menu module include css code snippest for menu item layout and some for demonstration. You can make changes to css files, but should be better if you override styles by adding overriding css code into your template css file.
- If you want to change the menu html output (module layout), please copy the original layout (/modules/mod_omgmenu/tmpl/*.*) to your template html overridden folder (/templates/your_template/html/mod_omgmenu/*.*) then edit these overridden layout files as your need.