Here you can learn how to create muliple HxD Moomenu for your website. This resource will be more helpful if you want to have multiple HxD MooMenu for your Joomla template.

For Installing and doing the basic configuration please Click here. If you have already installed and configured HxD MooMenu. Please follow the instructions given below.

Creating Multiple HxD MooMenu

• In Joomla Admin Panel go to Extensions->Module Manager and find the module HXDMOOMENU (mod_hxdmoomenu)
• Click on the Check Box found in the left to the Module
• Click the "Copy" toolbar icon found in the top right of the page. Now a copy of the HxD MooMenu module will be created and you can see the new HxD MooMenu in UnPuplished State, something with a name like "Copy of HXDMOOMENU"
• Click on the title "Copy of HXDMOOMENU" to edit the HxD MooMenu module.
• In the edit page select "yes" for "Enabled" option and if needed change the name of the module
• Choose the desired module postion for the new HxD MooMenu
• Now configure the new HxD Moomenu Parameters
  • Choose the required Menu to be displayed from the "Menu Name" dropdown list
  • (Optional) If you have any IE issues set the "UseBgIFrame" option to 1
  • Change the parameters MooDelay, MooDuration, MooFrames Per Second, MooTransition, MooEffects as you need
  • Change the menu class suffix to a new class. It is reccomended to use entirely new name. Default value is "hxdmenu". You can try a new name something like "hxdmenu2" or you use someother name as you wish.
  • Change the "Menu Holder Div ID" to a new ID. This will be applied for the Div tag which holds the new HxD Moomenu. Default value is "hxdmoomenu". You can try a new name like "moomenu2" or you can use someother name as you wish.
  • The following screen show show the similar configuration as described above

Overriding the HxD MooMenu CSS

• You can find the default HxD MooMenu CSS in /modules/mod_hxdmoomenu/assets/css/ folder with the name hxdmoomenu.css.
• Open the file in any text/code editor tool/software that you use.
• Copy the CSS codes between the comments /*** Copy from here ***/ and /*** Copy upto here ***/ and paste the code at the end of the file.
• Change the DIV Tag ID '#hxdmoomenu' as you define in the moule parameter "Menu Holder Div ID(Shown in above screenshot)". Example: If your type "moomenu2" as "Menu Holder Div ID" module parameter, then change all the IDS #hxdmoomenu in the newly pasted CSS to #moomenu2
• Change the Parent UL Class name ".menuhxdmenu" as you define in the module parameter "Menu Class Suffix(Shown in above screenshot)". Example: If your type "hxdmenu2" as "Menu Class Suffix" module parameter, then change all the Class Names with name ".menuhxdmenu" in the newly pasted CSS to ".menuhxdmenu2"
• Now you can apply your new CSS design for the new HxD MooMenu module

Download Link

Please go to the Download Page to download this extension(Module)