Hướng dẫn tạo Responsive Menus từ thẻ UL với ReSmenu

Xem: 1229    Tải: 2   Thảo luận: 0   Mục: Javascript   Lĩnh vực: none

0 điểm   ( 4 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]huong-dan-tao-responsive-menus-tu.rar (3.81 KB)
Phí tải ~ 2,000 đ
Live Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-responsive-menus-tu.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

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.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

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.

Hướng dẫn tạo Responsive Menus từ thẻ UL với ReSmenu

Hướng dẫn tạo Responsive Menus từ thẻ UL với ReSmenu Đăng ngày 22-08-2014  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. 5/10 1229

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn