Tích hợp Mmenu trong Bootstrap

Question

Tôi muốn tích hợp Jquery Mmenu trong Bootstrap để tự động cho phép chuyển đổi bootstrap sang menu trượt bên trái này với thiết kế đáp ứng, thay vì hiển thị trình đơn đáp ứng dọc trên cùng gốc.

Bất kỳ ý tưởng hoặc cách tiếp cận nào?

Jquery Mmenu: http://mmenu.frebsite.nl

Tôi cảm ơn tất cả các bạn trước.

Jay.

Answer 1

Vâng, tôi đã đặt ra cùng một nhiệm vụ một vài giờ trước và tôi đã hy vọng tìm thấy câu trả lời ở đây để giúp tôi.

Tôi đã làm việc ngay bây giờ và tôi sẽ chia sẻ những gì tôi đã học được, mặc dù tôi mới khởi động. Một người khác cảm thấy tự do để kêu vang trong nếu bạn thấy những sai lầm tân binh. Đoán đó là thời gian để trả nợ cộng đồng vì nhiều câu hỏi của tôi đã được trả lời ở đây.

đây đi:

Nhìn vào jsFiddle này để xem hoàn chỉnh của tôi mẫu mã và demo: http://jsfiddle.net/acterry/fMYpg/

Bạn sẽ phải chơi với chia dọc để thấy sự thay đổi nav từ một phong cách để người kia .

Tôi muốn sử dụng cùng một nav ul để điều khiển cả hai menu. Nhưng sau khi tìm hiểu nguồn gốc của Jquery.mmenu, tôi thấy những điều sau đây mà tôi biết sẽ gây ra vấn đề:

• mmenu kết thúc tốt đẹp container mới (div theo mặc định) xung quanh HTML của bạn
• mmenu đổi các menu trong ul cách mà có khả năng sẽ freak ra navbar bootstrap
• mmenu không có chức năng để phá tan bản thân và hoàn tác DOM thay đổi nó gây ra

Như một bằng chứng của khái niệm, tôi vẫn ổn với việc sử dụng bootstraps breakpoint đáp ứng được xác định trước để xác định NAV phong cách đã được hiển thị.

Đây là HTML cho phần trình đơn

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="visible-desktop navbar-inner"> 
    <div class="container"> 
     <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="/">My Site</a> 
     <!-- Everything you want hidden at 940px or less, place within here --> 
     <div class="nav-collapse collapse"> 
     <ul class="nav" id="mainSiteMenu"> 
      <li><a href="#">Home</a> 
      </li> 
      <li><a href="#">Link 1</a> 
      </li> 
      <li><a href="#">Link 2</a> 
      </li> 
      <li><a href="#">Link 3</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="hidden-desktop navbar-inner"> 
    <div class="container"> 
     <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
     <a class="btn btn-navbar" href="#mainSiteMenuMMenuNav"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="/">My Site</a> 
    </div> 
    </div> 
</div> 
<nav id="mainSiteMenuMMenuNav"></nav> 

Dưới đây là một sự cố nhanh chóng của các bước sau:

1. (không hiển thị ở trên) Quấn tất cả các HTML trên trang của mình trong div nếu nó chưa có trong một vùng chứa duy nhất. Nếu bạn đang sử dụng thứ gì đó không phải là div, hãy đặt pageNodetype trong cấu hình mmenu một cách thích hợp
2. Xác định ul nav của bạn như được hiển thị trên trang thành phần khởi động. Nhưng, cung cấp cho UL một ID để chúng tôi có thể tham khảo sau này.
3. Nhân bản div bên trong thanh điều hướng
4. Trong thanh điều hướng đầu tiên bên trong, thêm màn hình nền có thể nhìn thấy vào tham số lớp của div - đây là thanh điều hướng sẽ được hiển thị cho người dùng máy tính để bàn.Bootstrap sẽ ẩn nó bên dưới điểm ngắt chiều rộng của máy tính để bàn/máy tính bảng
5. Trong thanh điều hướng bên trong thứ hai, thêm máy tính để bàn ẩn vào tham số lớp của div - đây là thanh điều hướng được hiển thị cho máy tính bảng/điện thoại (hoặc bất kỳ thứ gì khác chiều rộng trình duyệt dưới 940px theo mặc định)
6. Thêm vùng chứa điều hướng trống có ID (Tôi đã sử dụng mainSiteMenuNav) sau div đóng của thanh điều hướng. Đây là nơi UL cho mmenu sẽ được.
7. Trong mã của tôi, hãy chú ý liên kết btn-navbar trong thanh điều hướng bên trong thứ hai. Đó là nút sẽ mở/đóng mmenu. Neo href cần phải khớp với bất kỳ ID nào bạn đã cung cấp vùng chứa trống rỗng đó

