Как я могу преобразовать навигацию сайта на рабочем столе в складное меню?

Question

В заголовке есть меню навигации, которое я предпочел бы сохранить, но оно занимает слишком много места. Что я могу сделать, чтобы он выглядел хорошо на мобильном телефоне?

Answer 1

Одна возможность состоит в том, чтобы использовать переключатели - кнопки, которые заставляют его внутреннее содержание появляться / исчезать. Библиотека http://uraniumjs.com/ содержит несколько виджетов, один из которых представляет собой очень простую, но полезную реализацию переключателя. Это также делает это ненавязчиво.

Вам нужно будет включить файл js урана, так что вы можете просто использовать его. Затем вы можете сделать это, как описано ниже.

Вам необходимо преобразовать код меню в три части: контейнер-обертку, раздел "кнопки" и раздел содержимого. Чтобы идентифицировать каждую из этих частей, используйте эти атрибуты данных:

data-ur-set="toggler"

(добавьте этот атрибут в оболочку)

data-ur-toggler-component="button"

(добавьте этот атрибут в раздел "кнопка")

data-ur-toggler-component="content"

(добавьте этот атрибут в раздел контента)

Вам нужно также включить эти правила CSS где-нибудь:

*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
  display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
  display: block;
}

Вы можете увидеть небольшой пример, запущенный здесь: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b.

И http://m.bloomingdales.com/, и мобильные сайты Macys используют этот подход. Вы можете видеть это работает там.