7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. UIKit

How to Create Responsive Mega Menus With UIkit

Read Time: 8 mins
Final product imageFinal product imageFinal product image
What You'll Be Creating

In this tutorial, we’ll continue exploring the UIkit framework and learn how to build responsive mega menus by taking advantage of its components.

As with other UIkit tutorials, a familiarization with this framework will be beneficial to follow along yet not mandatory.

Our UIkit Mega Menus

Here’s our first mega menu, which displays within a panel (full page view):

And the second one, which uses a full width container (full page view):

To check how the mega menus behave on different screens, be sure to view them from a large screen and resize your browser window. You'll notice that: 

  • On mobile screens, they are part of a single off-canvas menu.
  • On large screens (≥1200px), their appearance differs. On the first demo, the mega menus’ width depends on the top menu’s width. However, on the second demo, the mega menus’ width is equal to the viewport width. Additionally, in this case, they appear with slide animation.

We’ll Need These UIkit Components

Assuming that we’ve installed the required UIkit files, let’s look at the main UIkit components that we’ll use to build the menus:

To thoroughly understand what each component or utility class that we’re going to use does, don't forget to inspect the generated markup and styles through your browser inspector.

Mega Menu Example #1

On small screens, the site header will look like this:

The site header on mobile screensThe site header on mobile screensThe site header on mobile screens

In a classic scenario, to reveal the off-canvas menu, we’ll click on the hamburger toggle button:

The mobile menu

On large screens, the top menu will appear while the off-canvas toggle button will become hidden:

The site header on large screensThe site header on large screensThe site header on large screens

The mega menus will emerge like this:

The mega menusThe mega menusThe mega menus

The HTML

The header will contain a nav element. Within it, we’ll put:

  • The logo
  • The menu
  • The search bar toggle button
  • A link to the wishlist page
  • The mobile menu (off-canvas) toggle button
  • The off-canvas

Let’s highlight the key things:

  • From the above header elements, the search bar toggle button and the link that sends to the wishlist page won’t have any functionality as this is beyond the scope of this tutorial.
  • The off-canvas toggle and the off-canvas itself will appear on screens smaller than 1200px. We’ll do this by attaching the uk-hidden@l utility class to the target elements.
  • On the contrary, the top menu will appear on screens at least 1200px wide. We’ll do this by attaching the uk-visible@l class to it.
  • To initialize the UIkit navbar we’ll pass the uk-navbar attribute to the nav element.
  • To create the mega menus of the first two items of the top menu we’ll use the uk-dropdown attribute from the dropdown component. Here we’ll pass specific options to this attribute for defining the boundaries of the mega menus, their position, and the offset between the mega menu and its associated toggle. You can, even more, customize it as you wish. For instance, try to add the mode: click option for forcing click mode only.
  • We’ll use the uk-column-1-* classes to specify the desired width for the columns inside the mega menus. That said, the mega menu of the first item of the top menu will have uk-width-1-3 as it contains three lists, while the mega menu of the second item will have uk-width-1-2 as it contains two lists.
  • Similarly, for the sub-menu of the last item of the top menu, we’ll also use the uk-dropdown attribute. However, here we’ll customize only its offset to match the other menus offset. This won’t be a mega menu though, thus it will sit below the associated toggle by default.
  • The off-canvas menu will be built by following the structure of the off-canvas component. To customize its behavior according to our needs, we’ll pass a few options to the required uk-offcanvas attribute. For instance, the mode option determines the animation mode. Possible values are slide, reveal, push, and none. In our case, we’ll go with the reveal mode.

Here’s the full markup:

The dropdown component is a special case of the drop one with its own styling. That said, we can use the uk-drop attribute instead of the uk-dropdown one with the same result.

The CSS

Coming up next, we’ll specify some straightforward styles. Nothing really important. Here they are:

Mega Menu Example #2

In this second demo, the only thing that will change is the way that the sub-menus will appear:

The mega menusThe mega menusThe mega menus

The HTML

The markup will stay the same, yet we’ll do the following small changes:

  • Add the dropbar: true option to the uk-navbar attribute of the nav element. This will generate the slide animation for our mega menus by appending an empty div element with the class of uk-navbar-dropbar as a sibling of the nav.
  • Remove the predefined top and bottom paddings from the mega menus of the first two items of the top menu by adding the uk-padding-remove-top and uk-padding-remove-bottom utility classes.
  • Remove the offsets from all dropdowns. 
  • Remove the uk-dropdown attribute from the sub-menu of the last item of the top menu as we don't need it (we removed the offset).

Here’s the main header structure:

Conclusion

In this tutorial, we wore the front-end developer’s hat and used UIkit components for creating responsive site headers with mega menus on their desktop version. Of course, this is just one implementation. You can certainly build them with UIkit in another way.

Without a doubt, UIkit does a great job of giving us the tools to build complex mega menus with minimal effort and a lot of customization settings. At this point, you should hopefully have a good understanding of how to set up mega menus with the help of UIkit.

Uikit Mega Menu in WordPress

But wait a moment! Is having the markup for one or two mega menus really enough? Do you agree that it will be even more effective if we make dynamic version of these menus? I'm sure you’ve raised your hand at this point!

The good news is that in another tutorial, we’ll wear the WordPress developer’s hat and challenge ourselves to convert one of these menus into a dynamic one by using the Walker Class. So stay tuned!

As always, thanks a lot for reading!

More UIkit Tutorials on Tuts+

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.