Vì tôi không thể sử dụng cùng một UL chính xác cho cả hai trình đơn, tôi quyết định sử dụng jQuery để lập trình trùng lặp với thanh điều hướng bootstrap tải trang và đưa nó vào thùng chứa nav trống cho mmenu để sử dụng.

Có thể sẽ sạch hơn nếu chỉ tạo vùng chứa nav trống rỗng theo chương trình. Tôi có thể sẽ làm điều đó vào ngày mai.

này sẽ copy javascript UL, đặt nó vào container nav và instantiates mmenu với UL sao chép:

$(function() { 
    $("#mainSiteMenuMMenuNav").append($("#mainSiteMenu").clone().attr("id", "mainSiteMenuMMenu").attr("class", "")); 
    $("#mainSiteMenuMMenuNav").mmenu({ 
     configuration: { 
      pageNodetype: "div" 
     } 
    }); 
}); 

Điều đó sẽ làm điều đó. Nếu bạn gặp sự cố, vui lòng kiểm tra kỹ mọi thứ. Và một lần nữa, tôi chỉ tìm ra điều này một vài giờ trước .... vì vậy nó có thể KHÔNG phải là một giải pháp bằng chứng ngu ngốc.

Nếu ai đó có cách tốt hơn hoặc gặp sự cố, hãy cho tôi biết.

Answer 2

Tôi đã thêm một ví dụ bổ sung buộc thanh điều hướng bootstrap ở phía trên cùng của cửa sổ khi cuộn xuống.

http://jsfiddle.net/acterry/yC7R3/

Tôi đã thay đổi pageNodetype cho "" để thay đổi nơi mmenu làm nó thay đổi.

Added CSS này cũng

/* Push down the sidebar menu so that first item is not covered up by sticky navbar */ 
#mainSiteMenuMMenuNav.mmenu-opened { 
    top: 50px; 
} 

/* force the top navbar to stick to top of window when you scroll down*/ 
@media (max-width: 979px) { 
    /* Enable use of floated navbar text */ 
    .navbar-text.pull-right { 
     float: none; 
     padding-left: 5px; 
     padding-right: 5px; 
    } 
    .navbar-fixed-top, .navbar-fixed-bottom { 
     position: fixed; 
     margin-left: 0px; 
     margin-right: 0px; 
    } 
} 

Answer 3

Vì đây vẫn là bất cứ ai mở những người có cùng một vấn đề và đang tìm kiếm một việc thực hiện làm việc: Check this out.

Tôi chỉ sử dụng nó trong dự án của mình và không thể dễ dàng hơn được nữa ...

Answer 4

Hy vọng đây là chủ đề và hữu ích. Tôi đã sử dụng menu bootstrap bình thường cho đến khi chiều rộng tối thiểu: 1060px và sau đó MMenu từ đó trở đi. Đây là JS (Tôi đang sử dụng enquire.js để phù hợp với các truy vấn media).

// uses enquire.js to fire js on media queries 
// https://github.com/WickyNilliams/enquire.js/ 
enquire.register("screen and (max-width:1060px)", { 

// Wait until media query is matched 
deferSetup: true, 
// Fires once 
setup: function() { 
// requires an empty <nav id="menu"></nav> 
$('.navbar-nav').clone().appendTo('#menu'); 
$('#menu > ul').attr("id", "mmenu"); 
//clean up mmenu by removing bootstrap classes 
$('#mmenu ul').removeClass('dropdown-menu animated fadeInDown'); 
$('#mmenu li').removeClass('dropdown'); 
$('#mmenu li a').removeClass('dropdown-toggle').removeAttr("data-toggle data-target"); 
// $('#mmenu li a').removeAttr("data-toggle data-target"); 
$('#mmenu').removeClass('nav navbar-nav'); 

}, 

// If supplied, triggered when a media query matches. 
match: function() { 

//Show mmenu on media query match 
$("#menu").mmenu({ 
"offCanvas": { 
"position": "right" 
} 
}); 
}, 

// *from a matched state to an unmatched state*. 
unmatch: function() { 
//Hide mmenu 
$('#menu').trigger('close.mm'); 
// $('#mmenu').remove(); 

} 

});