меню css адаптивное flex
Адаптивное меню на CSS flexbox
Всем привет! На начало 2018 года, по данным сайта Can I Use, верстка на flexbox-ах, поддерживается браузерами на 97.8%. Это отличные показатели для этой уже далеко не новой технологии по верстки сайтов. Теперь уже нет причин, почему не пользоваться этим удобным способом верстки. Чем мы сейчас и займемся.
Сверстав несколько макетов на CSS flexbox-ах, уже не хочется возвращаться к устаревшим float-ам и даже к такому любимому среди верстальщиков фреймворку, как Bootstrap. Хотя, Bootstrap ещё рано списывать со счетов, ведь используя его знаменитую сетку, можно «не париться» по поводу медиа запросов.
На этом уроке мы сверстаем шапку сайта с типичным адаптивным меню с применением flexbox CSS метода.
Шапка состоит из трех логичных блоков:
Эти три блока будут помещены в общий внешний блок-обертку header, который внутри себя будет делать display: flex; для трех блоков.
Внутри блока nav, еще раз пропишем display: flex; для пунктов меню. Таким образом мы добьёмся гибкости, при уменьшении размеров экрана, пункты меню могут выстраиваться друг под другом.
Для наглядной демонстрации сделаем всю HTML разметку для шапки сайта.
Адаптивное меню без Javascript
В этой публикации я хочу показать один из способов реализации адаптивного горизонтального меню с использованием Flexbox. Данный способ реализации меню используется на сайте Warface Hub, но немного с другой структурой и большим количеством свистелок.
Где-то с год назад, я попал в одну компанию, в которой мне сказали замечательную фразу: «Сначала делаем все с помощью CSS, а потом только добавляем JavaScript». Совет, вроде, хороший, и я ему последовал. Но как бывает, меня понесло. Сейчас мне это аукнулось тем, что не все нужно делать с таким подходом.
И так, ближе к делу. Я приступил к изучению и реализации.
Инструменты и документация
Структура
Для организации структуры стилей для меню я пользовался концепцией, которая описана тут. Автор данной концепции предлагает разбить все описания стилей на несколько частей:
CSS и HTML теги input & label
Прежде чем начать рисовать HTML разметку, я бы хотел напомнить/показать интересное поведение CSS селекторов, которое нам пригодится.
В данном примере Вы можете заметить, что при нажатии на label Вы получите выбранный input. В этом ничего особенного нет (см. документацию), но самое интересное происходит со стороны CSS селекторов.
Данный CSS селектор будет обработан только тогда, когда будет выбран input (см. :checked)
Второй момент, на который нужно обратить внимание в CSS селекторах — это выбор следующего элемента (см. Adjacent sibling selectors и General sibling selectors). То есть мы можем выбрать следующий элемент после текущего.
В этом примере мы получили следующее поведение: при выбранном элементе с классом input следующий за ним элемент с классом label будет изменен в соответствии с описанными стилями.
Теперь это все можно объединить воедино.
В данном примере я добавил несколько элементов input и label, чтобы получилось следующее поведение:
Выбран один пункт меню:
После таких манипуляций остается только скрыть элементы input.
Flexbox
Теперь необходимо добавить стили, чтобы данное меню хорошо отображалось при различных разрешениях и различных браузерах. На текущий момент мы сосредоточили наши усилия на поддержке тех браузеров, которые больше всего используются посетителями нашего ресурса. Получился небольшой список: Chrome, Firefox, IE Edge, IE 11 и их мобильные варианты последних версий.
Поддержка осуществляется путем добавления префиксов (postcss) и отдельного написания стилей для конкретного браузера.
Адаптивность в Flexbox достигается очень просто. Достаточно описать контейнер, но иногда будет необходимо решить проблемы с контентом внутри. Например:
Для каждого элемента в контейнере необходимо задать стили так, чтобы он заполнял все возможное пространство и выравнивали контент внутри себя в центре по вертикали:
Более красивого отображения меню можно достичь с помощью media queries и более точных размеров и позиций элементов.
После реализации данного примера я доработал его в рамках боевого проекта, который сейчас использует подобное адаптивное меню. Так же были выявлены плюсы и минусы избавления от Javascript в пользу CSS:
Как с помощью CSS создать адаптивное выпадающее меню навигации
Из этого руководства вы узнаете, как с помощью CSS создать адаптивное выпадающее меню навигации. Для этого мы воспользуемся CSS flexbox и хаком с чек-боксами.
Верхняя панель навигации крайне важна для любого сайта. В этой статье описана одна из реализаций, которая адаптивна. А также не использует JavaScript для переключения выпадающего списка на мобильных устройствах.
Настройка
Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.
Создайте файл styles.css и подключите его в HTML-документе:
Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.
Добавьте следующий HTML-код в тег
Элемент header формирует темную панель навигации, содержащую все остальное. Также у нас есть div menu-wrap, который является контейнером для логотипа, ссылок навигации и иконки меню.
В файл styles.css добавим несколько стилей для всех элементов:
Затем примените эти стили к header.
Теперь темная панель навигации растягивается на всю ширину окна просмотра.
Добавьте приведенные ниже стили к классу menu-wrap:
Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.
Стилизуем каждый из этих дочерних элементов один за другим.
В результате мы получили правильно позиционированные логотип и иконку нужного размера. Теперь нужно на мобильных устройствах абсолютно позиционировать все пункты меню ниже панели. Сначала добавьте следующий код:
Теперь добавьте стили списка и ссылок:
Также добавьте для ссылок стили при наведении и фокуса:
Теперь в браузере отображается следующее:
Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:
Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden. Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.
Хак с чекбоксом
Нам нужно переключить отображение меню, используя только CSS. Лучший способ сделать это – использовать скрытый чекбокса.
Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!
В файле index.html добавьте элемент checkbox перед элементом nav:
В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.
Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:
Для больших экранов
Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.
Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.
В нем сначала спрячьте иконку меню.
Обязательно увеличьте размер окна браузера до ширины, превышающей 768 пикселей, чтобы увидеть следующие изменения.
Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.
Теперь вы знаете, как создать адаптивное выпадающее меню навигации, которое отображает пункты на навигационной панели для больших экранов. Но при этом отображает иконку гамбургера для небольших экранов.
СКАЧАТЬ ИСХОДНЫЙ КОД
Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, лайки, отклики, подписки, дизлайки огромное вам спасибо!
Flexbox горизонтальное меню за 7 минут / CSS + HTML
Дополнительное видео
Анимированное меню с HTML и CSS3
See the Pen MOPbJp by Denis (@Dwstroy) on CodePen.
Каркас меню в HTML
Скачивайте архив к себе на компьютер и разархивируйте. В нем находятся три папки, css где расположены файлы стилей, fonts папка с иконками, img в ней картинка на задний фон.
Оформление CSS стилей
Блоку с меню задаем фон, с верху делаем отступы в 100 пик. и ширину на весь экран.
У списков LI убираем маркер и делаем отступ со всех сторон в 10 пик.
У ссылок убираем подчеркивание, увеличим текст до 18 пик. и сделаем его черным цветом.
Анимация при наведении
После того как сделали основное оформление приступим к анимированию при наведении.
Создадим дополнительные псевдо элементы, которые будут при наведении подчеркивать название элемента.
Затем делаем анимацию при наведении. Отбираем li и задаем им background чуть темнее.
Далее анимируем полоски при наведении, что бы он двигались.
Для этого отбираем списки при наведении и добавляем к ним псевдоэлемент с шириной в 50% и задаем трансформацию по оси Х с лева на право. Это предаст ей движение.
Добавляем к ссылкам плавный переход и изменим режим наложения слоев при помощи mix-blend-mode: multiply;
Получилось довольно не плохо, давайте теперь ширину поставим в ноль и при наведении ссылке добавим красный цвет.
Можно еще добавить отступы к ссылкам в пять пикселей и тогда высоту отступов делаем меньше в 90% будет в самый раз.
В принципе, что хотел, я вам показал, получилось довольно симпатичное меню.
Всем кому понравилось видео поделись им в социальных сетях.
Как создать полностью адаптивную панель навигации с помощью Flexbox
Дата публикации: 2018-02-27
От автора: в этой статье я постараюсь объяснить, как создать панель навигации, которая адаптируется к различным размерам экрана, используя Flexbox вместе с медиа-запросами.
Установка
Давайте начнём с разметки для очень простой панели навигации:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Элемент ul — это наш flex-контейнер, а li элементы — это flex-элементы. Чтобы преобразовать это в Flexbox макет, вот что мы сделаем:
И получим следующий макет:
Я добавил некоторые стили, но это не касается Flexbox. Как видите, у нас есть немного лишнего места с правой стороны. Причиной является то, что Flexbox располагает элементы слева направо и каждый элемент имеет такую ширину, насколько определяет его содержимое.
Поскольку flex-контейнер по умолчанию является блочным элементом (и является шире, чем четыре элемента), мы получим пустое место в конце.
Причина, по которой панель поиска шире, чем другие, заключается в том, что поля ввода по умолчанию имеют размер size=»20″, что различные браузеры и операционные системы интерпретируют по-разному.
Адаптивность #1
Чтобы наделить панель навигации базовой адаптивностью, мы просто зададим поисковым элементам flex значение 1.
В результате этого поисковые элементы будут расширяться и уменьшаться вместе с шириной контейнера, а значит у нас не будет лишнего пространства справа.
Понятно, что панель поиска растёт во время того, как остальные остаются фиксированными, но возникает опасение, что она может стать слишком широкой по сравнению с остальными элементами. Поэтому если вам лучше, чтобы все элементы увеличивались вместе с шириной контейнера, то можете просто задать всем им значение flex 1.
Вот что получается:
Вы можете также задать элементам разные значения flex, и это заставит их увеличиваться с разной скоростью. Не бойтесь экспериментировать с этим на площадке Scrimba. Дальше в этом руководстве мы продолжим работать с первым решением, где только панель поиска имеет значение flex.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Адаптивность #2
Наша панель навигации работает очень хорошо на широких экранах. Однако, на более узких экранах могут появится проблемы, как показано здесь:
В определённый момент становится нецелесообразным размещение всех элементов в одном ряду, потому что контейнер становится слишком узким. Чтобы решить данную проблему, мы добавим медиа-запросы и разделим четыре элемента на два ряда. Медиа-запрос вступает в действие, когда ширина экрана будет составлять 600px:
Первым делом давайте мы обернем Flexbox макет в flex-wrap. По умолчанию мы имеем nowrap, так что нам придётся это изменить на wrap.
Далее мы зададим значение элемента flex-basis 50%. Это укажет Flexbox, чтобы каждый элемент занимал 50% доступной ширины, и, как результат, мы получим два элемента в ряд, вот так:
Примечание: Я также выровнял текст заполнителя по центру поля ввода.
Теперь у нас два разных состояния. Однако, этот макет всё ещё не работает на очень маленьких экранах, например, экранах мобильных телефонов в портретном режиме. Если мы продолжим уменьшать экран, то в результате получим следующееe:
Дело здесь в том, что во втором ряду больше не помещаются два элемента. Поле поиска просто слишком широкое, потому что вы не можете сделать его ширину меньше минимальной, ведь иначе оно не сможет содержать нужный контент.
Элементы «Вернуться на главную» и «Профиль» всё ещё могут выводиться в одном ряду, поэтому Flexbox позволяет им это. Такое решение неоптимально, так как мы хотим, чтобы все ряды выглядели одинаково.
Адаптивность #3
Как только один из рядов не может уместить два элемента, нам больше не нужно, чтобы эти ряды вмещали два элемента. Другими словами, на очень маленьких экранах мы сделаем панель навигации вертикальной. Мы разместим элементы один под другим.
Чтобы добиться этого, нам просто нужно изменить ширину с 50% до 100%, чтобы каждый ряд умещал только один элемент. Мы добавим контрольную точку 400px.