Tạo Menu Accordion đơn giản với JQuery và CSS3

Accordion Menu hiện nay khá phổ biến với thiết kế web hiện tại, vì ngoài việc là một menu, nó có thể tùy biến để hiện thị nội dung, hình ảnh một cách rất chuyên nghiệp...

Bạn chỉ cần tìm từ khóa Accordion Menu là ra rất nhiều plugin, tuy nhiên bạn cũng có thể xây dựng riêng cho mình một Accordion Menu một cách rất đơn giản và gọn nhẹ.

Xin chia sẽ đến các bạn một đoạn code giúp tạo ra một menu Accordion ấn tượng với jQuery và CSS3 đơn giản. Ưu điểm của loại menu này là có thể tiết kiệm cho bạn nhiều khoảng không gian trên trang web của bạn hơn. Đoạn code dưới đây rất đơn giản nhưng cũng hiều quả và có ích cho bạn đấy, giờ mình cùng xem qua nhé.

Xem DEMO

Mã HTML:

<div id='accordion'>
    <h2>Panel 1</h2>
    <div class='content'>
        Nội dung Panel 1
    </div>
    <h2>Panel 2</h2>
    <div class='content'>
        Nội dung Panel 2
    </div>
    <h2>Panel 3</h2>
    <div class='content'>
        Nội dung Panel 3
    </div>
    <h2>Panel 4</h2>
    <div class='content'>
        Nội dung Panel 4
    </div>
</div>

Mã JQuery:

$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Mã CSS:

#accordion {
 width:90%;
 margin:10px auto;
 border:2px solid white;
 -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#accordion h2 {
 cursor:pointer;
 margin:0px 0px;
 padding:7px 15px;
 background-color:black;
 font:bold 11px Verdana,Arial,Sans-Serif;
 color:#e6e6e6;
 text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

#accordion .content {
 background-color:#ddd;
 padding:10px 15px;
 color:black;
 height:auto;    
}

#accordion h2.active {
 background-color:#4BB347;   
}

Như vậy là ta vừa tạo xong 1 Menu Accordion đơn giản rồi. Chúc bạn thành công !