• Quick introduction to TB Mega Menu
  • 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)

  • After installed, 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. TB Mega Menu in front-end is a block and General toolbox allows you to config 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