Meganizr Responsive Css3 Mega Menu Navigation And Menus

Make annette mills gift book animations mega menu responsive bootstrap 3. Using mega menus on your website can help upgrade your navigation Thanks to the. Flat CSS Pricing Table Pack Meganizr - Responsive CSS3 Mega Menu.

Hello guys! In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content. The design of this mega menu can be found on the The Bricks UI. Let’s start with the HTML markup.

HTML Markup

Create an unordered list with the class “nav” (<ul>), then for each menu item we will add a new list item (<li>) with an anchor tag (<a>) inside. If you want the menu item to be a mega menu just add a <div> inside of the <li>.

Reset and Container Basic Styles

As the default styles of the browsers differ from each other, we’ll add some reset styles to keep consistency between them and avoid future issues.

Then we will add some basic styles to the menu container and float the list items to the left in order to show them on the same line.

Styling the Menu Links

We will start with the common styles like padding, height, position, etc. Then we’ll set the typography styles such as font size, color, text shadow, etc. We’ll also set a background color and a left and right border. To keep the styles transitions smooth we’ll add a CSS3 transition. Note that we set the same property five times, this is required because this property is not fully implemented in all browsers yet, and as this property is on testing, all the different browsers use a prefix before the property. So if you want to support some current and older browsers use this prefixes.

For the hover state we will only change the background color. To finish the menu links styling we will add rounded corners to the first link using the :first-child pseudo selector and remove the left border.

Styling the Search Form

We’ll start with the form container: set the position to relative, add a left border like we have on the menu links and set the width to inherit. By setting the width to inherit it will use the width from the child inputs.

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Then we will style the text input: float it to the left, set the height, padding, etc. To hide the text input we will set the width to 1px and remove the left and right padding. On the :hover and :focus state we will update the width and padding values.

The styles for the submit input are similar to the text input, we’ll only set a fixed width and height, add a background icon and rounded corners using the border-radius property. We have also set transitions for both inputs in order to have some smooth and nice animations.

The Mega Dropdowns

This is one of the most important parts. We will start by setting the position to absolute, width to 100%, display to block and the top and left values. Then we will hide the dropdowns using the opacity, visibility and overflow properties. After that we will add a background color, rounded corners and some transitions. The reason we will be using this three properties to hide de dropdowns and not the display: none; is because if we use display: none; the transitions won’t work.

To show the dropdowns on hover we need to set the opacity to 1 and the visibility and overflow properties to visible.

Some Content

As it’s now the menu supports any content in any language (html, php, js, etc.). For this example we will create a columns based layout with some link lists inside. Add the following html code inside of the mega dropdown (<div>).

Then we will add some basic styles for this content. We’ll set the width of each column to be 20%, the padding 2.5% and float the columns to the left. To finish we will add some typography styles for the heading and links.

Download Files

In today’s world of Responsive Web design, people want every part of their website to look perfect on all the devices. One of the toughest parts that I have experienced while working with RWD is coding touch-friendly multilevel navigation menus.

Update: Looking for a better baseline? See CSS-only Dropdown Menu

With navigation menus that has many levels, you need to take care of a number of things, some important ones are:

• Adding support to show the sub-menus as hover drop-down on bigger screens (desktops)
• Making the menu to break down adaptively as per the device screen resolution
• Controlling the drop-down behavior of sub-menus on smaller screens (mobile and tablet devices)
• Changing the hover control to touch on mobile devices

Besides the above points, you are also required to keep the styles and markup as good (minimal) as possible.

A responsive hover-only menu is pretty easy thing you can do with just CSS. But how about a touch-friendly menu? With only CSS? It could be a tricky job to do.

I don’t know if there are some cool JavaScript-based solutions for this purpose, but I have a working CSS-only solution for responsive, touch-friendly multilevel navigation menus. It may not be an ideal solution to achieve that, but still I recommend you to give it a go.

I’m going to share the tutorial and the demonstration in the rest of this post. Explaining each and every bit of code is difficult, so I’ll try to cover all the important points only.

Before going any further, please check out the menu in action.

What it’s gonna take

Not a miracle, but the Checkbox hack that I discovered on this article on Codrops. If you know what it is, you might have already drawn a rough picture of our responsive menu idea.

The checkbox hack is all about making a click-event-kind-of-effect with just CSS. We use the :checked pseudo element and the sibling selector (+) to see if the checkbox is checked, then “do something” with the sibling of it. And we are going to use it for our menu.

HTML5

I’m posting a small piece of code from the demonstration markup to ease up the explanation.

Above given are just some nested unordered lists (<ul>) inside an HTML5 nav element. The main thing to notice in the above code is the checkbox and label element.

The first <ul> in the #menu is the main navigation and the rest of the others are sub-menus.

The idea here is to place a checkbox above each menu and then trigger it as the sibling of the checkbox with the help of the label element (<label for='#.. makes all our touch-friendly approach possible).

Each of our menu-items that consists of a sub-menu carries a checkbox input and a label inside it. As you may have noticed, I’m using the hyperlinks to act as the “actually accessible” menu-item here, they are stretched all over their respective list-item. I’ve placed the label inside the hyperlink to maintain the flow.

You can see two elements with the same class in the menu-items that has a sub-menu: span.drop-icon and label.drop-icon. The former is for representing that a menu-item contains a sub-menu, and the latter one acts as both the drop-down representative and the touch-trigger for the respective sub-menu on smaller screens.

I’ve used HTML entities in both the span.drop-icon and label.drop-icon; triangle pointing left ▸ (▸) and the triangle pointing down ▾ (▾) to show to drop icons on the menu. Omega mine aline hunter read online.

The label element will be kept hidden on the desktop resolution, and will only be visible on smaller screens. The checkbox element will be hidden no matter what resolution it is, as we don’t want the user to notice that.

On top of the main navigation list, I’ve placed another trigger (#toggle-menu) to toggle on and off the whole menu.

I expect the above explanation have given you the rough idea of what we are doing. Lets move to the styling section.

Note: I’ve made use of micro-clearfix to clear floats in the above markup.

CSS & Magic

I tried to keep it as simple as possible, and came up with the following CSS:

Starting off with the styling, I’ve used mobile-first approach to code it down. All of menu-items are stretched to fit available screen, the sub-menus are given some horizontal margin and different background to appear distinct from the menu-items.

span.drop-icon is set to hidden for the mobile view and the label element is visible. I’ve styled them both to look exactly what they are meant for.

Implementing the checkbox hack, I’ve checked each of our checkbox inputs with :checked, and then with the sibling selector (+), the display of our sub-menus has been controlled.

Next part completes our menu.

For Responsive & Touch-friendly behavior

This section covers how our menu looks on different screen resolutions. For desktops, I’ve unset the checkbox hack as I wanted to display the sub-menus on hover on desktops. The list-items in the main nav are floated left to create a horizontal list.

List-items are relatively-positioned, the sub-menus inside them are absolute positioned, and are adjusted according to their levels.

label.drop-icon is hidden here, and span.drop-icon is visible as we don’t need triggers to control the checkbox on desktops.

The menu-items get an equal width (33.33%) at a certain resolution to avoid any collapsed view.

The menu is ready now!

That’s it. I guess it has gone a bit lengthy, hope it has explained it well.

Let me know if you liked this menu, or if you’ve noticed something not working, or any other thoughts you have in mind, please use the comments section to have the say.