Acordeon com JQuery 2

<< Click to Display Table of Contents >>

Navigation:  Acordeon >

Acordeon com JQuery 2

Previous pageReturn to chapter overviewNext page

Fonte

 

http://viralpatel.net/blogs/2009/09/create-accordion-menu-jquery.html

 

Descrição

 

Let us create a simple Accordion Menu using jQuery. Accordion Menu are the menu with some animation effect. It has few top line menu items which when clicked toggles to open sub menu options. When another top level menu is selected, other open menu will automatically collapse and save useful screen area. We will use jQuery effects to animate the accordion menu. jQuery provides Fade In/Fade Out effect, but accordion menu looks more realistic if we use Slide In / Slide Out effect.

 

Imagem

 

accordion-menu-example

 

Step 1: Create HTML for your Menu

 

First we will create HTML for displaying out Menu. We will use List in HTML to render the menu and then we will use CSS to apply some style. Following will be our Menu code:

 

<ul id="accordion">

    <li><div>Sports</div>

        <ul>

            <li><a href="#">Golf</a></li>

            <li><a href="#">Cricket</a></li>

            <li><a href="#">Football</a></li>

        </ul>

    </li>

    <li><div>Technology</div>

        <ul>

            <li><a href="#">iPhone</a></li>

            <li><a href="#">Facebook</a></li>

            <li><a href="#">Twitter</a></li>

        </ul>

    </li>

    <li><div>Latest</div>

        <ul>

            <li><a href="#">Obama</a></li>

            <li><a href="#">Iran Election</a></li>

            <li><a href="#">Health Care</a></li>

        </ul>

    </li>

</ul>

 

If you check the HTML page now it should look something like:

 

html-menu-list

 

Step 2: Apply some style to your Menu using CSS

 

Lets apply some stylesheet to our menu. Copy following CSS code in your HTML file:

 

#accordion {

    list-style: none;

    padding: 0 0 0 0;

    width: 170px;

}

#accordion div {

    display: block;

    background-color: #FF9927;

    font-weight: bold;

    margin: 1px;

    cursor: pointer;

    padding: 5 5 5 7px;

    list-style: circle;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

#accordion ul {

    list-style: none;

    padding: 0 0 0 0;

}

#accordion ul{

    display: none;

}

#accordion ul li {

    font-weight: normal;

    cursor: auto;

    background-color: #fff;

    padding: 0 0 0 7px;

}

#accordion a {

    text-decoration: none;

}

#accordion a:hover {

    text-decoration: underline;

}

 

Note that in above CSS code, we have applied Round Corner CSS to our menu to improve the look. Although this technique works with all the modern web browser, but it will not work with Internet Explorer. If we want to change the look n feel for internet explorer, we may want to include IE-Specific stylesheet to our HTML page.

Once we apply the stylesheet, our menu will look like:

 

accordion-menu-stylesheet

 

Step 3: Give life to your Menu using jQuery

 

So our basic skeleton is complete. We have used HTML code to display the Accordion menu content and then have applied CSS stylesheet to improve the usability. Let us add life to this accordion menu using jQuery. Copy following jQuery code to the HTML page:

 

$("#accordion > li > div").click(function(){

 

    if(false == $(this).next().is(':visible')) {

        $('#accordion ul').slideUp(300);

    }

    $(this).next().slideToggle(300);

});

 

$('#accordion ul:eq(0)').show();

 

If you notice the above code, we have made the first menu item in accordion menu visible.

 

$('#accordion ul:eq(0)').show();

 

To make a menu item visible by default, just add its index value to the above code. For example to display 1st menu item we added eq(0) in above code.

 

Online Demo

No article is complete without an online demo. Here is the online demo for Accordion Menu.