Home arrow Style Sheets arrow CSS3 Accordian Menu: Horizontally Display Hyperlinks
STYLE SHEETS

CSS3 Accordian Menu: Horizontally Display Hyperlinks


Web designers can choose between many options today when adding an appealing navigation bar to a website. Whether you're planning to build up a plain vanilla menu, or create more complex navigational structures, such as hierarchical drop-downs, mega-menus and flyouts, chances are that you can tackle the entire implementation process with confidence. Animated navigation bars, however, are another story.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
February 13, 2012
TABLE OF CONTENTS:
  1. · CSS3 Accordian Menu: Horizontally Display Hyperlinks
  2. · Defining the menu’s look and behavior with CSS styles

print this article
SEARCH DEVARTICLES

CSS3 Accordian Menu: Horizontally Display Hyperlinks
(Page 1 of 2 )

Indeed, things get more complicated when it’s necessary to construct a navigation bar (in any of its abundant flavors) that displays some form of animated behavior. In many cases, the process requires you to work with the complexities of raw JavaScript, or to climb the learning curve of one of the many JavaScript libraries available. 

A good example of such a situation is the development of the so-called “accordion” menus. There are jQuery plug-ins that allow you to build these popular user interfacing elements quickly and unobtrusively, while leaving the markup clear and pristine. Sometimes, however, it's overkill to include the entire library along with the corresponding plug-in, when  you're only creating a menu. 

This doesn’t mean, though, that constructing a dynamic, JavaScript-independent accordion menu is impossible. What’s more, a proper combination of clean HTML and the functionality provided by a few CSS3 properties is all that you’ll need to get the menu up and running on most modern browsers (including Internet Explorer, albeit with some limitations addressable through Progressive Enhancement).

Given that, in this two-part tutorial I’ll be explaining in a step-by-step fashion how to build a couple of attractive CSS-based accordion menus, which you’ll be able to tweak at will to fit your personal requirements.

Ready to learn the fine details of this process? Then move on and start reading!

Taking the first step: building the menu’s bare bones structure

As you know, most accordion menus come in two versions. In one, the main links are positioned horizontally, while the other features vertical placement of these links. As I said at the beginning, in this tutorial I plan to cover the construction of both types. But, to keep things a bit more organized and easy to follow, in this first part I’ll be discussing the implementation of the former.

Having clarified that, the first step is to create the menu’s structure, which will rest on an unordered HTML list. Here is the web page that creates this skeletal structure:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating a vertical accordion with CSS</title>
</head>
<body>
<div id="wrapper">
    <header>   
        <h1>Creating a vertical accordion with CSS</h1>
        <h2>Header section</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. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </header>   
    <section>
        <h2>Content section</h2>   
        <ul id="vertical-accordion">
            <li>
                <h3>About Us</h3>   
                <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. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </li>
            <li>
                <h3>Products</h3>   
                <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. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </li>
            <li>
                <h3>Services</h3>   
                <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. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </li>
            <li>
                <h3>Clients</h3>   
                <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. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </li>
            <li>
                <h3>Contact</h3>   
                <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. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </li>
        </ul>  
    </section>
    <footer>
        <h2>Footer section</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. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
    </footer>
</div>
</body>
</html>

The menu’s structure is pretty clean. It’s composed only of a few fictional sections (the classic “About Us,” “Products,” and “Services” links, which you’ve seen hundreds of times before). With this markup defined, the next step is to provide the menu with a neat “accordion” behavior. This means that when the menu is displayed, the contents of each section will be collapsed (hidden) initially, and expanded only when a user's cursor is hovering on the corresponding link.

Sounds like a complicated process, right? Well, it isn't really. In fact, thanks to the functionality provided by CSS3 transitions, this can be achieved in a few easy steps. Of course, I must back up this statement with functional code samples, so in the next section I’ll be showing you the ones that will bring the menu to life, aside from improving its look.

Now, jump ahead and read the lines to come.  


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