The world before TB mega menu

The world as we know it did not always come with the TB mega menu for Drupal 7. Traditional menu implementations included writing the entire HTML and designing it as per the needs or using default drupal menu parallelly with other contrib modules to support different requirements This would often take days or even weeks to implement. Even after completion, the client may ask you to make changes and things may go haywire. Changing every HTML element is a daunting task! Another approach may be to use certain modules offered by Drupal to create a menu. The problem with this approach is that, though the menu might look simple, it would be a daunting task to make it completely configurable within a small time frame.

This is where TB mega menu comes in to save the world!

“TB Mega Menu allows you to create a mega menu with an innovative back-end user interface and synchronized with Drupal core menu.” - drupal.org

The TB mega menu gives the user an option for a completely configurable approach in terms of building a menu from scratch. Today we are going to discuss this implementation over Drupal 7. It allows the user to create a mega menu with images, text, video, using a block.

There is one dependency though that these things can be inserted via a block.

The installation and implementation are pretty straight forward but there are certain hairpins that can be the cause of a car crash if not carefully configured.

The problem

Recently, one of our clients had requested a menu which will have content like images, videos, links, text, etc. for each of the respective menu links, while being completely configurable at the same time. Now, this was a task which called up for challenges. It might appeal to one, to create the menu with bootstrap. The only problem with this being, it wouldn’t be so much of a configurable option for the user. Anytime there would be any changes needed to be made, the client would have had to come to us and wouldn’t be able to directly change it themselves. To have such a configurable option is a pretty daunting task!

This is where the TB mega menu module stepped into our help. The content we talked about earlier i.e. images, videos, texts, etc. essentially could be placed in the menu through blocks. Great isn’t it? Well not so much. You will see later on why.

As one dilemma seemed to hit the exit gate, another stepped in to fill its shoes. The basic block Drupal 7 offers give the user the option to enter details for the following fields only:

1. Block title

2. Block description

3. Block body

And that’s essentially it. If you were to insert an image, video or a link then you would be stuck. One thing you could do is to create a block programmatically with the required fields but that’s one block. What if you needed every content you place in the mega menu for each of the respective links to be different?

This problem has been addressed in Drupal 8 with the concept of block types. Block types are essentially like content types wherein you can add fields of different type and later on add content for that particular block type respectively. You can have multiple block types with each block type having a different set of fields. These blocks can then be placed anywhere you like. But this is for Drupal 8. Fortunately, Drupal 7 presents a module which allows users to do the same. The module named bean now comes to the rescue!

“What is Bean?

Think of a Bean as a method to provide new types (compared to node this would be a content type) which then provides an add the content interface to create as many blocks as you require (see screenshot below). The bean content can then be placed around the site just like any other block.” -drupal.org

Through this bean module, we can create a block type with the required fields and then have multiple blocks of that block type.

We now know what are the things required to kickstart the implementation we seek. So, let us now start the implementation.

Installation

1. First, we need to install the TB mega menu.

2. Then we need to install the bean module.

3. Check if bean_admin_ui is enabled. If not then enable it. This will give us the UI to create the block type.

Before we start with the implementation of TB mega menu we need to have our content ready for the respective menu items.

Creating a block type

When the bean and bean_admin_ui modules are enabled, there will be an option to create block types understructure. To create a block type,

1. Go to /admin/structure/block-types/add.

2. Specify a name and description for the block and save it.

3. Saving the block type will take you to the block type listing page (/admin/structure/block-types). Here you will be able to see all the block types that you have created.

4. Now, that you have created a block type, you have to add fields to it. Similarly, like in content types, here, you have to click on the manage fields link in the block type listing page.

5. From here you can create the fields you want. After doing so save the block type.

6. Now, you have a block type created with fields in it. You can choose to add a block for this block type as we would do for content. We will be looking at it soon.

7. Similarly, you can create as many block types as you want.

Adding a block for a block type

1. Now, that you have a block type ready, you can add the content for it i.e. creating the blocks.

