Jquery

Accordion menu với Jquery

Accordion menu cũng là một dạng menu phổ biến được sử dụng nhiều trong các website hiện đại, nhìn khá là bắt mắt và làm cho trang web của bạn tiết kiệm khá nhiều không gian. Hơn nữa hiệu ứng accordion không chỉ sử dụng với menu mà có thể áp dụng trong hình ảnh và nội dung nữa.
Về cơ bản, Accordion menu hoạt động theo nguyên lý hiện ra phần nội dung đầu tiên và ẩn các nội dung còn lại. Khi người dùng tương tác với các phần nội dung tiếp theo, thì phần đó sẽ hiện ra và phần trước đó sẽ ẩn đi.

Các bạn có thể xem trước demo tại đây

Đây là đoạn mã HTML được sử dụng trong demo trên

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div id="wrapper"><dl><dt><a class="active" href="#">Home</a></dt><dd>
<ul>
    <li><a href="#">About me</a></li>
    <li><a href="#">Contact me</a></li>
    <li><a href="#">Blogroll</a></li>
    <li><a href="#">Site map</a></li>
</ul>
</dd><dt><a href="#">Web-design</a></dt><dd>
<ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">xHTML</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">Jquery</a></li>
    <li><a href="#">Flash</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">ASP.net</a></li>
    <li><a href="#">Services</a></li>
</ul>
</dd><dt><a href="#">Computer</a></dt><dd>
<ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Computer Network</a></li>
    <li><a href="#">Tips</a></li>
    <li><a href="#">Reviews</a></li>
</ul>
</dd><dt><a href="#">Links & Resources</a></dt><dd>
<ul>
    <li><a href="#">Graphic</a></li>
    <li><a href="#">Icon</a></li>
    <li><a href="#">Font</a></li>
    <li><a href="#">Webdesign tuts</a></li>
</ul>
</dd><dt><a href="#">Freebies</a></dt><dd>
<ul>
    <li><a href="#">Domain</a></li>
    <li><a href="#">Hosting</a></li>
    <li><a href="#">Themes</a></li>
    <li><a href="#">License</a></li>
</ul>
</dd></dl></div>

Đây là đoạn mã Jquery, các bạn hãy viết đoạn mã này ở file header

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
     <script type="text/javascript">
        $(document).ready(function() {
            $('dd:not(:first)').hide();
            $('dt a').click(function()  {
                $('dd:visible').slideUp('slow');
                $(this).parent().next().slideDown('slow');
                return false;
            });
        });
     </script>

Để giải thích cho đoạn mã này rất đơn giản

1
$('dd:not(:first)').hide();

Đoạn code giúp bạn hiện thị phần nội dung đầu tiên và ẩn các nội dung còn lại, nếu dịch code ra thì sẽ có ý nghĩa là: ” Nều không phải là phần thứ nhất sẽ bị ẩn đi”.

1
2
$('dd:visible').slideUp('slow');
$(this).parent().next().slideDown('slow');

2 đoạn code này sẽ giúp các bạn cùng lúc hiện thị nội dung mới và ẩn đi nội dung cũ

Đây là đoạn code CSS mình sử dụng cho demo ở trên

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
* { margin: 0; padding: 0;}
        body {
            font-family: arial, Georgia, sans-serif;
            font-size: 12px;
        }
        #wrapper {
            width: 500px;
            margin: 20px auto;
        }
        dl  {
            width: 250px;
        }
        dt{
            background: #3b3b3b;
            border-bottom: 1px solid white;
            font-size: 14px;
            padding: 5px 0px;
        }
        dt a {
            color: white;
            text-decoration: none;
            padding: 0px 18px;
        }
        dd a {
            color: black;
        }
        ul {
            list-style: none; padding: 5px;
        }

Trong bài kế tiếp mình sẽ nói về Tab-navigation, nó cũng khá giống với Accordion menu, nhưng mình sẽ nói thêm về cách các bạn phát hiện thành phần nào đang active và thành phần nào đang deactive, nó sẽ giúp các bạn tạo ra sự khác biệt khi style

Chúc các bạn thành công

Nguồn : http://josnguyenblog.com

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s