Как создать адаптивное меню гамбургера в AMP HTML

Question

Как создать адаптивное меню гамбургера в AMP HTML

Я пытаюсь создать веб-сайт AMP HTML (см. https://www.ampproject.org/). Но я нигде не могу найти, как вы должны создать адаптивное меню для гамбургеров? Javascript не разрешен, и нет доступных компонентов AMP для него?

13

amp-html

Источник

user5650512 07 дек '15 в 14:59

5 ответов

Другие вопросы по тегам amp-html

user259027 23 июн '16 в 05:10 2016-06-23 05:10 · Answer 1 · 2016-06-23 05:10

AMP теперь имеет поддержку меню с использованием компонента amp-sidebar.

11

Источник

user259027 23 июн '16 в 05:10

user1696060 28 мар '16 в 13:35 2016-03-28 13:35 · Answer 2 · 2016-03-28 13:35

Я сделал это с помощью :target pseudoclass.

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);
}

7

Источник

user1696060 28 мар '16 в 13:35

user5425604 21 дек '15 в 20:24 2015-12-21 20:24 · Answer 3 · 2015-12-21 20:24

В настоящее время это невозможно без серьезных взломов.

Следуйте инструкциям в сообщении об ошибке в функции: https://github.com/ampproject/amphtml/issues/827

1

Источник

user5425604 21 дек '15 в 20:24

user573695 22 апр '16 в 16:55 2016-04-22 16:55 · Answer 4 · 2016-04-22 16:55

Вы можете сделать это с помощью псевдокласса:focus. Посмотрите на https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html живой пример (www.washingtonpost.com также делает это так). Или вы можете подождать <amp-sidebar> тег, чтобы начать жить.

Код выглядит так

<a id="burger" tabindex="0">&#9776;</a>
<div id="burgerCancel" tabindex="0">&#9776;</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>

и 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;
}

user812102 06 сен '18 в 21:12 2018-09-06 21:12 · Answer 5 · 2018-09-06 21:12

Айви уже упоминал amp-sidebarИз этого, вероятно, все просто для большинства веб-дизайнеров, но стоит упомянуть, что в проекте AMP также есть учебник по фактической части "гамбургер".

Помните, что он использует символ багуа, который не существует в каждом шрифте. Лучше использовать картинку:

<div role="button" on="tap:sidebar.toggle" tabindex="0" class="hamburger">
  <amp-img src="/images/logo_menu.svg" height="50" width="50">
</div>

Кроме того, перед его реализацией можно проверить, что меню гамбургеров является подходящим решением для каждого конкретного случая, поскольку оно имеет некоторые недостатки. В Интернете есть ряд статей о его плюсах и минусах и о том, когда их следует избегать.