Slicknav tạo menu nhiều cấp responsive và tự động đóng các menu item khác khi một item active

Thảo luận trong 'JAVASCRIPTS' bắt đầu bởi xman, 12/11/15.

  1. xman

    xman Administrator Thành viên BQT

    Tham gia ngày:
    6/7/15
    Bài viết:
    44
    Đã được thích:
    2
    Điểm thành tích:
    8
    Slicknav có chức năng rất hay đó là tự động copy menu gốc và chuyển sang menu tương thích với giao diện mobile responsive. Ngoài ra nó còn có nhiều tính năng hay như có thể gắn vào element nào đó, đặt tên cho menu hoặc tạo logo brand nằm bên trái thanh menu khi ở giao diện mobile...

    Các lựa chọn tùy chỉnh các bạn có thể tham khảo thêm tại: https://github.com/ComputerWolf/SlickNav

    Điểm hạn chế là nếu menu của bạn quá nhiều nó sẽ khiến bạn phải cuộn màn hình xuống chứ không tự đóng các menu khác lại. Bài viết này sẽ giúp bạn khắc phục nhược điểm đó.

    Tạo html như sau:

    Mã:
    <ul id="menu">
        <li>Parent 3
            <ul>
                <li><a href="#">item 3</a></li>
                <li>Parent 3
                    <ul>
                        <li><a href="#">item 8</a>
                      <ul>
                        <li><a href="#">item 8</a></li>
                        <li><a href="#">item 9</a></li>
                        <li><a href="#">item 10</a></li>
                    </ul>
                      </li>
                        <li><a href="#">item 9</a></li>
                        <li><a href="#">item 10</a></li>
                    </ul>
                </li>
                <li><a href="#">item 4</a></li>
            </ul>
        </li>
        <li><a href="#">item 1</a></li>
        <li>non-link item</li>
        <li>Parent 4
            <ul>
                <li><a href="#">item 5</a></li>
                <li><a href="#">item 6</a></li>
                <li><a href="#">item 7</a></li>
            </ul>
        </li>
    </ul>
    
    Javascript khai báo:

    Mã:
    
            $('#nav').slicknav({
                label: 'MENU',
                duration: 150,
                allowParentLinks: true,
                'afterOpen': function(trigger){
                  $('a.slicknav_item').click(function(){
                      $(this).siblings('ul').show();
                      $(this).parent('li.slicknav_parent').siblings().removeClass('slicknav_open').addClass('slicknav_collapsed').children('ul').slideUp().addClass('slicknav_hidden');
                    });
            },
            //closeOnClick:true
            });
    
    Test thử và tận hưởng thành quả :))
     

Chia sẻ trang này