![]() Few CSS needs to be implemented for a couple of basic things which can be implemented through the Menu container styles’ properties.Allow about one hour to follow this tutorial and become familiar with BLT. So, it means, we need to remove the modifiers and jQuery toggling animation which have been added through the hamburger menu button.īy following the above steps, you would be able to create the mobile hamburger menu. Below is the screenshot for Close button configuration.īasically, we need to exactly reverse what we have implemented for the Hamburger menu button. This button will be to remove a few modifiers and also the Menu Drawer will be closed. Menu wrapper container for holding the menu container and menu links.Menu level 1 (Sub menu visibility toggle) and refer to the screenshot below:Īs per the screenshot, it can be seen that for desktop breakpoint no interaction is required and for the tablet breakpoint, we need to set the interaction for toggling the dropdown. menu-container is for Navigation Container element and menu-wrapper class is for targeting inner Menu wrapper Container element. ![]() ![]() Target(jQuery selector), from which direction the animation should be appliedĭistance, select easing type and Duration in milliseconds. JQuery animation - which animation you would like to implement, scope to, No jQuery animation is required for the desktop breakpoint as no animation is required for that specific elementįor tablet breakpoint below are the options which need to be set: Moreover, Toggle jQuery animation needs to be configured. If off-canvas isn’t required, then this configuration can be skipped. Here we need to take care of two sets of configurations:Īs displayed in the above image, we need to add modifiers for elements of the page:įor the hamburger button itself, so that it can be hidden after clicking on it.įor the body tag to move the body canvas and place the menu to the shifted side. | Hamburger ButtonĪs mentioned in the above point, the button is helpful to add/remove/toggle modifiers to the menu structure and also to toggle the view of the whole menu.Īdding a screenshot of the hamburger button configuration which will help you understand the modifiers added and how the menu toggling has been achieved. This container is for holding the whole structure of the menu and also to apply a few of the styles and add some modifiers through button elements. Now, let’s compare and look at the new elements added in the Menu template. To cover the whole structure, we need to convert the above-mentioned Menu template and add a few Site studio core elements as shown in the screenshot below. There should be one icon beside each menu link where the dropdown is available so that the user can understand that a particular menu has dropdown links.Īnd, in the end, on page load, the menu and hamburger menu icon which depicts the menu dropdown should collapse by default.Ī close button, which will allow the menu to close after opening the hamburger menu. The dropdown should not open on hover as mobile devices won’t support the hover gesture or won’t give good UX. Now, let's look at all the things which should be taken care of while converting a desktop menu to a mobile hamburger menu. But when viewed on mobile devices, it won’t appear perfect. For quick reference, adding a below screenshot of Menu Template, using which we could easily implement above mentioned Desktop Menu with dropdown level.Īfter creating this template and applying a few styles, the Desktop menu with dropdown would work flawlessly. Here, I would like to take a reference to one of our previous Cohesion blogs, where the menu template has been explained. Everything is achievable through Site Studio’s core elements. We can use the core library and implement it as it has been implemented for admin toolbar or modules like Responsive menu, Hamburger menu, or any external libraries.Ĭustom JS can also be used to achieve this.īut here in this tutorial, we will see how to implement the hamburger menu with Acquia Site Studio without writing a single line of code and without using any external library or module. There are many ways to achieve the hamburger menu. Desktop Menu Mobile Menu (Hamburger Menu) ![]() Here is a screenshot of the desktop and mobile menu which we now implement with Acquia Site Studio. Converting the desktop horizontal dropdown menu to a Hamburger menu in mobile delivers the best UX for mobile users. This blog is a tutorial for setting the mobile menu (Hamburger menu) in Acquia Site Studio which was earlier known as Cohesion DX8.
0 Comments
Leave a Reply. |