TB Mega Menu quick guide

Download and install TB Mega Menu as usual Drupal module installing. If you are new to Drupal module, check out this guide Installing contributed modules (Drupal 7)

To save your time, we produced this tutorial video clip in case you want something visual and cool:

After installing, enable the module and go to Structure -> TB Mega Menu settings. You will see a list of menus, each menu here is an instance of existed Drupal menus.

Click on any Config link to go to TB Mega Menu main UI. In this guide, we config main-menu.

TB Mega Menu main UI consists of 2 parts:
  • Toolbox Area: The top gray area that allows you to config selected element in the menu simulator. General toolbox is displayed defaultly and when you click on the space in the simulator.

  • TB Mega Menu simulator: simulate the megamenu frontend interface but simplified (without style), you will get what you see here. There are 3 types of clickable elements in the Simulator which are: menuitem, submenu, column. Depend on the element you select, the Toolbox will display different contents.

Toolbox

  • General Toolbox

    As default, General Toolbox appears once you enter TB Mega Menu's config UI for any menu. TB Mega Menu in front-end is a block and General toolbox allows you to config for that block.

    • Style: set style for this Mega Menu
    • Animation: set animation effect for this Mega Menu
    • Duration (ms): only available when Animation is not 'None', animation effect duration
    • Auto arrow: show or hide an arrow next to the items that has submenu
    • Always show submenu: show or collapse submenus when browsing on small screens
  • Item Configuration

    • Submenu: you can enable/disable submenu for this item
    • Group: config how the selected item's submenu displays
    • Breack colum: allows you to move a list of menu items to another column
    • Extra class: allows you to style the selected item with an extra css class
    • Icon: allows you to add an icon from Twitter Bootstrap to the selected item
    • Item caption: add caption to the menu item

  • Submenu Configuration

    • Add row: add a row to the selected submenu
    • Hide when collapse: show/hide this submenu when the menu is collapsed on small screen
    • Submenu width (px): set width (in px) for the selected submenu
    • Alignment: align the selected submenu: left, right, center, justify
    • Extra class: allows you to style the selected submenu with an extra css class

  • Column Configuration

    • Add/remove column: "+" to add a new column to the right of the selected column. "-" to remove the selected column
    • Hide when collapse: show/hide this column when the menu is collapsed on small screens
    • Grid (1-12): allows you to set number of grid columns (Bootstrap grid) that the selected column spans
    • Blocks: add/replace a block to the selected column
    • Extra class: allows you to style the selected column with an extra css class