Home arrow Style Sheets arrow Page 2 - 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 - Defining the menuís look and behavior with CSS styles
(Page 2 of 2 )

As I anticipated in the preceding section, itís really simple to turn the static HTML list defined earlier into a dynamic, customizable accordion menu. The entire ďconversionĒ process is reduced to collapsing/expanding each section of the menu through some CSS3 transitions, and nothing more.

As usual, the best way to understand this is by examining some concrete CSS code. Thus, be sure to look at the snippet below, which makes the menu work as intended. Here it is:

ul#vertical-accordion {
    list-style: none;
    width: 300px;
    height: 350px;
    margin: 0;
    padding: 0;  
}
ul#vertical-accordion li {
    width: 300px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: #F2FBFC;
    overflow: hidden;
    transition: height 1.5s ease;
    -moz-transition: height 1.5s ease;
    -webkit-transition: height 1.5s ease;
    -o-transition: height 1.5s ease;
}
ul#vertical-accordion li h3 {
    height: 19px;
    margin: 0;
    padding: 10px;
    background: #04BCD7;
    background: -moz-linear-gradient(top, #04BCD7, #0595AB);
    background: -webkit-gradient(linear, left top, left bottom, from(#04BCD7), to(#0595AB));
    text-decoration: none;
    text-transform: uppercase;
    color: #C9fCFB;
    text-shadow: 1px 1px 0 #016770;                 
}
ul#vertical-accordion li p {
    height: 200px;
    margin: 10px;
    padding: 10px;
    overflow: auto;
}
ul#vertical-accordion li:hover {
    height: 200px;
}
ul#vertical-accordion li:hover h3 {
    background: #06DDFC;
    background: -moz-linear-gradient(top, #06DDFC, #AfEFF9);
    background: -webkit-gradient(linear, left top, left bottom, from(#06DDFC), to(#AfEFF9));
    color: #FFF;  
}
ul#vertical-accordion li h3:hover {
    cursor: pointer;
}

Aside from defining the look of each link in the menu, the above code snippet takes advantage of the functionality offered by the ďtransitionĒ CSS3 property to display/hide the corresponding sections. In this case, this is accomplished by shrinking and expanding the height assigned to the pertinent sections, thus creating the so-called ďaccordionĒ effect. Needless to say, this effect wonít be displayed on Internet Explorer, but at least itíll be shown as a common CSS hover, which can be improved via JavaScript.

So far, so good. At this point, Iím pretty certain that you've grasped how the accordion menu has been implemented. But wait a second! In its current version, it looks somewhat disconnected, as itís necessary to bind the CSS code to the menuís markup.

This will be done below.     

The finished menu

If you want to test the accordion menu to see if it actually works as expected, below I included its full source code. Check it out:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating a vertical accordion 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: #036E7E;
}
h2 {
    font-size: 2em;
    font-weight: bold;
    color: #036E7E;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
ul#vertical-accordion {
    list-style: none;
    width: 300px;
    height: 350px;
    margin: 0;
    padding: 0;  
}
ul#vertical-accordion li {
    width: 300px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: #F2FBFC;
    overflow: hidden;
    transition: height 1.5s ease;
    -moz-transition: height 1.5s ease;
    -webkit-transition: height 1.5s ease;
    -o-transition: height 1.5s ease;
}
ul#vertical-accordion li h3 {
    height: 19px;
    margin: 0;
    padding: 10px;
    background: #04BCD7;
    background: -moz-linear-gradient(top, #04BCD7, #0595AB);
    background: -webkit-gradient(linear, left top, left bottom, from(#04BCD7), to(#0595AB));
    text-decoration: none;
    text-transform: uppercase;
    color: #C9fCFB;
    text-shadow: 1px 1px 0 #016770;                 
}
ul#vertical-accordion li p {
    height: 200px;
    margin: 10px;
    padding: 10px;
    overflow: auto;
}
ul#vertical-accordion li:hover {
    height: 200px;
}
ul#vertical-accordion li:hover h3 {
    background: #06DDFC;
    background: -moz-linear-gradient(top, #06DDFC, #AfEFF9);
    background: -webkit-gradient(linear, left top, left bottom, from(#06DDFC), to(#AfEFF9));
    color: #FFF;  
}
ul#vertical-accordion li h3:hover {
    cursor: pointer;
}
</style>
</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>

Done. If at this moment, you launch your browser and give the menu a try, this is how it should look in the collapsed and expanded states:

Not too bad, right? Since the menuís dynamic behavior was accomplished by means of a pure CSS-based approach, the result is more than acceptable. Moreover, itís dead simple to tweak its default appearance and even change the easing algorithm used to animate the corresponding sections. Therefore, if you feel adventurous and want to create your own version of this accordion menu, thereís plenty of room to tackle the process and finish it successfully.    

Final Thoughts

In this first part of a two-part tutorial, I demonstrated that building a dynamic accordion menu with CSS3 is in fact much easier than one might think. As you just saw, getting the menu up and running only required us to create a plain HTML list and then animate it accordingly through some CSS transitions. The entire construction process was that simple, really.

In the previous example, the menuís links were positioned horizontally, which is pretty common to see these days. Itís possible (and easy, by the way) to create a menu where the links are shown vertically, while preserving the same accordion behavior.

The details regarding how to create this catchy variation will be covered in the final part, so follow my usual recommendation and donít miss it!


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