Home arrow Style Sheets arrow Page 2 - CSS Mega Menus: Adding Extra Sections
STYLE SHEETS

CSS Mega Menus: Adding Extra Sections


Creating a mega menu from scratch with CSS is a fairly straightforward task. If you're used to building "classic" (or even multi-level) drop-downs, you'll find the process easy to grasp, as the logic for both kinds of menus is very similar.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
March 14, 2012
TABLE OF CONTENTS:
  1. · CSS Mega Menus: Adding Extra Sections
  2. · Adding the CSS to the menu

print this article
SEARCH DEVARTICLES

CSS Mega Menus: Adding Extra Sections - Adding the CSS to the menu
(Page 2 of 2 )

Defining the appearance of the three sections just added to the menu is only a matter of creating the aforementioned "section3," "section4," and "section5" CSS classes and nothing else, as there's no need to alter the rest of the existing styles.

As usual, the best way to grasp the inner workings of this process is through examining concrete code examples. Thus, be sure to check the one listed below, which includes the definition of these brand new sections:

/* 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;
}
/* styles for highlights */
.highlights {
    background: #A9A8A8;
    border-radius: 10px;
}
/* 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;
}
/* submenu 3 */
.section3 {
    width: 500px;
    top: 43px;
    left: -200px;
    border-radius: 10px;
}
/* submenu 4 */
.section4 {
    width: 750px;
    top: 43px;
    left: -320px;
    border-radius: 10px;
}
/* submenu 5 */
.section5 {
    width: 250px;
    position: absolute;
    top: 43px;
    left: -85px;
    border-radius: 10px;
}

As you can see, most of the styles attached to the menu have remained exactly the same. The only detail worth noting here is the inclusion of the classes responsible for defining the look of the aforementioned sections. In fact, these classes perform a few simple tasks, such as specifying the width of each section, and the values of its "top" and "left" coordinates. It's nothing too complex, actually.

All in all, at this point I assume that you've already grasped how the previous CSS snippet does its thing, since this was discussed in depth in the previous article. In light of this, the next step is to append the styles to the mega menu's markup, so you can give it a try using your browser.

This will be accomplished in next section, so keep reading. 

Listing the menu's full source code

As I promised, below I included the mega menu's full source code, so you can test it and see if it's as functional as it seems. 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;
}
/* styles for highlights */
.highlights {
    background: #A9A8A8;
    border-radius: 10px;
}
/* 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;
}
/* submenu 3 */
.section3 {
    width: 500px;
    top: 43px;
    left: -200px;
    border-radius: 10px;
}
/* submenu 4 */
.section4 {
    width: 750px;
    top: 43px;
    left: -320px;
    border-radius: 10px;
}
/* submenu 5 */
.section5 {
    width: 250px;
    position: absolute;
    top: 43px;
    left: -85px;
    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>
            <li>
                <a href="#">Section 3 &#9660;</a>
                <div class="submenu section3">
                    <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>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="img4.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 class="highlights">
                        <h2>This is a text box</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>
            <li>
                <a href="#">Section 4 &#9660;</a>
                <div class="submenu section4">
                    <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>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>
                        <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="img4.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 text box</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="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>
            </li>
            <li>
                <a href="#">Section 5 &#9660;</a>
                <div class="submenu section5">
                    <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>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>
            </li>
        </ul>
    </nav>   
</div>
</body>
</html>

Done. Provided that you grabbed the sample images included in the previous article (if you haven't done so already, you can fetch them from the first part of this tutorial), simply launch your browser and give the menu a try. If all went well, it should be rendered in the following way when hovering on its primary items:

After adding the brand new sections to it, the menu looks like a real mega drop-down. It's worth pointing out, however, that while the menu in its current state will work as expected on most modern browsers, it's possible to enhance its accessibility a bit further. Since each section will be displayed immediately via CSS hovers, you may want to programmatically delay these events. You can do this either with plain JavaScript, or with some jQuery plug-ins, such as the popular hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html). 

Final Thoughts

We've come to the end of this educational journey on building a fully-customizable mega menu with CSS. As you saw for yourself, the construction of this popular user interface structure is in fact much easier than it might appear at first glance. The menu's behavior was even implemented by means of plain CSS hovers, which is a big bonus, as it wasn't necessary to deal with the complexities of JavaScript.

If you're planning to add a refreshing touch to your own or your customers' websites by way of an eye-catching mega menu, the examples included in this two-part tutorial should put you quickly on the path to success.

See you in the next web design tutorial!


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