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

To back up this idea, in the first part of this two-part tutorial I implemented a sample mega menu. In that initial incarnation, the mega menu featured only a couple of fictional sections.

Even though the sections included just a few common HTML elements, such as some H2 headers, paragraphs and links, they demonstrated how easy it is to semantically define the skeleton of a mega menu. Of course, something that carries the term "mega" on its shoulders must be huge enough in size to fully honor such a distinction, right?

Well, since the first implementation of my example menu was made up of two isolated sections, it's time to turn it into a true navigational "mega" structure! In the next few lines I'll be adding some extra sections to the menu, to dramatically extend its current structure. And I'll pull this off in just a few easy steps. So let's get going.

Extending the mega menu's current markup

If you've read the first part of this tutorial, you already have a clear idea of how to append some additional sections to the existing structure of the mega menu. The process is actually as simple as modifying the menu's markup, so it can represent these brand new sections on the web page.

Does this sound somewhat confusing to you? Don't worry; just take a look at the following code fragment, which adds three extra sections to the ones defined previously. 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>
</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>

While the above web page's markup is rather lengthy, it's nearly as simple as it was before, believe me. The menu now includes three additional sections, which have been assigned a set of classes called "section3," "section4," and "section5," respectively. This subtle modification allows us to set up the structure required by a "true" mega menu (yes, I'm being ironic, in case you didn't notice it).

So far, so good. Now that you understand how the new sections were appended to the menu's markup, the next logical step is to polish them with CSS, so that they can be hidden and displayed when a user hovers the cursor over the primary items.

To see how this will be done, click on the link below and read the next section.


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