How to create an application like mobile menu

Using Mobile Menu CK you can create a mobile menu that looks like an application using icons. What you need to do is to click on the icon theme and add the icons for your menu items. Let see more in details ...

1. Edit the styles

From the component

Go in the Admin menu >> Components >> Mobile Menu CK to edit the style of your module. Click on the style title to edit it, or create a new one.

From the module

Go in your Module options >> Mobile Menu CK >> Select style, then choose your style in the list or create a new one. Once you have selected it you can edit it directly using the Edit button.

2. Select the icon preset

Once you are in the edition interface, you can click on the Presets tab and then on the Icon theme. It will load the styles to give your menu the desired look.

3. Add the icon for each menu item

For now your menu has the icon theme applied but you don't have any icon for your menu item. You must edit your menu and select which icon to use for each item. go in the Admin menu >> Menus >> YOUR_MENU >> MENU_ITEM >> Edit. You will see the additional options in the Mobile Menu CK tab.

Here you can use the following options

• Mobile icon : Set an image that will be used only for the mobile menu, this will not be rendered into your normal menu (desktop menu). This is where you must set your icon
• Text replacement : this is an alternative text. In this example test 1 will be used on the desktop menu, and Agenda on the mobile menu. If you want to use the same text for both desktop and mobile menus, then you can leave this field empty
• Enable for mobile : this allows you to totally disable your menu item for the mobile menu and only show it on the desktop menu

Now that you have added an icon for your menu items, you can have a look at the final result : your mobile menu looks like a mobile application with nice icons.

NOTE : you will need to use the Maximenu CK module to render this type of menu, because it is compatible with the custom options in the menu item (the native joomla menu module can not manage these options)

Download Mobile Menu CK