Today I write some stuffs and hope you will have a menu on your Joomla! website which looks like the Google Nexus's menu just in the tea-break time.

Firstly, let's see some demos we have done here :-)



Style 1: For sub-menu, drop icon and text down from top


Style 2: For sub-menu, drop the icons first then pull the text


Style 3: For sub-menu, drop the text first then pull the icon


1. Implementation

Download the .zip files here and extract it. You then see a folder named mod_menu and a file named gnmenu.css.

Step1:  Please copy folder mod_menu to /templates/YOUR_TEMPLATE/html/.There we created an override template named nexus for mod_menu.

Step2: CSS code

  • Way 1: Copy gnmenu.css to your template's css folder. Then in your template (/templates/YOUR_TEMPLATE/index.php), load the css file. Or you can load this css file from /templates/YOUR_TEMPLATE/html/mod_menu/nexus.php.
  • Way 2: Copy all CSS code in gnmenu.css and paste into your main template CSS file at the bottom. If you use Jarvis template framework, you can paste the CSS code directly in backend via template manager.


2. Create & configure menu and some menu items

If you didn't, create a menu and some items.

We added support of FontAwesome version 4.2 into the nexus template of mod_menu. So you can use font-awesome icon class to insert into Link CSS Style.

add icon font class for menu item



3. Create a new module instance and configure it

Create a new module instance of module Menu (mod_menu): In Module Manager, click New button and then choose module named Menu. If you want to configure existing menu module instance, just ignore this.


Now we configure it.


In tab Module:

Configure menu module instance for Nexus menu - Module tab


In tab Menu Assignment: Assign this module to display on All pages.


In tab Advanced:

Configure menu module instance for Nexus menu - Advanced tab


Via the Menu Class Suffix, you can configure menu to work as three demos above. The value can be -style1, -style2, -style3 (no empty space before the value) Leaving it empty, it will work as -style1.


Click Save button and now you can browse the front-end to see the result.

Take your coffee and enjoy the nice weekend.



  • Want the menu from the right side?
  • Want to know more detail about CSS3 and jQuery code in this?

We will come back to tell you these after weekend!


Please feel free to drop us a comment here if you got any problems.


Related Articles