V6NET.RU

Навигация, меню

Существует ряд AMP HTML элементов и компонентов, предназначенных для построения меню и навигации. Это кнопки, списки ссылок, меню и компоненты amp-accordion, amp-sidebar, amp-list, amp-carousel. Конечно же, можно использовать и "классический" подход, то есть <a href="__">Ссылка</a>.

Самое простое - кнопка. Вот такая кнопка вызвает переход на главную страницу сайта: <button on="tap:AMP.navigateTo(url='/amp/first')">

Пример для переходов внутри этого сайта:


Также можно использовать <select>, вот пример:

<select on="change:AMP.navigateTo(url=event.value)"> <option value=''>-- Не выбрано --</option> <option value='/amp/first'> Начало </option> <option value='/amp/nonono'> Запреты </option> <option value='/amp/text'> Текст </option> </select>

Выбирайте:   

В данном случае реакция на выбор пункта задается в самом тэге <select>, а сами ссылки - в опциях. Удобно тем, что занимает одну строку на экране и хорошо подходит для быстрых переходов.


amp-accordion

Служит для разворачивания блока текста на экран, то есть что-то вроде того же amp-selector, но с отображением всех пунктов сразу. Требуется добавить в раздел <HEAD> компоненту <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>.

Аккордеон (amp-accordion) состоит из секций, каждая секция состоит только из двух прямых потомков:

<amp-accordion> <section> <h4>Меню 1</h4> <ul> <li><a href="">Меню 1, ссылка 1</a></li> <li><a href="">Меню 1, ссылка 2</a></li> <li><a href="">Меню 1, ссылка 3</a></li> </ul> </section> <section> <h4>Меню 2</h4> <div> <p><a href="">Меню 2, ссылка 1</a></p> <p><a href="">Меню 2, ссылка 2</a></p> <p><a href="">Меню 2, ссылка 3</a></p> </div> </section> </amp-accordion>

На экране это будет выглядеть так:

Меню 1

Меню 2

Меню 2, ссылка 1

Меню 2, ссылка 2

Меню 2, ссылка 3

Если щелкнуть по заголовку секции, то она раскроется. Для построения двухуровнего меню используют вложенные аккордеоны. Для того, чтобы аккордеон не запоминал свое состояние (то есть какая секция была открыта), следует добавить в заголовок параметр disable-session-states. Если требуется, чтобы при запуске одна из секций была развернута, в ее заголовок нужно добавить expanded, как показано в примере ниже. Отдельные пункты меню удобно задавать через ненумерованное перечисление.

<amp-accordion disable-session-states> <section expanded> ... </section>


amp-sidebar

Формирует выдвигающееся справа или слева меню. Для использования следует добавить в раздел <HEAD> компоненту <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>.

Поскольку amp-sidebar уже используется на этом сайте, ниже будут приведены только текстовые примеры.

<button on="tap:test-sidebar.toggle">Меню</button> <amp-sidebar id="test-sidebar" layout="nodisplay" side="left"> <ul> <li> Меню 1</li> <li><a href="/">Ссылка 1-1</a></li> <li><a href="/">Ссылка 1-2</a></li> <li><a href="/">Ссылка 1-3</a></li> <li> Меню 2</li> <li><a href="/">Ссылка 2-1</a></li> <li><a href="/">Ссылка 2-2</a></li> <li> Меню 3</li> <li><a href="/">Ссылка 3-1</a></li> <li><a href="/">Ссылка 3-2</a></li> <li><a href="/">Ссылка 3-3</a></li> <li><a href="/">Ссылка 3-4</a></li> <li><a href="/">Ссылка 3-5</a></li> </ul> </amp-sidebar>

При прикосновении к надписи "Меню" оно будет выезжать на экран слева (можно сделать справа, заменив на side="left"). При желании можно сделать заголовок и кнопку закрытия меню. Для экономии места на экране вместо перечислений используют аккордеон.


amp-list

Служит для показа списка на экране, список формируется в JSON-формате внешним сервисом. Использование практически ничем не отличается от использования amp-list для показа контента, разница только в шаблоне для отображения ссылок в меню. Наиболее просто сформировать одноуровневое меню, вот пример:

Пусть сервер отдает вот такой JSON:

{items: [ {title: "AMP - начало", href: "/amp/first"}, {title: "Запреты", href: "/amp/nonono"}, {title: "Текст", href: "/amp/text"}, {title: "Изображения", href: "/amp/images"}, {title: "навигация", href: "/amp/navigation"} ] } После применения amp-list на экране отобразится меню:

Данное меню по высоте выходит из указанных в amp-list рамок, и нижние пункты не отображаются. Конечно же, такое меню можно "разукрасить" и придать ему желаемый вид при помощи CSS.


amp-selector

Служит для выбора элемента из раскрывающегося списка. Применяется и для навигации, и в формах. Для использования нужно включить в секцию <HEAD> модуль <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>. По умолчанию можно выбрать любой элемент, но только один. Для "привязки" ссылки к опции нужно вписать ее в поле "option".


Выбирайте:

Начало работы с AMP

Особенности, ограничения и запреты

Работа с текстом

Вид селектора несильно отличается от обыкновенных строк текста.


amp-carousel

Подходит для организации линейного (располагающегося на одной линии) "бесконечного" меню, с длиной, превышающей размер экрана. Для использования необходимо добавить в раздел <HEAD> компоненту <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>.

Меню (плюс легкая стилизация) выглядит так:

Начало  ⇨ ⇦  Запреты  ⇨ ⇦  Текст  ⇨ ⇦  Иллюстрации  ⇨ ⇦  Навигация  ⇨ ⇦  Интерактивность