Tạo Accordion Menu đơn giản với CSS & jQuery

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... và rất tiết kiệm không gian khi hiển thị trên web. Hiện tại bạn chỉ cần gõ Accordion Menu là ra rất nhiều plugin, tuy nhiên bạn 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ẹ. Bài viết này sẽ hướng dẫn các bạn làm điều đó.

1. Nội dung HTML

<div style="padding: 20px;">
            <h1><a href="http://thuyvk.com">Thuyvk's Blog</a>  | Demo Accordion Menu</h1>
            <ul class="ulWrapper">
                <li>
                    <a href="javascript:void(0)" class="aParent">HTML & CSS</a>
                    <ul class="ulChildrent tabHTML_Content">
                        <li>
                           <a href="#" target="_blank">&bull;&nbsp;Tạo file reset css cho website</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Tạo menu nhanh chóng với CSS Menu Maker</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Top 10 Add-on Firefox dành cho người thiết kế web</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Tạo file reset css cho website</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Tạo menu nhanh chóng với CSS Menu Maker</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Top 10 Add-on Firefox dành cho người thiết kế web</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)" class="aParent">Thiết kế web</a>
                    <ul class="ulChildrent">
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Xu hướng thiết kế website năm 2013</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Những thiết kế trang web lỗi 404 rất ấn tượng</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Xu hướng thiết kế website năm 2013</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Những thiết kế trang web lỗi 404 rất ấn tượng</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)" class="aParent">Jquery</a>
                    <ul class="ulChildrent">
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Tổng hợp các jQuery plugin về thanh cuộn</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Tổng hợp jQuery giúp bạn tối ưu hoá Layout</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Tổng hợp các jQuery plugin về thanh cuộn</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Tổng hợp jQuery giúp bạn tối ưu hoá Layout</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0)" class="aParent">ASP.NET & ASP MVC</a>
                    <ul class="ulChildrent">
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Nén HTML và tối ưu hóa mã javascript cho website Asp.Net</a>
                        </li>
                        <li>
                            <a href="#" target="_blank">&bull;&nbsp;Một số cấu hình file web.config an toàn</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

2. Mã CSS

<style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 16px;
        }

        .ulWrapper
        {
            width: 450px;
            display: block;
            float: left;
            background-color: #0092D8;
            padding: 10px 10px 10px 30px;
        }

            .ulWrapper li
            {
                color: #fff;
                width: 100%;
                display: block;
                float: left;
            }

                .ulWrapper li a
                {
                    color: #fff;
                    text-decoration: none;
                }

                    .ulWrapper li a:hover
                    {
                        text-decoration: underline;
                         color: yellow;
                    }

                    .ulWrapper li a.aParent
                    {
                        font-weight: bold;
                        width: 100%;
                        display: block;
                        float: left;
                        padding: 5px 0;
                    }

        .ulChildrent
        {
            width: 100%;
            display: block;
            float: left;
        }

            .ulChildrent li
            {
                padding: 3px 0;
                width: 100%;
                display: block;
                float: left;
            }

                .ulChildrent li a
                {
                    font-size: 12px;
                }
    </style>

3. Mã Javascript

<script src="script/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Ẩn nội dung các menu con, trừ cái đầu tiên
            $('.ulWrapper li:gt(0) .ulChildrent').hide();
            //Sự kiện khi click vào 1 men cha
            $('.aParent').click(function () {
                //ẩn toàn bộ các menu con
                $('.ulChildrent').slideUp();
                //hiện menu con của menu cấp 1 hiện tại được click
                $(this).parent('li').find('.ulChildrent').slideDown();
            });
        });
    </script>

4. Tổng kết.

- Ý tưởng xây dựng menu này khá đơn giản. Đầu tiên bạn cần tạo một đoạn mã HTML có cấu trúc 2 cấp bằng cách sử dụng các thẻ ul, li (bạn có thể sử dụng thẻ khác), sau đó viết mã css theo ý bạn.

- Sau khi đã có mã HTML & CSS hoàn chỉnh, ta tiến hành viết mã javascript để hoàn thiện chức năng slideUp & slideDown mỗi khi click vào một menu cấp 1. Ở lần load đầu tiên của trang, bạn cho tất cả các menu con ẩn đi, trừ menu con thứ nhất. Sau đó khi người dùng click vào mỗi menu cấp 1 (menu cha) thì sẽ thực hiện ẩn toàn bộ menu con với hiệu ứng slideUp(), và hiện menu con của menu cha đang được click với hiệu ứng slideDown().

- Các bạn có thể xem demo của bài viết này tại đây, hoặc tải code đầy đủ ở file đính kèm

Download Source

Related Post


Tổng hợp các jQuery plugin về thanh cuộn
Tuesday, September 3, 2013
Thanh cuộn Scrollbar dùng để cuộn nội dung trang web khi vượt quá chiều cao cho phép, tuy nhiên trong một vài trường hợp style mặc định không phù hợp với mẫu thiết kế chúng ta đang sử dụng, và việc chỉnh sửa style của scrollbar không đơn giản như các phần tử HTML khác. Để giải quyết vấn đề này, các bạn hãy tham khảo một số jQuery plugin về thanh cuộn sau...  
Tổng hợp jQuery giúp bạn tối ưu hoá Layout
Saturday, August 31, 2013
     Xu hướng thiết kế web năm 2012 có để cập đến Responsive Layout, tức là một website phải đáp ứng tốt cho việc hiển thị ở những màn hình kích thước đa dạng khác nhau như trên PC, điên thoại di động, máy tính bảng. Hãy xem qua 20 jQuery mà chúng tôi vừa mới tổng hợp, nó sẽ giúp bạn tối ưu hoá và tuỳ biến kích thước cho website của bạn.
Search

Đăng ký nhận bài mới


Category

Blog Archive