Home arrow Style Sheets arrow 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
(Page 1 of 2 )

With a long and prosperous existence, drop-down menus are one of the most popular user interface elements on the web. Thanks to the support added by Internet Explorer for the ď:hoverĒ CSS pseudo-class for multiple HTML elements a few years ago (you know, not only for <a> tags), such menus can be implemented in a cross-browser fashion, without using JavaScript (in a nice evolution of the classic suckerfish dropdown).

As with many other things in life, though, dropdowns evolved naturally to more complex structures, often composed of multiple nested levels. This evolution, sadly, dramatically reduced their accessibility. Before long, these harmless, inoffensive menus quickly turned into hard-to-tame creatures that intimidated even the bravest users who dared to navigate their twisted branches. For obvious reasons, it was imperative to fix most of these issues with cleaner and more accessible structures. And the sooner, the better.

Consequently, a new breed of dropdowns called mega-menus emerged. They behave like classic dropdowns, but the contents of several of their sections were accommodated in larger, single-level containers, instead of with multiple hierarchies. But, was this the best solution to all of the previous problems? Not exactly. However, mega-menus are much more efficient than their predecessors, especially at organizing sets of related topics in a logical and accessible way.

Furthermore, even though the term ďmegaĒ may sound somewhat overwhelming, building a stylish mega dropdown is actually much easier than you might think. As usual, the best way to give you proof of my claim is by example; so in this two-part tutorial Iíll be creating a sample mega-menu with CSS. You'll be able to tweak it with minor effort to fit your personal requirements.

Now, let's leave the dull theory behind and start building that mega menu!

Getting started: defining the menuís structural markup

The first step to implementing the aforementioned mega-menu consists of defining its structural markup. In this initial example, the menu will contain only a couple of trivial sections; however, in the next part Iíll demonstrate how to add a few more.

Now that I've explained that, please take a look at the following web page. It defines the menuís bare bones structure:

<!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>
</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>

Similar to a classic dropdown, the structure of the above mega-menu rests on a plain unordered list, whose items wrap the containers corresponding to each section. In this case, I decided to use some divs to define the pertinent sections, but you may want to utilize <section> HTML5 elements to further emphasize the menuís semantic meaning. You may have noticed that some of these sections contain a few sample images, too. Donít worry; I've included them for you below: 

So far, so good. At this point, itís clear to see that the skeleton of this sample mega-menu resembles that of a common dropdown. In this case, however, each section is a big container that houses multiple elements, such as headers, paragraphs and images. With this structure up and running, the next logical step is to spice it up with some CSS styles, so that it will look like an ďactualĒ menu.

The details of this cosmetic process will be discussed in the next section, so click on the link below and keep reading. 


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