Tạo Responsive Menus từ thẻ UL với ReSmenu

ReSmenu là một jQuery plugin cho phép chúng ta dễ dàng tạo chức năng responsive cho menu chỉ với một nốt nhạc. Plugin này rất nhẹ (chỉ khoảng 1kb) , dễ tùy chỉnh và có nhiều lựa chọn cho việc hiển thị menu.

Giả sử chúng ta có một menu được tạo thành từ các thẻ html như sau :

<div class="menu_container">

    <ul class="toresponsive">

        <li><a href="/">Home</a></li>

        <li class="current-menu-item"><a href="test.htm">Link</a></li>

        <li><a href="test.htm">Link 2</a></li>

        <li><a href="test.htm">Link 3</a></li>

        <li><a href="test.htm">Link 4</a></li>

    </ul>

</div>

Để sử dụng , trước hết chúng ta cần chèn thư viện jQuery và plugin này vào :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="jquery.resmenu.min.js"></script>

Và để menu có khả năng responsive , thì chúng ta chỉ việc khai báo đơn giản như sau :

$(window).ready(function () {

    $('.toresponsive').ReSmenu();

});

Nếu các bạn muốn có thêm lựa chọn cho việc hiển thị menu , thì sử dụng những lựa chọn như sau :

$('.toresponsive').ReSmenu({

    menuClass:    'responsive_menu',   // Responsive menu class

    selectId:     'resmenu',          // select ID

    textBefore:   false,               // Text to add before the mobile menu

    selectOption: false,               // First select option

    activeClass:  'current-menu-item', // Active menu li class

    maxWidth:     480                  // Size to which the menu is responsive

});

Để menu định dạng tốt hơn, chúng ta sẽ sử dụng thêm đoạn css sau :

.responsive_menu select {

    display: block;

    width: 100%;

    height: 36px;

    padding: 6px 12px;

    font-size: 14px;

    line-height: 1.42857;

    color: rgb(85, 85, 85);

    vertical-align: middle;

    background-color: rgb(255, 255, 255);

    background-image: none;

    border: none;

}

Thế là xong, mình hy vọng các bạn sẽ cảm thấy hài lòng khi sử dụng plugin mà mình giới thiệu trong bài viết này. Các bạn cũng có thể tham khảo thêm bài viết Từng bước tạo Responsive Menu với CSS và jQuery.