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

OMG Menu module options

(*) In Joomla! 3 it may look differently but all options are the same.

OptionValues
  • Other options not mentioned here will be same as mod_menu
  • Custom text color here will be overridden by Item text color in menu item options.
 Dropdown animation effect
  • Fade in
  • Slide down
  • Fade in and slide down (default)
 Animation speed
  • Fast (200ms)
  • Normal (400ms) (default)
  • Slow (600ms)
  • Slow (800ms)
  • Slow (1000ms)
 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)

OMG Menu - menu item options

(*) 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

OMG Menu allows you group submenus as columns

 

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:

  • "---" means don't care or leave default value.
  • The highlighted rows: options are required to group children items in columns.
  • Others menu items which are not mentioned in this table, leave all options default.

 

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

OMG Menu allows you load a module in a menu item

 

Example 2: Menu item tree

Login
|— Login form in dropdown

 

Example 2: Menu item options

Where:

  • "---" means don't care or leave default value.
  • The highlighted rows: options are required to load module in this menu item.
  • Others menu items which are not mentioned in this table, leave all options default.

 

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

OMG Menu supports multi-level dropdown

 

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.