Websites with dozens, hundreds, or thousands of subpages often have a complicated structure. The user gets lost on such websites. Megamenu can make navigation easier. On the example of the Droopler distribution, see how you can conveniently manage large menu items.
What is Megamenu?
Megamenu is a type of navigation used on websites, consisting of several levels. The first level looks like a standard list of links, but after hovering over one of its elements, additional options are shown.
These options consist not only of a list of links in the second level of navigation but often have a third or even fourth level. Sometimes there are also photos or even videos.
A menu built in this way is visually appealing to the user and allows them to easily find their way around large websites.
A simple example of Megamenu using HTML and CSS can be found at: https://www.w3schools.com/howto/howto_css_mega_menu.asp
Droopler and the module for Megamenu
Droopler is a Drupal-based distribution dedicated for building corporate websites. You can learn more about Droopler here:
https://www.droopler.com
https://www.drupal.org/project/droopler
https://github.com/droptica/droopler_project
In Droopler we have used a module named “Drupal 8 MegaMenu” available for download at https://www.drupal.org/project/we_megamenu
Before you read further — I assume that you have the Droopler distribution installed. The installation instructions can be found at www.droopler.com
Sample mega menu in Droopler
Shown below are some screenshots presenting the menu of a fresh Droopler installation.
As you can see, the menu is configured. The user only needs to change the configuration according to their needs, while when it comes to the programming part — this element of the website is 100% finished, it works, and it does not require any additional activities in this regard.
Main menu configuration
The main menu settings can be found in the Drupal administration menu in Structure; next, in Drupal 8 MegaMenu, you look for the Main navigation element and from this element’s menu you go to edit links.
After going to the edit page, the working structure of the main menu appears, which can be freely edited using the “drag and drop” method.
To add more levels to the menu, however, you move the secondary element to the right to create an “indentation”.
Megamenu and adding new blocks
In order to add a content block to the menu, you must first add a new content block. Go to Structure -> Block Layout -> Add custom block and select the content block.
The system will take you to a form, where you can add a new block. Fill out the title and the content of interest. In this case, it will be the title and a few links. Next, add another block with the content and photo.
After adding two blocks, you need to add them to the region on the page and at the same time — disable the display of these blocks in the region. In the Block Layout of the header section click Place Block, and then select from the popup window the block you want to add and click Place block. In the next step, uncheck the show title option and save.
When the blocks are added to the region, you should disable them. In order to do this, click Disable in the block’s action menu.
After completing this step, you can start making additions to the menu.
In order to do this, go to Structure, Drupal 8 Mega Menu, and then click config next to main navigation.
You will be taken to the menu edit. In our case, we will add blocks to the “products” element. After clicking “products”, a configuration panel appears on the right. Check the Submenu in it as active.
Now a workspace appears under “products”, where we will add our blocks in a moment.
After clicking on this element under “products”, another configuration panel appears, but this time it concerns our workspace.
In this panel, you use the plus and minus buttons to set the number of columns in your Megamenu. In the grid field you set the column width, while the Blocks field is used to select the previously added blocks.
After setting the appropriate options, click Save and your menu should look similar to the one in the picture.
Summary
Megamenu configuration with Droopler is quick and easy. The freedom it offers allows you to create a unique website in a short time.
With the help of the Megamenu module you can present the structure of a complex website to the user in a clear way.
Originally published at https://www.droptica.com.
