TB Megamenu

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)

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/replaace a block to the selected column
    • Extra class: allows you to style the selected column with an extra css class
 

Flexible fixed and fluid grid

Nucleus has a very powerful and flexible grid system. It supports both 960gs fix grid system and fluid grids as well..

 

Versatile Typography

You can set the font for all main default elements from a list of font-families, google fonts or load your custom theme...

 

Advanced Block Styling

You can set a default style for all blocks under global settings or define for each region it's own style.

 

Subtheming

Best way to see Nucleus features is to download one installation profile and reproduce exactly the content and the theme...

On the Subject of Me

On the Subject of Me

I'm Sirate, Photographer and Web Designer, working in web development and print media. If you have a project that needs some creative injection then that’s where I come in!

Hire me, I'm really good

My Photostream