Tôi đang cố gắng tạo trang web HTML AMP (xem https://www.ampproject.org) Nhưng tôi không thể tìm thấy bất kỳ nơi nào bạn tạo trình đơn bánh hamburger đáp ứng? Javascript không được phép và không có thành phần AMP nào có sẵn cho nó?Cách tạo menu bánh hamburger đáp ứng trong HTML AMP
Điều này hiện không thể thực hiện được nếu không có đột nhập lớn.
theo cùng trong các lỗi tính năng yêu cầu: https://github.com/ampproject/amphtml/issues/827
Tôi đã thực hiện điều này với việc sử dụng một pseudoclass :target.
HTML
<nav id="slide-in-menu">
...nav menu content...
</nav>
<section class="content-section">
<a href="#slide-in-menu">Hamburger Icon</a>
</section>
CSS
#slide-in-menu {
transform: translateX(-100%);
transition: transform .2s ease-in-out;
... additional required styles ...
}
#slide-in-menu:target {
transform: translateX(0);
}
Đây là cách tôi đã thực hiện nó, đặc biệt khi lớp giả: 'tập trung' không thực sự hoạt động trên một số trình duyệt máy tính để bàn do một loại nghịch lý nhân quả dường như xảy ra (ít nhất là trong Chrome). ': target' hiệu quả hơn nhiều và nó hoạt động tốt cho băng chuyền, [như tôi đã khám phá ở đây.] (https://dev.amdouglas.com/amphtml-examples/nojs-carousel/#div1) – amdouglas
Bạn có thể làm điều này với: lớp giả tập trung. Hãy xem https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html để có một ví dụ trực tiếp (www.washingtonpost.com cũng làm theo cách này). Hoặc bạn có thể đợi thẻ <amp-sidebar> phát trực tiếp.
Mã này trông giống như
<a id="burger" tabindex="0">☰</a>
<div id="burgerCancel" tabindex="0">☰</div>
<div id="burgerMenu">
<ul>
<li><a href="/news/local/#navlink=ampnav">Local News</a></li>
<li><a href="/sports/#navlink=ampnav">Sports</a></li>
</ul>
</div>
<button id="burgerMask"></button>
và css
#burger:focus ~ #burgerMenu {
transform: translateY(0px); /* or whatever other way you want it to appear */
}
#burgerMask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 998;
border: 0;
opacity: 0;
transition: opacity 250ms cubic-bezier(0, .67,0,.67);
pointer-events: none; /*this is important */
}
#burger:focus ~ #burgerMask {
pointer-events: auto;
opacity: 0.7;
display: block;
}
Trực tiếp Ví dụ không hoạt động, khi bạn nhấp vào mục menu, menu chỉ đóng và không chuyển đến url, mã trong ví dụ sẽ thực hiện tương tự. Bạn đã bao giờ nhận được mã này để hoạt động chính xác chưa? –
AMP bây giờ đã hỗ trợ cho menu bằng cách sử dụng thành phần amp-sidebar.
Bạn đang cố gắng tạo trang web nhiều trang bằng cách sử dụng AMP? Đây không phải là trường hợp sử dụng mà tôi nghĩ AMP được thiết kế cho. Các ví dụ tôi thấy/xây dựng là 'trang' thay vì 'trang web' - chúng được đơn giản hóa chế độ xem các bài viết riêng lẻ từ một trang web không phải AMP. – MatCarey
@MatCarey Vậy làm thế nào chúng ta có thể làm cho các trang amp thừa? Chúng tôi có phải tạo từng trang riêng lẻ cho tất cả sản phẩm để tạo trang chi tiết amp không? –