Làm thế nào để làm cho Foundation 5 off-canvas menu điều hướng dính?

Tôi đang sử dụng phiên bản mới nhất của Nền tảng để thêm menu điều hướng ngoài canvas và thêm nút chuyển đổi vào thanh tab. Trong khi tôi làm việc này với thanh tab bị dính, nội dung của menu off-canvas cuộn với trang. Làm thế nào tôi có thể làm cho nội dung của trình đơn được dính sao cho bất kỳ màn hình kích thước hoặc trang cuộn dọc nào chạm vào menu bật tắt sẽ hiển thị nội dung menu mà không cần cuộn? HTML của tôi cho đến thời điểm này là:Làm thế nào để làm cho Foundation 5 off-canvas menu điều hướng dính?

<!doctype html> 
<html class="no-js" lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Foundation | Welcome</title> 
    <link rel="stylesheet" href="css/foundation.css" /> 
    <script src="js/vendor/modernizr.js"></script> 
</head> 
<body> 
    <div class="off-canvas-wrap" data-offcanvas> 
     <div class="contain-to-grid sticky"> 
      <nav class="tab-bar top-bar" data-topbar data-options="sticky_on: large"> 
       <section class="left-small"> 
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a> 
       </section> 

       <section class="middle tab-bar-section"> 
        <h1 class="title">Foundation</h1> 
       </section> 
      </nav> 
     </div> 

     <div class="inner-wrap"> 

      <!-- Off Canvas Menu --> 
      <aside class="left-off-canvas-menu"> 
       <!-- whatever you want goes here --> 
       <ul> 
        <li><a href="#">Item 1</a></li> 
        <li><a href="#">Item 2</a></li> 
        <li><a href="#">Item 3</a></li> 
        <li><a href="#">Item 4</a></li> 
        <li><a href="#">Item 5</a></li> 
       </ul> 
      </aside> 

      <div class="row"> 
       <div class="large-12 columns"> 
        <h1>Welcome to Foundation</h1> 
       </div> 
      </div> 

      <!-- Content goes here --> 

      <!-- close the off-canvas menu --> 
      <a class="exit-off-canvas"></a> 

     </div> 
    </div> 

    <script src="js/vendor/jquery.js"></script> 
    <script src="js/foundation.min.js"></script> 
    <script> 
     $(document).foundation(); 
    </script> 
</body> 
</html>

Nguồn

2014-04-16 Matt W

Hey kiểm tra bài đầu tiên ở đây: http://foundation.zurb.com/forum/posts/547-off-canvas -with-cố định-top-bar? Trang = 2 nó có vẻ là làm việc một cách chính xác nếu bạn đang tìm kiếm các hiệu ứng tương tự mà tôi đã. –

Hãy nhớ đánh dấu câu trả lời bạn đã sử dụng như được chấp nhận. – tehlivi

Làm cho chiều cao của nội dung 95vh và tràn-y = cuộn. Bất cứ khi nào nội dung bên phải được cuộn, menu ngoài khung không bị ảnh hưởng và vẫn ở trên cùng.

CSS:

.mycontent {  
    height:95vh; 
    overflow-y:scroll; 
    /* fix scrolling on webkit touch devices (iPhone etc) */ 
    -webkit-overflow-scrolling: touch; 
}

HTML:

<div class="row mycontent" > 
     <div class="large-12 columns"> 
      <h1>Welcome to Foundation</h1> 
     </div> 
    </div>

Nguồn

2015-03-15 14:14:20

Đây là một liên kết tốt để hỗ trợ trình duyệt cho vh & vw http://caniuse.com/#feat=viewport-units –

Để làm rõ, lớp "mycontent" chỉ đi quanh nội dung trang, không bao gồm thanh tab hoặc canvas menu. Điều này hoạt động mà KHÔNG thêm các lớp "dính" hoặc "cố định". – tehlivi

Thao tác này cũng sẽ làm trơn trượt trên iPhone. Cuộn trở nên giật. Android là tốt. – tehlivi

Hãy thử điều này trong css (Làm việc 100%)

.tab-bar { 
    position: fixed; 
    width: 100%; 
    z-index: 702; 
}

Nguồn

2015-03-21 14:09:02

Câu hỏi được yêu cầu để làm cho phần off-canvas dính. Điều này chỉ làm cho thanh tab dính. – tehlivi

tôi đã cùng một vấn đề, không thể làm cho nó dính khi mở. Cuối cùng tôi đã đi với điều này:

CSS:

.tab-bar { 
position: fixed; 
z-index: 9999; 
width: 100%; 
} 

Added an inner wrapper for the off canvas menu right after the "<aside>" tag, before the "off-canvas-list" <ul>s. 
.inner-canvas-menu-wrapper 
{ 
position: fixed; 
top: 0; 
overflow-y: hidden; 
width: inherit; 
padding-top: 2.8125rem; (standard height of the "tab-bar") 
}

foundation.offcanvas.js Thay đổi -> Cài đặt -> open_method để "chồng chéo"

Bây giờ nó chồng chéo, nhưng ít nhất nó là cố định/dính. Bạn có thể muốn thay đổi close_on_click thành "true" cũng như trong thiết lập này.

Nếu bạn đang sử dụng Quỹ 6 nó sẽ được cố định theo mặc định: https://foundation.zurb.com/sites/docs/off-canvas.html#sass-reference

Nguồn

2016-04-01 12:18:56 XaYdEk

Làm thế nào để làm cho Foundation 5 off-canvas menu điều hướng dính?

Trả lời

Các vấn đề liên quan