You can use Mobile Menu CK from any file in your system. A simple way is to call the Javascript object.
Note that the plugin Mobile Menu CK must be enabled.
Load the menu with Javascript
This method will call all the Javascript class with your custom options.
jQuery(document).ready(function(){
new MobileMenuCK(jQuery('#menu99'), {
menuid : 'mymenu1'
,menubarbuttoncontent : '≡'
,topbarbuttoncontent : '×'
,showmobilemenutext : 'default'
,mobilemenutext : 'Menu'
,container : 'body'
,detectiontype : 'resolution'
,resolution : '640'
,usemodules : '0'
,useimages : '0'
,showlogo : '1'
,showdesc : '0'
,displaytype : 'push'
,displayeffect : 'slideright'
,menuwidth : '300'
,openedonactiveitem : '0'
,mobilebackbuttontext : 'Back'
,menuselector : 'ul'
,childselector: 'li'
,uriroot : ''
,merge: ''
,mergeorder: ''
});
});
List of Parameters
jQuery('#menu99')
This is the main selector that will target the existing menu in the page. It must be a valid CSS selector that wraps the menu that you want to transform in a mobile menu.
'menuid'
This parameter must be unique. This is the identifier of your mobile menu. Example with 'mymenu1', the ID of your mobile menu will be 'mymenu1-mobile'
'menubarbuttoncontent'
This defines what to put in the button. By default the value ≡ shows a hamburger icon
'topbarbuttoncontent'
This defines what to put in the button. By default the value × shows a closing icon
'showmobilemenutext'
This defines what to show as text in the menu.
'default'- shows the active item title'custom'- shows the mobilemenutext option value'none'- shows nothing
'mobilemenutext'
This defines the text to show if showmobilemenutext is set on custom
'container'
Determines where your mobile menu will take place
'body'- load the menu in the body. It wil be shown at the top of the page (not sticky)'topfixed'- load the menu in the body. It wil be shown at the top of the page (sticky)'menu'- load the menu in the same place as the normal menu
'detectiontype'
When must your mobile menu be shown
'resolution'- load the menu under a resolution value'phone'- load the menu only on the phone devices'tablet'- load the menu only on the phone and tablet devices
'resolution'
Value of the screen resolution under which the menu will be active. Only if 'detectiontype' is on 'resolution'
'usemodules'
Value 0 or 1. Defines if the modules loaded in the normal menu shall be loaded in the mobile version (especially for Maximenu CK and Accordeonmenu CK that can load the modules)
'useimages'
Value 0 or 1. Defines if the images loaded in the normal menu shall be loaded in the mobile version (especially for Maximenu CK and Accordeonmenu CK that can load the modules)
'showlogo'
Value 0 or 1. Defines if the logo loaded in the normal menu shall be loaded in the mobile version (especially for Maximenu CK and Accordeonmenu CK that can load the modules)
'showdesc'
Value 0 or 1. Defines if the link description loaded in the normal menu shall be loaded in the mobile version (especially for Maximenu CK and Accordeonmenu CK that can load the modules)
'displaytype'
'flat'- all items in a flat list'accordion'- + / - icons to toggle the submenus as an accordion'fade'- + / - icons to toggle the submenus with a fade effect'push'- + / - icons to toggle the submenus with a push effect
'displayeffect'
'normal''slideleft'- push the screen'slideright'- push the screen'slideleftover'- slide over the screen'sliderightover'- slide over the screen'topfixed''open'
'menuwidth'
Value of the menu width once opened. For displayeffect on slide
'openedonactiveitem'
Value 0 or 1. Defines if the menu directly opens (toggle submenus) to show the active menu link according to the visited page
'mobilebackbuttontext'
Text shown in the menu to go back ot the parent level. For displaytype on fade or push
'menuselector'
CSS selector that identifies the normal menu parent tag. By default ul, can be a more complex css selector
'childselector'
CSS selector that identifies the menu items tag to include in the mobile menu. By default li, can be a more complex css selector