Create a mega e-commerce menu in CSS, HTML and JQuery (Continued)
[Continued, see Part 1]
The CSS
p, ul, o, i, b, a, body, html, div, li {
margin: 0;
padding: 0;
}
body {
font-size: medium;
font-family: Calibri;
}
#wrapper
{
margin:0 auto;
width:1200px;
overflow:auto;
}
.mega-menu-wrapper
{
background-color:#e1e1e1;
overflow:auto;
}
Here we add our style reset and default body font along with the default styles we want to the main containers.
Main Headings
The menu needs to be positioned relative so the dropdown can be displayed properly. The menu items (<li>) need to be floated left so they display side by side.
The links (a) will show an arrow before the text, so we use .menu li a:before to display the background image. We also use the built in CSS3 transition effects to change the position of the background image when the user hovers over it.
.menu
{
overflow:hidden;
position:relative;
}
.menu li {
float: left;
list-style-type: none;
}
.menu li a:before {
content: '';
display: block;
width: 24px;
height: 24px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
background: url('arrows.png') center center no-repeat;
background-position: 0 0;
-webkit-transition: background 0.5s ease-out;
-ms-transition: background 0.5s ease-out;
-moz-transition: background 0.5s ease-out;
transition: background 0.5s ease-out;
position: relative;
top: -4px;
}
.hovered {
background-color: #464646;
color: #fff !important;
-webkit-transition: background-color 0.5s ease-out;
}
.menu li a:hover:before {
-webkit-transition: background 0.5s ease-out;
-ms-transition: background 0.5s ease-out;
-moz-transition: background 0.5s ease-out;
transition: background 0.5s ease-out;
background-position: 0 -24px;
}
.menu li a {
display: block;
padding: 10px 25px;
color: #464646;
text-decoration: none;
font-size: 14px;
}
Dropdown
The dropdowns will take the full width of the parent menu. For this to work properly it needs to be positioned absolute and the left position needs to be set to 0px. This is why the parent container (menu) needs to be positioned relative.
The dropdown is perfectly aligned with its parent container.
The block elements (span) need to have a minimum width. This allows everything to look neater and the headings line up accurately. The categories have a 1px solid border which separates them from the main items as seen above. The block elements also need to be floated left so they line up side by side.
.menu-dropdown {
background-color: #464646;
overflow: hidden;
position: absolute;
display: none;
left: 0px;
}
.block {
display: block;
overflow: auto;
float: left;
min-width: 150px;
margin-bottom: 8px;
}
.heading {
font-weight: bold;
clear: both !important;
width: 100%;
border-bottom: 1px solid rgba(160, 160, 160, 0.41);
}
.block li {
display: block;
float: none;
}
.block li a {
padding: 8px 10px;
background-color: transparent;
color: #fff;
}
.block li a:before {
background: none !important;
}
.block li a:hover {
background-color: #3b3b3b;
}
JQuery
The JQuery is not all complicated. The menu is quite complex, and since we prefer things neat and want to make sure everything matches up, some aspects simply cannot work with CSS alone. When the dropdown is positioned absolute, the parent menu’s height will no longer expand to the dropdown item’s height. Additionally, in CSS there is no way to toggle clickable elements.
$(document).ready(function () {
var MenuHeight = $('.menu').height();//Get menu height..
var DropDownMenu = $('.menu-dropdown');//get drop down menu.
$('.menu li a').click(function () {
var DropDownMenuHeight = $(this).next(DropDownMenu).height();
$(this).toggleClass("hovered");
if ($('.menu').height() == MenuHeight)
{
$('.menu').height(DropDownMenuHeight + MenuHeight + 'px');
} else {
$('.menu').height(MenuHeight + 'px');
}
$(this).next('.menu-dropdown').toggle();
})
});
The first variable gets the main menu height (parent’s height) and the second gets the dropdown menu.
The next function waits for a click event to occur. Once this happens we get the dropdown height and store it in the variable DropDownMenuHeight. Then set a class to the clicked element. We set the hovered class so the clicked element has the same colour as the dropdown.
The If Statement checks the menu height (parent menu). If it is the same as the first load (MenuHeight), that means this is the first click and the user wants to show the dropdown under this heading. We add the DropDownMenuHeight and MenuHeight and set the menu (parent) height. Remember, this ul does not expand in height. You must add the values because the dropdown is a below its parent.
Lastly, we toggle the dropdown and show it. The next() function does what it says: it gets the next element, in this case the dropdown menu. This prevents other dropdowns from showing.
Notes
The menu has been tested with IE9+, FF 27.0, Chrome and Opera. It should ideally work on all modern browsers.
There are a few issues with the menu which you might want to have a go at fixing. When one menu item is clicked another item can also be clicked, which will result in errors.
When you hover over the main headings the background image changes; however when leaving the main heading the image goes back to the default state. You might want to set the image according to the current state of the dropdown. You can easily achieve this by adding another class and toggling that on/off.