2. To add a block go to block/add. Here you will be presented with a list of block types that you had created. From here you can choose to add a block for a respective block type. You can also go to /admin/content/blocks, which is the block listing page for the blocks created for custom block types, and click on Add block.  One thing to note here is that you would not be adding a block by going into /admin/structure/block/add because this is for adding the default block that Drupal 7 provides.

3. Fill in the required fields and save. A block will be created.

You now have your content ready to be placed in the TB mega menu as a block.

Creating a menu

TB mega menu uses the menu that you already have on your system and lets you configure that accordingly. Creating a menu is a straightforward approach and you need to create the menu as you normally would by going into /admin/structure/menu and then click on the Add menu.

Configuring the TB megamenu

You have two essential things ready:

1. The blocks (the contents that need to be placed in the menu).

2. The menu itself.

Let us start configuring the TB mega menu!

1. Go to /admin/structure/tb-megamenu.

2. The TB mega menu is configured upon an existing menu (refer above). Select the menu that you want to configure by clicking on the respective menu’s config option.

3. The menu links can also be modified from this configuration page. If you need to modify the links you can do so by clicking on the Edit links option.

4. The config page shows 6 options initially:

   1. Style

   2. Animation

   3. Delay

   4. Duration

   5. Auto arrow

   6. Always show submenu

5. The first level of menu items is shown initially. Let us, for example, take this as:

   1. Parent 1

   2. Parent 2

   3. Parent 3

6. On clicking on Parent 1, we would have the option to

   1. Add a submenu

   2. Add an extra class

   3. Icon

   4. Item caption

7. The child menu links will appear in the same order and relation as created in the menu /admin/structure/menu.

8. This Parent 1 menu item will have it’s child menu links shown in a container.

9. On clicking on this container, we will have the option to

   1. Add a row below this container

   2. Hide when collapse

   3. Specify a width

   4. Align the items as we like

   5. Add an extra class

10. The container further contains a wrapper which contains the child menu links. We have an option to:

    1. Add/remove columns. We can add a column in parallel to the child menu links if we want

    2. Hide when collapse

    3. Set grid size for the column

    4. Insert a block in that column that we added

    5. Show block title

    6. Add an extra class

11. On moving further and clicking on the child menu link we are presented with the option to

    1. Add a submenu. If we add a submenu we would have the option to insert a block in that submenu

    2. Group the submenus. This means that the submenus would appear below the child menu links

    3. Break column

    4. Add an extra class

    5. Icon

    6. Item caption

12. On moving further into the sub-menu we would be able to see that the sub-menu is wrapped in a wrapper. On selecting the wrapper, we would be able to

    1. Add a row

    2. Hide when collapse

    3. Specify the width of this sub-menu

    4. Align text

    5. Add an extra class

13. On moving further and selecting the block in the sub-menu we would have the option to

    1. Add/remove a column

    2. Hide when collapse

    3. Set grid size

    4. Add a block

    5. Show the block title

    6. Add an extra class

14. You can have as many child menu items as you want and blocks with them.

Placing the block

The TB mega menu that you created is essentially a block. So you would have to place it in a region like other blocks.

1. Go to /admin/structure/blocks.

2. Search for the TB mega menu block that you created and place it in the desired region and save it.

3. On the specified page the TB mega menu will appear.

Note

Blocks permission

You have implemented the blocks with bean module by creating block types with and then creating blocks (the content that we need to show) for it. This block needs to be given permission. To do so:

1. Go to /admin/people/permissions.

2. Search for this term your_bean_block_name block (where your bean block name is the name of your block).

3. Look for the your_bean_block_name block: View Bean permission option.

4. Check the permission for the anonymous user.

5. Clear all cache and check the site for the anonymous user. You will have the block in the TB mega menu shown for the anonymous user.

All blocks inside TB megamenu appearing at once

1. One thing to keep in mind is that when creating a TB mega menu for the first time if there are sub-menus and blocks inside them then they would all appear one on top of each other.

2. This is because the animation is set to none.

3. You would have to select the animation as fading or any other animation style. It is only then that on hovering, the blocks would appear else not.