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

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

Шаг 1. HTML

Для начала мы начнем с разметки, для нее мы будем использовать атрибут role, чтобы указать определенный тип: горизонтальное меню (full-horizontal), выпадающий список (select), ниспадающее меню (custom-dropdown) и canvas.

Для всех стилей мы будем использовать один медиа-запрос.

Горизонтальное меню

Разметка будет содержать достаточно простую структуру.

Для горизонтального меню будет следующий медиа-запрос.

Преимущества

  • Не требуется JavaScript
  • Никакой лишней разметки
  • Простой код стилей

Выпадающий список

Чтобы добиться такого эффекта нам нужно добавить в базовую разметку выпадающий список. Чтобы он работал нам придется добавить JavaScript код, который изменяет значение window.location. href когда происходит событие onchange.

Скрываем список на больших экранах.

Чтобы помочь пользователю понять, что это меню — мы добавим псевдо-элемент с текcтом «Меню»

Canvas

Экран разделяется на части в пропорциях 80% меню и 20% содержимое (в зависимости от разрешения и единиц, используемых в CSS)

На больших экранах мы скрываем label.

Чтобы помочь пользователю понять, чтобы это меню, мы так же добавим псевдоэлемент с текстом «≡» в label (в виде кода «\2261», чтобы использовать как содержимое псевдоэлемента).

Вот и все. Готово!

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