Home arrow Style Sheets arrow Page 2 - CSS Mega Menus
STYLE SHEETS

CSS Mega Menus


In this first part of a two-part tutorial, I will show you how to create a customizable mega-menu with CSS. The straightforward construction process involves defining the menuís structure (in this case, a simple unordered list, including a set of divs), and then styling the main containers and the elements wrapped by them, such as headers, paragraphs, hyperlinks and so forth.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 10
March 07, 2012
TABLE OF CONTENTS:
  1. · CSS Mega Menus
  2. · Adding the CSS

print this article
SEARCH DEVARTICLES

CSS Mega Menus - Adding the CSS
(Page 2 of 2 )

In reality, turning the previous static web page into a fully-functional mega-menu is a straightforward process that can be accomplished by means of a few basic CSS styles. Of course, the best way to understand the inner workings of the process is by reviewing concrete code. So check out the following snippet. It not only defines the menuís visual presentation, but brings it to life, thanks to the use of some CSS hovers:

/* styles for main navbar */
ul#navbar {
    list-style: none;
    height: 45px;
    padding: 0 0 4px 30px;
    margin: 18px 0 24px 0;
    background: #6A2300;
    background: -moz-linear-gradient(top, #B33A00, #6A2300); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B33A00), to(#6A2300));
    background: -o-linear-gradient(top, #B33A00, #6A2300);  
    border: 1px solid #6A2300;
    border-radius: 10px;  
}
ul#navbar > li {
    float: left;
    width: 100px;
    height: 30px;
    padding: 15px 0 0 0;
    margin-right: 40px;
    text-align: center;
    position: relative;
}
ul#navbar > li:hover {
    background: #C9C9C9;
    box-shadow: inset 0 0 1px #000;
    -moz-box-shadow: inset 0 0 1px #000;
    -webkit-box-shadow: inset 0 0 1px #000;
    border-radius: 10px 10px 0 0;
}
ul#navbar > li > a {
    display: block;
    font-size: 14px;
    text-decoration: none;
    color: #FFF;
    outline: 0;
    text-shadow: 0 -1px 0 #5A1E00;
}
ul#navbar > li:hover > a {
    color: #6A2300;
    text-shadow: 0 -1px 0 #FFF;
}
ul#navbar > li:hover .submenu {
    display: block;
}
/* common styles for submenus */
.submenu {
    display: none; 
    padding: 10px;
    background: #C9C9C9;
    background: -moz-linear-gradient(top, #C9C9C9, #F0F0F0); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C9C9C9), to(#F0F0F0));
    background: -o-linear-gradient(top, #C9C9C9, #FFFFF0);  
    position: absolute;
    text-align: left;
    box-shadow: 0 5px 3px #969696;
    -moz-box-shadow: 0 5px 3px #969696;;
    -webkit-box-shadow: 0 5px 3px #969696;
    border-right: 1px solid #886352;
    border-bottom: 1px solid #886352;
    border-left: 1px solid #886352;
}
/* <div> elements in submenus */
.submenu div {
    float: left;
    width: 230px;
    min-height: 150px;
    padding: 10px;
}
/* <h2> elements in submenus */
.submenu h2 {
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: bold;
    color: #6A2300;
    border-bottom: 1px solid #6A2300;
    text-shadow: 0 -1px 0 #FFF;
}
/* <img> elements in submenus */
.submenu img {
    float: left;
    margin-right: 15px;
    border: 4px solid #FFF;
    box-shadow: 0 0 2px #000;
}
/* <p> elements in submenus */
.submenu p {
    margin-bottom: 15px;
}
/* <a> elements in submenus */
.submenu a {
    color: #B33A00;
    text-decoration: none;
}
.submenu a:hover {
    text-decoration: underline;
}
/* submenu 1 */
.section1 {
    width: 505px;
    top: 43px;
    left: 0;
    border-radius: 0 10px 10px 10px;
}
/* submenu 2 */
.section2 {
    width: 750px;
    top: 43px;
    left: -100px;
    border-radius: 10px;
}

From the above code sample, itís clear to see that there are two sets of well-differentiated styles. The first ones are responsible for polishing the look of the menuís main navigation bar, while the second batch takes care of styling the drop-down sections. Since these sections share some common characteristics, such as the same padding, background gradients, shadows and so forth, I decided to encapsulate them in a class called ďsubmenu,Ē while other, more specific attributes have been coded in two separate classes, namely ďsection1Ē and ďsection2.Ē

The rest of the CSS fragment is tasked with styling paragraphs, H2 elements and images. Since these are simple tasks, I'm not going to waste your time (and mine) explaining how theyíre performed. Instead, itís time to attach the styles just defined to the menuís markup, so that you can see it in action. 

The finished menu

If youíre anything like me, you're eager to see if this sample mega-menu will actually work as expected. Below you'll see its full source code, so you can test it using your own browser. Here it is:
 
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building a mega drop-down menu with CSS</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #FFF;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.9em;
    font-weight: bold;
    color: #B33A00;
}
h2 {
    padding: 0;
    margin: 0;
    font-size: 2em;
    font-weight: bold;
    color: #B33A00;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
/* styles for main navbar */
ul#navbar {
    list-style: none;
    height: 45px;
    padding: 0 0 4px 30px;
    margin: 18px 0 24px 0;
    background: #6A2300;
    background: -moz-linear-gradient(top, #B33A00, #6A2300); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B33A00), to(#6A2300));
    background: -o-linear-gradient(top, #B33A00, #6A2300);  
    border: 1px solid #6A2300;
    border-radius: 10px;  
}
ul#navbar > li {
    float: left;
    width: 100px;
    height: 30px;
    padding: 15px 0 0 0;
    margin-right: 40px;
    text-align: center;
    position: relative;
}
ul#navbar > li:hover {
    background: #C9C9C9;
    box-shadow: inset 0 0 1px #000;
    -moz-box-shadow: inset 0 0 1px #000;
    -webkit-box-shadow: inset 0 0 1px #000;
    border-radius: 10px 10px 0 0;
}
ul#navbar > li > a {
    display: block;
    font-size: 14px;
    text-decoration: none;
    color: #FFF;
    outline: 0;
    text-shadow: 0 -1px 0 #5A1E00;
}
ul#navbar > li:hover > a {
    color: #6A2300;
    text-shadow: 0 -1px 0 #FFF;
}
ul#navbar > li:hover .submenu {
    display: block;
}
/* common styles for submenus */
.submenu {
    display: none; 
    padding: 10px;
    background: #C9C9C9;
    background: -moz-linear-gradient(top, #C9C9C9, #F0F0F0); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C9C9C9), to(#F0F0F0));
    background: -o-linear-gradient(top, #C9C9C9, #FFFFF0);  
    position: absolute;
    text-align: left;
    box-shadow: 0 5px 3px #969696;
    -moz-box-shadow: 0 5px 3px #969696;;
    -webkit-box-shadow: 0 5px 3px #969696;
    border-right: 1px solid #886352;
    border-bottom: 1px solid #886352;
    border-left: 1px solid #886352;
}
/* <div> elements in submenus */
.submenu div {
    float: left;
    width: 230px;
    min-height: 150px;
    padding: 10px;
}
/* <h2> elements in submenus */
.submenu h2 {
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: bold;
    color: #6A2300;
    border-bottom: 1px solid #6A2300;
    text-shadow: 0 -1px 0 #FFF;
}
/* <img> elements in submenus */
.submenu img {
    float: left;
    margin-right: 15px;
    border: 4px solid #FFF;
    box-shadow: 0 0 2px #000;
}
/* <p> elements in submenus */
.submenu p {
    margin-bottom: 15px;
}
/* <a> elements in submenus */
.submenu a {
    color: #B33A00;
    text-decoration: none;
}
.submenu a:hover {
    text-decoration: underline;
}
/* submenu 1 */
.section1 {
    width: 505px;
    top: 43px;
    left: 0;
    border-radius: 0 10px 10px 10px;
}
/* submenu 2 */
.section2 {
    width: 750px;
    top: 43px;
    left: -100px;
    border-radius: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
    <header>   
        <h1>Building a mega drop-down menu with CSS</h1>
    </header>
    <nav>
        <ul id="navbar">
            <li>
                <a href="#">Section 1 &#9660;</a>
                <div class="submenu section1">
                    <div>
                        <h2>A heading element</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. <a href="#">Read more...</a></p>
                    </div>
                    <div>
                        <h2>Another heading element</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. <a href="#">Read more...</a></p>
                    </div>
                    <div>
                        <h2>A sample image with text</h2>
                        <img src="img1.jpg" width="100" height="100" alt="A sample image" />
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Read more...</a></p>
                    </div>
                    <div>
                        <h2>Another heading element</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. <a href="#">Read more...</a></p>
                    </div>
                </div>
            </li>
            <li>
                <a href="#">Section 2 &#9660;</a>
                <div class="submenu section2">
                    <div>
                        <h2>This is a heading element</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. <a href="#">Read more...</a></p>
                    </div>
                    <div>
                        <h2>Another heading element</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. <a href="#">Read more...</a></p>
                    </div>
                    <div>
                        <h2>A sample image with text</h2>
                        <img src="img2.jpg" width="100" height="100" alt="A sample image" />
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Read more...</a></p>
                    </div>
                    <div>
                        <h2>A sample image with text</h2>
                        <img src="img3.jpg" width="100" height="100" alt="A sample image" />
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Read more...</a></p>
                    </div>
                    <div>
                        <h2>Another heading element</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. <a href="#">Read more...</a></p>
                    </div>
                    <div>
                        <h2>Another heading element</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. <a href="#">Read more...</a></p>
                    </div>
                </div>
            </li>
        </ul>
    </nav>   
</div>
</body>
</html>

Mission accomplished. If you give the menu a try, (yes, you can use Internet Explorer as well), it should be rendered in the following way when you hover your mouse over some of its two primary sections:

That looks pretty good, doesnít it? And best of all, the menuís behavior has been implemented from top to bottom without having to rely on a single bit of JavaScript. Of course, thereís plenty of room to experiment with the menu and tweak it to satisfy more specific requirements. In this case, Iíll be somewhat lazy, and leave it as homework for you. So, get ready to have fun!

Closing Remarks

In this first part of a two-part tutorial, I showed you in a step-by-step fashion how to create a customizable mega-menu with CSS. As you just saw, the entire construction process was pretty straightforward, reduced to defining the menuís structure (in this case, a simple unordered list including a set of divs), and then styling the main containers and the elements wrapped by them, such as headers, paragraphs, hyperlinks and so forth.

As of now, the menu only contains a couple of fictional sections. They're pretty illustrative, at least for example purposes. Itís fairly simple, though, to add a few more, while keeping the existing CSS code untouched. So, assuming that youíre interested in learning how to accomplish this, in the last chapter Iíll be appending some extra sections to the menu, so that you can see how easy it is to extend its initial structure.

Donít miss the final part!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials