JF Mobile Menu is a free multi-level push menu module for Joomla. It also works on desktops.
One of the main features is that you can apply "Font-Awesome" icons or custom images for your selected menu items, The module's color styling is fully editable through the Module Manager.
In this tutorial, we will show you how this module works. Let's start.
Step #1. Download & Install JF Mobile Menu
You can download JF Mobile Menu from this page. You need to create an account and login to access the download link. Don't worry, the registration is free.
Then install it from Extensions > Manage > Install.
Step #2. Create a JF Mobile Menu Module
- Go to Extensions > Modules > New > JF Mobile Menu.
- Choose a module position. We recommend the debug if it is available in your template.
- Set Show Title to Hide.
Step #3. Choose Your Desired Menu
JF Mobile Menu module works similar to the native Joomla Menu module. By choosing your desired menu, the module will automatically show a multi-level sidebar push menu on the frontend.
Note - In your menu manager, the parent menu items type must be a Text separator if you want those to show their respective child menu items with a click.
For example in this screenshot, the "Typography" Menu Item is a "Text Separator" type and on-click it will show its sub-menu items with a beautiful sliding effect. If the "Parent Menu Item" will be a different type than "Text Separator" is, then on-click it will just navigate your web-browser on the relevant web-page.
Step #4. Enable Font-Awesome Icons
"JF Mobile Menu" module requires Font Awesome icons. If your Joomla template is not already loading it, then you need to enable it by setting Font Awesome to Yes.
Step #5. Choose on Which Device to Show the Module
JF Mobile Menu can be visible on any devices: desktops, tablets, and mobiles. The module uses the well-known "CSS3 Media Queries" to make visible on any devices you want.
Step #6. Choose Icons or Images for Your Menu Items
One of the main features of JS Mobile Menu is that you can select any menu item you want and to apply to it custom icons or images. All you need it just to select your desired menu item and type a "Font-Awesome CSS class" or to upload a "Custom Image".
Step #7. Customize the Colors for Your Menu
Also as we mentioned, menu styling is fully editable; you can change colors and make it fit your website brand.