Customization wizard with unlimited colors and TOP 50 google web fonts. It helps you to customize menu without any code editing.
Unlimited number of levels. To see the example hover over the "About / Our Team / Markus Fisher" section.
Fully responsive and looks great on any device: phone, pad, laptop, desktop. Resize your browser window to see it in action.
249 vector icons. It means that Mega Menu is retina ready and looks perfect on any zoom. You can find all available icons here.
Tested and works in all modern browsers and platforms: Mac OS (sifari, chrome, firefox, opera), Windows OS (sifari, chrome, firefox, opera, IE8, IE9, IE10), iPhone, iPad, Android.
Optimized for mobile devices. First click shows dropdown, second click perform link functionality. Try to use menu on iPhone or iPad to see it in action.
Can be pined to the top of screen and stays there while page scrolling (just add "pcss3mm-fixed" class to the menu container).
Well designed search, contacts, login and registration forms, witch are created with help of Pure CSS3 Forms Set.
Flexible and responsive grid system for nested elements. Looking for example? Simply scroll down this page.
On mobile devices this version of menu turns into single line item and helps you to save a lot of screen space. Try to resize your browser window to see how it works.
Forms are created with help of last week's most popular codecanyon item in "css / forms" category Pure CSS3 Forms Set.
Mega Menu grid system supports up to 6 columns and designed for cases when you have large amount of nested elements and want to display them horisontaly. Columns are responsive and support all devices (from mobile to desktop).
Wizard allows you to change and save colors, font and font size without any code editing. So it easily integrates to any design concept. Try to set different parameters and watch how changes Mega Menu.
To save your customization, you need to add this code to head section of your website:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
Than copy css code below and insert it at the end of file "pcss3mm.css". And that's all, you can use customized Mega Menu.
/*----------------------------------------------------------------------------*/
/* CUSTOMIZATION */
/*----------------------------------------------------------------------------*/
.pcss3mm,
.pcss3mm input,
.pcss3mm textarea,
.pcss3mm button {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.pcss3mm {
background: #ffffff;
}
.pcss3mm li {
border-color: #d9d9d9;
background: #ffffff;
font-size: 13px;
line-height: 52px;
}
.pcss3mm a {
color: #a6a6a6;
}
.pcss3mm a:hover {
background: #f2f2f2;
color: #2b82d9;
}
.pcss3mm a.active {
color: #2b82d9;
}
.pcss3mm .dropdown > div {
background: #ffffff;
}
.pcss3mm .dropdown > a:after {
border-top-color: #a6a6a6;
}
.pcss3mm .dropdown > a.active:after {
border-top-color: #2b82d9;
}
.pcss3mm .dropdown > b {
background: #ffffff;
}
.pcss3mm .dropdown:hover > a {
color: #2b82d9;
}
.pcss3mm .dropdown:hover > a:after {
border-top-color: #2b82d9;
}
.pcss3mm ul li {
background: #ffffff;
line-height: 17px;
}
.pcss3mm ul a {
padding-top: 17px;
padding-bottom: 17px;
}
.pcss3mm .grid-column {
border-color: #d9d9d9;
}