Introduction

CSS3 Mega Menu is a plugin of Skyline Menu Pro which can work amazingly with a considerable number of menu items and/or subcategories. Rather than just using a dropdown, this plugin opens up a bigger area that offers more options, information and details for visitors..

CSS3 Mega Menu improves navigation and usability of your website. It can help you to get deeper into Joomla sites with fewer clicks and naturally make the menu as much user-friendly as possible.

CSS3 Mega Menu has got the remarkable design that is completely up for you to decide. You are enabled to not only choose among 21 stunning preset styles but also customize gradient colors and CSS to specify the visual style of the menu.

Features

• Compatible with Joomla 2.5+.
• Show title and add description of the menu item.
• Customize the columns of menu.
• Adjust the width of submenu and submenu column.
• 21 lively and clean preset styles.
• Choose the favorite Gradient style: Linear or Glass.
• Customize from the basic colors by changing the Gradient Start, Gradient End, Hover and Text color.
• Support menu wrapper.
• Control hide time delay.
• Flexibility in animation settings.
• Custom CSS to specify the visual style of menu.

Click here to see demo.

Installation

• Get the module Menu Pro from ExtStore.
• Follow the instruction here to install and set for Menu Pro successfully.
• Let's get this Plugin from ExtStore.
• Go to Administrator site, click to Extensions → Extension Manager, then Browse the file and Upload and Install.
• Go to Plug-in Manager to publish CSS3 Mega Menu Plugin

 

• Go to Extensions → Module Manger, click on the option bar to create a new Skyline Menu Pro module.
• A pop-up window will appear, click to Skyline Menu Pro, click to edit the settings.

 

Setting for CSS3 Mega Menu

Setting for Basic Option

• Select Plugin: Default (used as the Joomla menu); If you choose CSS3 Mega Menu, you may customize the following Options.
• Select menu: Choose CSS3 Mega Menu to display.
• Menu Tag ID: Enter a value to assign as the id property of the root tag when the Menu is displayed.
• Start Level: Level to start rendering.
• End Level: Level to end rendering.
• Show sub-menu items: Choose Yes/No to show or not show your menu in multileveL menu.

Setting for CSS3 Mega Menu Options

• Preset: Choose among 21 preset styles for our menu's appearance.
• Gradient Type: Depending on the chosen preset style, the menu would be displayed in Linear or Glass type correspondingly.
• Color: Use HTML colors to set the Gradient Start, Gradient End, Hover and Text Color of the menu.
• Theme: Theme Style of Mega Menu: Light or Dark style.
• Wrapper Selector: Selector of the element that contains the menu for aligning menu.
• Animation Type: Enable/Disable or Customize the Mega Menu animation in LTR mode in None, Fade, Slide, Slide & Fade.
• Animation Duration: Time for the slide/fade effect applied to Mega Menu.
• Delay Hide Time: Time delay before hidding the submenu when mouse out.
• Custom CSS: Modify the visual style of the menu.

Setting for Menu Assignment

• Module Assignment: Choose to assign module in selected pages.
• Menu Selection: Select menu type.

Settings for Mega Menu Items

Menus → Menu Manager, click in a menu type. For example: click to Using Extensions to edit, then choose Mega Menu Parameters to set up.

Mega Menu Items Parameters

• Show Title: Show or Not Show title of menu items.
• Add Description: Add information shown as the Tag line below the Menu Item and Submenu Item Title.
• Columns: Numbers of columns for first level menu items.
• Group: Yes for number of columns per first level menu items.
• Submenu Width: Set the width of submenu
• Subdmenu Column Width:Set the width of submenu columns
• Submenu Column[i] Width: Enter the desired width for every column like colw1=200 or colw3=300
• Additional Class: Additional CSS class to apply to the menu items.
• Submenu Content: Choose content to show in submenus. Use Ctrl + Click to select Multiple Items.
  • Child menu items: Option to show child menu items.
  • Modules: Select module to display menu.
  • Module positions: Select the position to display menu.

Show on the frontpage

Support

If you have questions regarding specific details or need any help with the product, feel free to contact us and join Extstore forum.