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
Download the .zip files here and extract it. You then see a folder named
mod_menu and a file named
Step1: Please copy folder
/templates/YOUR_TEMPLATE/html/.There we created an override template named
nexus for mod_menu.
Step2: CSS code
- Way 1: Copy
gnmenu.cssto 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
- Way 2: Copy all CSS code in
gnmenu.cssand 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.
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:
In tab Menu Assignment: Assign this module to display on All pages.
In tab Advanced:
Via the Menu Class Suffix, you can configure menu to work as three demos above. The value can be
-style3 (no empty space before the value) Leaving it empty, it will work as
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.