Megamenu uber language switcher12/29/2023 submenu-bottom for the image-based Trending destinations. submenu-top for the four list-based sections ( Holiday types, Holiday packages, Our services, Last minute offers) and. Holiday packages (links with descriptions)Īs you can see. Holiday types (links with thumbnail images) As our mega menu consists of multiple levels of unordered lists, it’s much easier to start by laying out the main sections. To get the layout of the mega menu right, we create a template first, then populate it with content. If you want to know more about how the flex shorthand works, check out my article on flexbox sizing properties:īelow, you can see how the main menu bar looks now: 2. Create a Template for the Mega Menu We also set the flex: 1 rule on the menu items to make them span across the entire width of the flex container and share space among them equally. By adding the center value to the align-items property, we center each item vertically inside the flex container, too: /* General styling */ menu element into a flex container so that the menu items can line up in a straight row. In the CSS, we’ll now define the basic styles and colors. Here’s the HTML that marks up the main menu bar (but not the mega menu yet): The dropdown mega menu will belong to Holidays, while the other menu items will just stand on their own. The main menu bar consists of five items: Home, Holidays, About, Blog, and Contact. Take a look (and then return to the tutorial, obviously!) UberMenu - WordPress Mega Menu Plug 1. Create the Main Menu Bar UberMenu (WordPress Mega Menu Plugin) is one of the biggest-selling items on CodeCanyon and does absolutely all the heavy lifting for you if you’re building a mega menu for WordPress. If you want to test our flexbox mega menu before getting started, check out the following demo: Developing a Mega Menu for WordPress? We add the hover rule that will display the mega menu when the user hovers over the Holidays menu.We remove the template’s helper styles (background colors and borders) from the CSS.Next, we align the items inside each section.We insert the content (images, lists, icons) into the template.We then create a flexbox template for the mega menu with the sections you can see on the screenshot above: Holiday types, Holiday packages, Our services, Last minute offers, and Trending destinations.Firstly we mark up and style the main menu bar.This is not an easy layout, so we will create it using the following steps: In this tutorial, I’ll show you how to create the following dropdown mega menu using the flexbox layout module: It will allow you to create a content-aware, multi-column, and multi-level mega menu that drops down on hover–without any JavaScript or CSS tweaks. If you want to build your own mega menu with numerous items, images, and lists, flexbox is the right tool for you.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |