Как сделать сэндвич меню

Меняющееся гамбургер меню на CSS

Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.

Hamburger Menu Animation

В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.

Вот пример того, что мы будем делать:

Разметка

Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.

Начальные стили SCSS

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

Работа переключателя

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

Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:

Создание закрытого состояния

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

Hamburger Morphing

И вот код, который это реализует.

Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github.

Создание открытого меню

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

Магия в мелочах

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

Вывод

Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть финальную демонстрацию здесь.

Итак, мы создали простое и функциональное меню только на CSS. Однако, если вы не хотите использовать систему переключения CSS, она может быть идеально заменена с помощью нескольких строк JavaScript без особых усилий.

Надеемся, этот урок оказался вам по душе и вы сочли его полезным!

Источник

Готовим бургер меню на CSS, HTML и JQuery

Готовим бургер меню на CSS, HTML и JQuery

Готовим бургер меню на CSS, HTML и JQuery

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

Предлагаю закодить этот фокус в своем текстовом редакторе! И первым шагом на пути к бургеру будет техническое задание:

Техническое задание:

У нас имеются готовые html и css файлы со стандартным горизонтальным меню в шапке сайта и отличным юзабилити для просмотра страницы на широком экране. В настоящий момент меню выглядит следующим образом:

21

Текущий HTML-файл:

Текущий CSS-файл:

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

3

1. Приготовить аппетитный бургер и расположить его в верхней левой части экрана. Бургер должен выглядеть как на изображении слева

2. Создать скрипт, реагирующий на клик мыши по иконке бургера. При клике левой кнопки мыши, средний слой должен плавно исчезать, а верхний и нижний слои — менять углы наклона и образовывать крестик.

3. Создать CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.

4. Создать анимацию плавного выдвижения вертикального меню из левого края страницы.

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

Инструменты: HTML, CSS, JQuery

1. Рисуем бургер меню в левом верхнем углу шапки

В соотсветствии с html-структурой, для бургер-меню у нас заготовлен блок с классом “menu-burger__header”:

Над этим блоком мы и поколдуем!

Так как потребность в бургере порождена желанием адаптировать меню к мобильным устройствам, то css-стили для узких экранов шириной менее 768px мы будем записывать внутри медиазапроса: @media(max-width: 767px)

Откроем css-файл и в самом конце файла разместим медиазапрос: «@media(max-width: 767px)< >» Между скобками медиазапроса расположим стили для класса «menu-burger__header»:

После этого можно сохранить стили и обновить страницу — бургер создан!

Дополнительно для мобильной версии я уменьшила высоту шапки и немного сдвинула вверх контентную часть:

В результате меню приобрело следующий вид:

5

Хм.. Бургер выглядит хорошо, однако, сползшее вниз меню мешает получить дозу эстетического удовольствия и требует хотя бы временно скрыть горизонтальное меню с виду. Для этого я внесу дополнение в css стили для узких экранов:

Теперь я довольна результатом и предлагаю двигаться дальше:

3 1

2. Пишем скрипт анимации бургера при клике мыши.

Пришло время подключить тяжелую артиллерию, а именно: JQuery! Для этого перед закрывающим тегом

Источник

Гамбургер меню на CSS или JS? Часть 1

jquery gamburger menu

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

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

Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS. Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на checkbox-ах, позже я поясню что это.

Гамбургер меню на JS

1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта

Основной контент сайта

2. Вставляем иконку гамбургер в меню навигации

На сайте iconfinder.com находим нужную иконку, меняем цвет на нужный (Edit Icon), скачиваем в формате SVG, открываем в браузере, копируем код из веб-инспектора.

jquery gamburger menu 01

Вставляем скопированный выше код вместо текста «Меню».

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

.menuBurger <
display: none; /* иконка гамбургер скрыта */
>

jquery gamburger menu 02

3. Переходим к медиа-запросу

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

@media screen and (max-width: 530px) <
.menu <
display: none; /* пункты меню скрыты */
background: #f1f2f4;
position: absolute;
>

.menu li <
float: none; /* пункты меню в столбцах */
>

.menuBurger <
display: inline-block; /* иконка гамбургер видна */
>
>

jquery gamburger menu 03

4. Развернуть гамбургер меню

Что нужно сделать, перед тем, как раскрыть гамбургер меню? Надо временно закомментировать в CSS коде медиа-запроса /* display: none; */ и горизонтальное меню превратить в вертикальное. Для этого отменим действие float-а, добавим к медиа-запросу следующий код.

Результат на скриншоте

jquery gamburger menu 04

Попробуйте уменьшить браузер и вы наглядно увидите, как работает гамбургер меню на JS

date article

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Скрытое меню на чистом CSS

Дата публикации: 2014-09-05

100

От автора: Гамбургер-меню, выдвижное меню, off-canvas меню: как бы эту разновидность меню ни называли, скрытие основной навигации на сайте становится шаблоном, использующимся повсеместно в отзывчивом веб-дизайне. Все больше и больше сайтов используют зафиксированную иконку, при нажатии на которую весь сайт сдвигается в сторону, чтобы отобразить скрытое меню.

Несмотря на то, что существует огромное количество созданных для этого jQuery-плагинов, это достаточно легко можно реализовать и вовсе без использования JavaScript. В данной статье рассмотрен простой вариант создания скрытого меню и эффекта выдвижения с помощью одного CSS.

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

Вот демо-пример на сайте CodePen, показывающий конечный результат:

vmaster

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Начнем с HTML

Разметка для скрытого меню будет немного отличаться от варианта для стандартного меню навигации. Вместо того чтобы поместить меню внутри шапки сайта (header), мы поместим его сразу после открывающего тега body. Базовая структура выглядит так:

Как видите, разметка нашего сайта состоит из трех основных элементов: навигация, чекбокс (checkbox) и парный тег label, а также непосредственно контент сайта. Здесь следует отметить несколько моментов:

Разметка навигации размещается в коде в первую очередь, т.к. навигации находится «позади» всех остальных элементов сайта. Для создания навигации вы можете использовать любые HTML-теги. В данном случае я использую привычный ненумерованный список.

Триггером для выдвижения нашего меню послужит тег input с типом checkbox и тег label. Обычно тег label располагается перед тегом input или тег input оборачивается тегом label. Но в данном случае тег input должен идти непосредственно перед тегом label. И далее, при добавлении CSS-стилей, мы увидим почему.

Все остальные элементы сайта должны быть обернуты в отдельный тег div. Это необходимо сделать для того, чтобы при открытии меню все остальное содержимое съезжало немного за границы экрана, чтобы показать скрытые элементы навигации.

Теперь, когда у нас есть базовая HTML структура, мы можем заняться внешним видом нашего меню!

CSS-стили для пунктов меню

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

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

CSS-стили для «обертки» сайта

CSS-стили для триггера меню

Следующим шагом будет добавление стилей для изменения внешнего вида триггера меню с обычного чекбокса на классическую иконку «гамбургер», которую мы все знаем и любим. Сначала, давайте спрячем сам чекбокс.

vmaster

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Примечание редактора: изначально, в данном коде использовалось свойство display: block вместе с указанием нулевого значения для ширины и высоты самого чекбокса, чтобы сделать его невидимым, но доступным (активным). Но оказалось, что такое сочетание стилей в операционной системе iOS приводило к сбою в работе браузера и его закрытию, каждый раз, когда меню открывалось. Я изменил эту технику и стал использовать вместо этого свойство clip, которое, похоже, имеет такой же уровень доступности.

Итак, мы прячем чекбокс, используя свойство clip, которое требует применения свойства position: absolute для заданного элемента. Теперь мы задаем стили для элемента label:

Я использовал в качестве фонового изображения встроенный элемент SVG, но вы можете использовать любую другую иконку, включая использование псевдо-элементов :before и :after, чтобы переделать иконку «гамбургер» на чистом CSS. Обратите внимание, что я также добавил свойство cursor: pointer;, чтобы визуально выделить иконку при наведении.

CSS-стили, чтобы триггер стал активным

Теперь, когда задано оформление для нашего меню, «обертки» сайта и триггера, давайте добавим еще несколько строчек CSS, чтобы все окончательно заработало.

Вторая часть из вышеприведенного блока со стилями гарантирует нам то, что «обертка» сайта вместе с содержимым будет отодвинута на 200 пикселей. Я также добавил тень (свойство box-shadow) для «обертки» сайта, что придаст дополнительное ощущение того, что она находится сверху меню.

Первый селектор (.nav-trigger:checked + label) контролирует расположение триггера при открытии меню. Вам нужно будет прибавить число, которое мы использовали ранее для label[for=»nav-trigger»], к тому значению, которое отвечает за то, на какое расстояние «обертка» сайта будет отодвигаться. В данном случае это: 15px + 200px = 215px.

Вот когда становится важным порядок следования элементов триггера в коде. Второй селектор использует символ

В качестве завершающего штриха мы можем добавить CSS-переход (transition) и для триггера и для «обертки» сайта, чтобы открытие нашего меню сопровождалось плавной анимацией. Только убедитесь в том, что вы указали в свой варианте необходимые вендорные префиксы или использовали что-то наподобие плагина Autoprefixer.

Источник

Навигация мобильных сайтов и приложений: базовые принципы юзабилити

image06

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

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

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

Верхняя панель навигации

Верхняя панель навигации досталась мобильным сайтам в наследство от десктопных устройств. Эта полоска в верхней части экрана, на которой размещены основные навигационные ссылки — популярный и достаточно эффективный инструмент, однако имеет два существенных недостатка. Во-первых, он хорош, только когда на сайте относительно мало других элементов навигации, и во-вторых — занимает слишком ценное пространство в верхней части экрана.

Вот, например, как выглядят главные страницы мобильной версии сайта BBC и приложения Google Play Apps:

image03

Обратите внимание, что Google Play смог уместить больше элементов в панели навигации, используя «карусель»

Панель вкладок

Панель вкладок — ближайший родственник верхней навигационной панели, который часто используется в приложениях. Она может размещаться как в верхней части
страницы (в основном, Android), так и в нижней (IOS).

Панели вкладок, как правило, присутствуют в большинстве мобильных приложений и имеют те же недостатки, что и панель навигации. Существенное их отличие в том, что панель вкладок закреплена, то есть постоянно видна на экране, даже когда пользователь прокручивает страницу вниз, а панель навигации, как правило, просто прокручивается вместе содержанием страницы. Хотя иногда применяется и так называемая «липкая навигация» (sticky navigation), когда навигационная панель остается в верхней части экрана либо автоматически появляется там, когда пользовать начинает скроллить страницу вверх.

В качестве примеров можно привести ленту новостей Facebook на мобильных платформах. Facebook на iPhone (слева) и Android (справа) использует панель вкладок для основной навигации по приложению. Вкладки расположены в соответствии с официальными принципами данных операционных систем: внизу — на iPhone и в верхней части страницы — на Android. При этом навигационные иконки на IOS еще и подписаны:

image05

quote

Если их более пяти, становится трудно уместить их все на панели, сохранив при этом оптимальный для сенсорного экрана размер. Конечно, можно использовать «карусель», как в примере с Google Play — то есть разбить пункты навигации по категориям, но это не всегда уместно. Пользователь не всегда может догадаться, что за пункты скрываются за следующим элементом карусели, и не всегда станет проверять их.

Пример — старая версия приложения Weather Channel: здесь панель вкладок реализована так, что не сразу понятно, что каждая вкладка внизу скрывает под собой еще несколько. И тем более сложно угадать, какие именно пункты там содержатся:

image04

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

Если на сайте 4-5 основных вариантов навигации, возможно, имеет смысл сделать их видимыми постоянно, особенно если они ведут к часто используемым страницам и опциям. Однако, не забывайте, что навигация должна соответствовать контексту приложения. Так, если есть другие обязательные элементы — например, иконка корзины, вход в учетную запись и т. д, то их тоже нужно учитывать, чтобы в целом интерфейс не занимал слишком много места.

Например, вот как выглядит страница результатов поиска сайта AutoZone:

image07

Хотя в панели навигации содержится всего четыре основных пункта (Магазин, Консультации по ремонту, Заказ и Найти магазин), помимо них на страницу выводится еще несколько элементов интерфейса (логотип, корзина, строка поиска, вкладки с результатами поиска и т. д.), так что суммарно они занимают около трети экрана.

Скрытые меню (сэндвич и другие варианты)

Сэндвич-меню, или меню-гамбургер — это навигационное меню, содержащее в себе несколько пунктов или даже несколько подменю и разворачивающееся, только когда пользователь кликает по нему. В свернутом состоянии оно занимает минимум места, и в этом одновременно его преимущество и недостаток, так как данный элемент навигации менее заметен, чем обычное меню.

Пример использования сэндвич-меню — сайт USA Today. Здесь оно применяется для основных навигационных опций. Открывается нажатием на значок в левом верхнем углу экрана:

image00

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

image01

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

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

Навигационный хаб

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

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

quote

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

Наглядный пример — мобильная версия сайта авиакомпании United. На главной странице расположены ключевые навигационные элементы, а на внутренних в верхней части страницы предусмотрена кнопка «Home» для возврата на главную. Причем пользователи редко совершают два типа действий (например, покупку билета и регистрацию на рейс) за одно посещение. Так что большинству из них эта кнопка не понадобится.

image02

Выводы

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

Суть в том, чтобы выбрать такие решения, недостатки которых меньше всего будут проявляться конкретно на вашем сайте:

Источник