{modal images/courses/t3/09-navigation-and-mega-menus/Accessing-the-mega-menu.jpg|Title=Accessing the mega menu}Accessing the mega menu{/modal}

Make complex menus easily with T3's mega menu system which can be accessed by the Megamenu button.

The Megamenu configuration screen allows you to click menu items and assign classes and align, group, or create drop down menus. Let's go through some of the more common tasks:

Hiding the drop down menu

Levels of the dropdown menu can be set individually to display or hide. This is very handy of you want to hide the nested menu items but still have them exist in the menu structure of the website. Select the top level menu item and toggle the Submenu switch.

{modal images/courses/t3/09-navigation-and-mega-menus/displaying-the-submenu.jpg|Title=Displaying the submenu}Displaying the submenu{/modal}


Hide when collapse

Visibility of the submenus can be determined using the Hide when collapse toggle switch. Use this setting to hide a drop down sub menu on a mobile device or small screen. If you choose to display the sub menu on a small device then keep this toggle set to Yes and input a desired width for the submenu item.

{modal images/courses/t3/09-navigation-and-mega-menus/hide-when-collapse.jpg|Title=Hide when collapse}Hide when collapse{/modal}



The drop down menus are a powerfull part of the T3 framework, and can be configured to display in rows and columns. Select the outer most box of the drop down menu until it's border appears in blue. Select one the alignment icons.

{modal images/courses/t3/09-navigation-and-mega-menus/alignment.jpg|Title=Alignment}Alignment{/modal}


Drop down menus can be centered, aligned left and right, or span 100% of the container.

{modal images/courses/t3/09-navigation-and-mega-menus/alignment-options.jpg|Title=Alignment options}Alignment options{/modal}


Add a new row or column

Add a new row or column by clicking the drop down menus outer most container, and clicking the add column icon. 

{modal images/courses/t3/09-navigation-and-mega-menus/adding-columns-and-rows.jpg|Title=Adding columns & rows}Adding columns & rows{/modal}


Inserting modules

Modules can be displayed inside the mega menu. Create a new column and click its container to highlight it. Then select a module from the drop down selector.

{modal images/courses/t3/09-navigation-and-mega-menus/Inserting-modules.jpg|Title=Inserting modules}Inserting modules{/modal}


Extra classes

Various menu items can be assigned addtional classes by selecting the menu items and typing a class name into the input field. This is handy to style menu items individually in the template.less file.

{modal images/courses/t3/09-navigation-and-mega-menus/extra-class.jpg|Title=Extra class}Extra class{/modal}



Assign icons to individual menu items by typing in the bootstrap framework class for the icon you wish to display into the icon text input. Class names for each icon can be found at http://fortawesome.github.io/Font-Awesome/icons/.

The icons are vector based allowing you to resize them with CSS and have them maintain their proportions without becoming pixelated.

{modal images/courses/t3/09-navigation-and-mega-menus/icon.jpg|Title=Assigning an icon to a menu item"}Assigning an icon to a menu item{/modal}



Insert text into the item caption field to display a line of text directly within the menu item.

{modal images/courses/t3/09-navigation-and-mega-menus/Item-captions.jpg|Title=Item captions}Item captions{/modal}



If you have a subscription, login to access course material and your account details.

Please contact m@joomtraining.com.au for any account issues.