Как в html css сделать меню плитку
Обновлено: 18.05.2024
Как в html + css сделать меню плитку?
Решения вопроса 1
UI / UX Designer, Frontend Developer & Unicorn
Нет в сети, потому что просто
Можно даже еще круче сделать, как у вас в примере, без внешних рамок:
Ответ написан более двух лет назад
FrontJS @frontjs Автор вопроса
спасибо очень меня выручил
FrontJS, не за что, надеюсь дальше разберетесь
FrontJS @frontjs Автор вопроса
Andrej Sharapov, уже разобрался
Только зачем на дивах, если можно ul li? Однотипные элементы же
xonar, да это просто для примера) никто не знает, как он будет это реализовывать, образца, кроме картинки, нет) вот и накидал на коленке
Клади плитку эффективно ( Про CSS, SVG, pattern и другое)
Статья про ремонт квартиры, про эффективное использование графических ресурсов для современных устройств. От смарт часов до телевизоров на стену.
Сказ о том, как вставлять фоновые повторяющиеся изображения страниц, что бы всем было хорошо.
Ну, что готовы поиграть . Тогда погнали
Вводные
Поступила задача на создание страницы сайта с повторяющимся изображением.
Как будем решать ?
Level 1 Банально примитивный
Самый простой способ, которым воспользуется большое количество верстальщиков это забрать фоновую картинку, всю разом (чаще всего png форматом, поскольку он по умолчанию в Figma и Avocode выставлен) и плюхнуть её блоку через background-image;
(* ну, ты ведь не такой, мой юный читатель ?)
Если разработчик немного опытнее, и знает что jpg сжимается, как правило, лучше png, то фон будет формата jpg.
Level 2 Мне не плевать на производительность
Если верстальщику вдруг стало не пофиг на производительность разрабатываемой страницы, и он знает что в этом месте можно существенно экономить трафик пользователя, он может вычленить паттерн (повторяющуюся часть фона) из данного изображения, если повезет.
Если макет был реализован в PhotoShop, то придется обрезать. Потому что там background задается нераздельным элементом
Пример вынимания повторяющегося фона из Avocode
В Figma это реализовано несколько проще. Хотя это будет зависеть, от того как дизайнер вам создавал этот фон.
*Кто желается поиграться, я оставлю свой пример для скачивания.
В примере два варианта с png и svg паттернами о которых пойдет речь дальше.
Ок, теперь вместо одного большого фонового изображения у нас есть повторяющийся элемент плитки (CSS Tiling).
Отлично, мы молодцы. Вот уже вместо (586кБ) пользователь забирает с сервера всего (
Level 3 Сожму тебя по максимуму
Давайте, подумаем, а можно ли это ещё как-то улучшить положение? Хмм, а рисунок то не сложный, может можно его перегнать в вектор?
И тут спрятался демон соблазна.
Стремясь к лучшему, мы часто портим хорошее
* Уильям Шекспир
Когда этого делать не рационально, или вообще нельзя:
- У вас сложный повторяющийся рисунок. Его перерисовка займет n часов, а если вы этой задачей ещё и напряжете дизайнера, то карма у вас точно уменьшиться.
- В изображении присутствуют тени или элементы с размытием, и вы не согласны от них отказаться.
* Тут надо объяснить
Если вы экспортируете SVG графику предположим из Figma или Illustrator, a не кодите её сами в редакторе, то скорее всего элементы размытия или тени вам будут вставлены в SVG в формате base64 и это ни как не улучшит ваш performance, поскольку такой файл, по факту, может весить больше аналога jpg формата.
Всегда проверяйте, что вам предлагают. Разуметься некоторые из этих элементов можно создать и кодом, при помощи тегов
Хорошо, давайте создадим SVG и посмотрим что у нас получиться.
* Ради чистоты эксперимента приведенные изображения ни как не сжимались сторонними утилитами и сохранялись в 100% качестве при помощи PhotoShop, Illustrator and Avocode.
Ок, да наша svg оказывается меньше jpg/png исходно варианта.
Это не удивительно, поскольку в ней мы оставили только базовые цвета, которые видели, а не те, что появляться на стыке объектов с размытием.
Разница между размерами файлов png/jpg кажется не сильно существенной, и она начинает играть роль, только если рисунок большого размера. (Я предпочитаю png, а фоновый цвет задавать свойством background-color)
Меня несколько смутило, что полученные png/jpg созданные из svg по размеру меньше SVG (даже очищенного от системного мусора средствами SVGO)
Но, потом, до меня дошло, что если захочется уменьшить/увеличить размер плитки фона для мобильных или телевизоров, то это потребует подключение новых паттернов (pattern-bg_min) а SVG останется всё тем же (15кБ — всегда), да и размытия изображения не наблюдается
Это является значимым плюсом, особенно если пользователь смотрит страницу с дорогого телефона с хорошим разрешением, а верстальщик в угоду Google Page Speed ужал всю графику до появления шакалов. Вот она экономия =)
Выглядит, довольно привычно.
Ок, усложняем. Предположим что стили, которые в body будут подключать в критический CSS, давайте тогда отдавать вектор прям в стилях. *дабы не захламлять страницу, возьму другой паттерн, поменьше.
Стало довольно много CSS, и он перестал работать.Плохо
Так, необходимо теперь правильно это всё закодировать. Вставку незакодированного SVG поддерживают только браузеры на Webkit. Спасибо, Юлии Бухваловой, за полезный ресурс кодирования, который нам в этом поможет.
Большой обзор красивых многоуровневых меню с codepen
На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.
Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).
Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
В этом обзоре мы рассмотрим многоуровневые меню.
Flat Horizontal Navigation
Material Nav Header w/ Aligned Dropdowns
Smooth Accordion Dropdown Menu
Pure CSS Dark Inline Navigation Menu
Pure CSS3 Mega Dropdown Menu With Animation
CSS3 Dropdown Menu
Simple Pure CSS Dropdown Menu
Bootstrap 3 mega-dropdown menu
Flat Navigation
3D nested navigation
Responsive Mega Menu — Navigation
Pure Css3 Menu
Full CSS3 Dropdown Menu
Css3 only dropdown menu
Dropdown Menus
Pure CSS DropDown Menu
Pull Menu — Menu Interaction Concept
Make Simple Dropdown Menu
Pure CSS dropdown [work for mobile touch screen]
Dropdown Menu
CSS 3 Dropdown Menu
KVdKQJ (автор очень долго думал над названием)
CSS3 Menu Dropdowns (особенное решение)!
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Как сделать горизонтальное меню на css3
От автора: приветствую вас на этом блоге. После статей об html5 хотелось бы также упомянуть css3 – обе эти технологии принесли много нового в мир сайтостроения. В частности, сегодня мы оформим горизонтальное меню на css3, применив свойства из новой версии этой технологии.
Создание навигации
Прежде всего, нужно сделать разметку. Тут можно поступить по-разному – можно вывести пункты меню списком, можно просто в nav подобавлять различные ссылки. Для простоты я так и поступлю в этом примере. Конечно же, за создание меню отвечает html, a css только за его оформление.
В общем, я даже не буду приводить разметку. Скажу только, что в блок nav я добавил пару ссылок.
Чтобы к нашим элементам можно было применять больше стилей, их нужно сделать блочно-строчными, либо блочными, задав float: left. В общем-то, оба варианты работоспособны и используются, вы можете выбрать тот, что больше нравится. Я только скажу, что при inline-block образуются небольшие отступы справа. Обычно чтобы убрать их применяют такое свойство:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
margin - right : - 4px ;По наблюдениям добавляется именно 4 пикселя, таким образом мы его аннулируем. При создании меню вы можете пойти упрощенным путем, просто вложив в nav нужные ссылки, а можно оформить все в виде списка, потому что так обычно и делают.
Оформление навигации
Собственно, я хочу предложить вам несколько способов оформления навигации, которые распространены в сайтостроении. Предположим, мы выстроили все пункты в один ряд с помощью float: left, но теперь их еще нужно оформить. Давайте добавим такие стили:
display : block ; padding : 20px ; color : white ; float : left ;Самыми главными тут являются, пожалуй, фоновый цвет и цвет текста, потому что они сильно влияют на восприятие, также добавляем внутренние отступы, чтобы пространства в наших ссылках стало побольше. Благодаря блочным свойствам область ссылки будет по всем ее размерам.
Хорошим тоном веб-дизайна и разработки также считается добавление определенных изменений при наведении, особенно в случае с таким важным элементом, как главное меню.
text - decoration : none ; color : orange
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Теперь у ссылок убирается подчеркивание и цвет текста становится оранжевым (при наведении). Также в зависимости от дизайна в меню добавляют разделители. Поскольку оно у нас горизонтальное, то их можно реализовать с помощью рамок с правой стороны. Разделители очень часто бывают очень кстати, особенно в больших меню.
Собственно, их можно сделать и по-другому. Дело в том, что обычная рамка или граница (border) увеличивает размер блока и иногда это может привести к добавлению ненужной ширины. Соответственно, можно применить свойство box-shadow или outline. Второе полностью аналогично border, но при этом не увеличивает размеры элементов. Также по оформлению такие разделители могут немного отличаться.
Как сделать на css3 красивое горизонтальное меню?
Тут вы можете использовать мощь новых свойств этой технологии. Например, градиент вместо обычного сплошного цвета. Конечно, никто вам не запрещает вставить картинкой любой нужный фон, но если появилась такая замечательная возможность, то почему бы ей не пользоваться? Вы можете использовать линейный или радиальный градиент. Для упрощения написания кода можно воспользоваться сервисом, в котором генерируется правильный синтаксис этого свойства.
Ну вот, наше меню стало значительно красивее. Что еще с ним можно было бы сделать? При наведении вы можете использовать css3 трансформации, чтобы увеличивать, поворачивать или перемещать ссылку.
Если задать контейнеру nav какие-то размеры, то ему тоже можно задать фон, после этого следует добавить внешние отступы ссылкам, добавить им скругление и получится тоже неплохо.
width : 700px ; height : 90px
Как адаптировать меню для мобильного сайта
Сегодня все начали делать адаптивные дизайны для своих сайтов. Соответственно, большое широкое меню, которое отлично смотрится с экранов обычных ПК и широкоформатных мониторов, совсем не будет смотреться на мобильных. Без адаптивной верстки оно просто образует горизонтальный скролл или будет сжато до немыслимых размеров.
Чтобы сделать на css3 адаптивное меню, нужно прописать для него медиа-запросы, то есть задать другие стили, учитывая ширину экрана. Очевидно, что если у вас слишком много пунктов в навигации, то, возможно, на экранах планшетов вам следует вывести только самые главные. На экраны мобильных телефонов в таком случае лучше вообще вывести только кнопку, которая будет разворачивать меню.
Если вы хотите научиться адаптировать любые элементы веб-страницы под мобильные устройства, чтобы они хорошо отображались на любых экранах, я советую вам пройти наш видеокурс по практике верстки под мобильные устройства. Это позволит вам в будущем создавать и другим адаптивные сайты, потому что сегодня это нужно всем и это очень популярно.
Адаптация может заключаться и в этом, чтобы выставить контейнеру nav максимальную ширину. Таким образом, если экран вдруг будет становиться меньше, меню тоже будет сжиматься. Вашей задачей останется только не допустить того, чтобы пункты стали заходить друг на друга или перестали помещаться в свой контейнер.
Технология css3 впервые позволила сделать блоки не только прямоугольными или квадратными, но также круглыми и даже треугольными, также добавились новые возможности в плане задания фона. Используйте все это и не забывайте читать наш блог, чтобы получать другие идеи.
Сеточные макеты плитки с помощью auto-fit и minmax CSS Grid
От автора: макеты плитки, вероятно, являются наиболее распространенными макетами, которые мы создаем. Особенно для областей контента. И их никогда не было легче создать благодаря новой магии minmax и auto-fit, которая поставляется с CSS Grid. Lemme покажет вам новый и простой способ верстки идеальных, гибких макетов плитки с помощью CSS Grid.
Плитки повсюду
Вы можете узнать некоторые из них. Практически все страницы в Google Music являются макетами плитки:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Вероятно, вы никогда не видели, чтобы страница с моментами Twitter вызывала раздражение, а это также просто макет плитки, в котором некоторые элементы сетки охватывают больше ячеек:
Вы поняли мою мысль. Плиточные макеты повсюду.
Для этого предназначен auto-fit
Мы используем новое ключевое слово auto-fit для создания макетов плитки. Он указывает Grid создать столько столбцов заданного размера, сколько может помещаться в пространство контейнера сетки.
Таким образом, предположим, мы хотим разделить нашу сетку на столько столбцов шириною в 200px, сколько может поместиться в доступном пространстве:
display : grid ; grid-gap : 15px ; grid-template-columns : repeat ( auto-fit, 200px ) ;
В этом div шириною 1400px было достаточно места для создания шести столбцов в 200px с зазором в 15 px между ними.
CSS Grid хорошо подготовлен, чтобы помочь нам сделать эту структуру плитки еще лучше.
minmax() прикроет вам спину
Мы можем отрегулировать макет так, чтобы плитки заполняли все пространство в сетке, а не оставляли пустое пространство в конце. Мы делаем это, создавая гибкие столбцы с помощью minmax.
display : grid ; grid-column-gap : 15px ; grid-template-columns : repeat ( auto-fit, minmax ( 200px, 1fr ) ) ;
Справа нет лишнего пространства! Как, черт побери, это делается?
Эта комбинация auto-fit и minmax делает нашу структуру плитки гибкой.
Адаптивность
Наилучшее в этом способе то, что такая плитка уже подходит для небольших мобильных экранов.
Каждый раз, когда для одной из колонок в 200px больше нет места, Grid автоматически создает новую строку и смещает элементы в нее. Максимальное значение minmax в 1fr гарантирует, что элементы всегда заполняют всю строку. Это лишь одна из причин, почему CSS Grid настолько хороша для гибких макетов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Еще более крутые макеты с помощью шаблона плитки
Теперь, когда мы рассмотрели теорию, давайте немного поэкспериментируем. Когда мы используем repeat(), мы можем повторить не только один трек, но и шаблон треков.
Адаптивные html-блоки в виде кирпичной кладки с помощью CSS3
Для начала смотрим пример, а потом, подробнейшим образом разберём, что, куда и зачем:
Как видите, в таких компактных блоках, вы сможете размещать всё что угодно, любой контент, изображения, встроенное через iframe видео с любых видео-хостингов, текстовое содержание, ссылки, различные виджеты, описание ценники товаров, и т.д. К тому же вам не придется заботиться о размерах картинок или видеоплеера с YouTube, например, все размеры заданы в css, благодаря чему, медийный контент, автоматом подстроится под родительский контейнер, роль которых выполняют привычные div-ы с классом item .
HTML структура
Контейнеры, в которых размещается необходимый контент, оформлены с помощью свойств css3 в виде прямоугольных плиток, с лёгкой наружной тенью box-shadow и изменениями алгоритма расчета ширины и высоты элемента box-sizing, с присвоенным значением border-box .
Для формирования внешнего вида блоков и построения их в нужный нам макет в форме отдельных плиток, используется минимум кода css, ничего лишнего. Краткие комментарии к свойствам, которые я прописал непосредственно в исходниках, помогут вам быстрее разобраться и, пи желании подстроить блоки под свой изысканный вкус))).
CSS Стили
В демонстрационном примере я поместил контейнер div class wrapper" , который обычно используется на сайтах для размещения контента страниц. Если вы решите применить эти адаптивные блоки не в виде отдельной страницы, а например в основной колонке, на главной странице, или для вывода кратких анонсов статей, описания разделов сайта, вам достаточно использовать div со встроенными в него отдельными блоками div . Блоку отлично, на полном автомате, подстроятся под размер родительского контейнера.
Адаптивность всей конструкции достигается посредством специальных меда-запросов @media для различных типов носителей, то-бишь размеров их экранов. В процессе уменьшения или увеличения размера экрана, позиция плиток и их размер будут изменяться, в зависимости от устройства, на котором осуществляется просмотр. Так например, при просмотре на устройствах с размером экрана в 400px, плитки выстроятся в две колонки, а на мониторах больше 1100px, блоки выведутся уже в пять колонок. Процентное значение ширины width: 100%; плиток, позволяет осуществить плавный переход и изменение размера, в зависимости от типов пользовательских устройств.
Где применять такой способ вывода информации? Да где угодно. У вас на блоге или сайте, есть рубрики(категории), заделайте представительную картинку, соответствующую тематике категории, добавьте небольшое описание, приправьте всё это ссылочкой на страницу этой самой рубрики, и разместите всё это дело на главной странице. Или же, организуйте вывод новостей, кратких анонсов самых свежих записей блога, описание товаров в интернет магазинах и т.д. и т.п. Вариантов использования данного метода масса. Вот только как-то у самого ещё руки не дошли, реорганизовать структуру своего блога. Надеюсь, те кому приглянулся этот способ, будут порасторопнее меня и используют адаптивные боки в виде плиток на своих новых и уже работающих интернет-проектах.
Обкатать метод, поэкспериментировать с параметрами, вы можете непосредственно в редакторе кода онлайн: Тынц >>. Все исходники, как на ладони, доступны к прямой правке, и в живую, сразу виден результат.
С уважением, Андрей.
Удачи! Буду очень благодарен, если поделитесь ссылкой на запись в своих соц. сетях:
Всего комментариев: 56
Полина : 25 августа, 2014 в 15:18Редко, что получается из того, что Вы пишете, потому как голова видно не под то заточена(,пытаюсь что-то сотворить уже третий год.Сайт слетает постоянно.Читаю Вас всегда с огромным интересом, и буду читать, и пробовать воплотить. Спасибо.
driver : 25 августа, 2014 в 18:36Здравствуйте Полина.
Спасибо за отзыв. Еси что-то не получается, порой достаточно маленькой подсказки, так что пишите, чем смогу помогу.
Блок с плитками выстроен таким образом, чтобы он вписывался в любой родительский контейнер или работал автономно, в виде основного макета отдельного шаблона страницы, строить догадки, и давать советы, не видя что вы делали с базовыми исходниками, не берусь. Проверьте параметры стилей шаблона страницы, куда вы разместили плитки, позиционирование внутренних элементов, выравнивание, отступы и т.д.
Григорий : 18 октября, 2014 в 18:10 Игорь : 28 ноября, 2014 в 17:05Можно ли сделать так чтобы блоки в соответсвии с порядком который задан в html выстраивались не сверху-вниз-справа-налево, а справа-налево-сверху-вниз? Чтобы div который идет вторым в списке был не под первым div, а справа от него.
driver : 28 ноября, 2014 в 18:18Здравствуйте, Игорь. В конкретном случае нельзя, для разбиения содержимого основного блока на колонки, использовал свойство column-count , соответственно всё содержимое(в нашем случае это плитки) разбиваются на колонки последовательно, как если бы это был просто текст
Миша : 3 марта, 2015 в 00:24А что нужно сделать, что бы блоки шли с лева на право, сверху в низ?
driver : 3 марта, 2015 в 13:30 Ответить NeedHate : 19 декабря, 2014 в 12:40codepen.io/NeedHate/pen/LEZeoZ
Почему Chrome (соответственно и Opera)так реагирует на image hover ? (картинки внутри itm должны смещаться на 2 градуса).
Здравствуйте.
Посмотрел, картинки поворачиваются при на ведении на указанный градус, не совсем понял, что вы хотели, transform: rotate(2deg) срабатывает как и положено
Привет,
отличная статья. То, что Я искал с вчерашнего дня. Теперь попробую поставить. Кстати, вопрос — как насчет поддержки браузерами?
Спасибо.
Здравствуйте.
IE начиная с 10-й версии, остальные браузеры в порядке.
Большое спасибо за интересную статью. А можно каким-то образом это вставить в шаблон wordpress, чтобы такая плитка отображалась на главной странице? Или там надо на PHP писать код? Заранее спасибо за ответ.
Извините, я не большой специалист по wordpress, просто если бы это был обычный сайт на php, то я бы нашла, наверное, куда воткнуть данный код, но, поскольку это CMS, то я просто ума не приложу как быть. Уже всю голову сломала.
Спасибо за интересное решение.
Возникает странная проблема. Все сделал по инструкции, ничего не менял в коде. В Firefox все так, как и написано: на полном экране 5 столбцов. Но в браузерах Chrome, Opera, Yandex почему-то только 4 столбца показывается, на месте пятого приличное голое пространство. Хотя разрешение 1280*1024.
Здравствуйте.
Вот именно сейчас проверяю работу плиток в эмуляторе мобильных устройств, при изменении размеров багов не заметил, в том числе и на разрешении 1280*1024.
В медиа-запросах для базового контейнера .wrapper я использовал min-width: 1280px , а для блока с плитками .masonry , на максималке, учитывая отступы min-width: 1100px , копните в эту сторону, но по крайней мере у меня, переход плиток происходит корректно во всех браузерах.
Убил кучу времени, но похоже проблема была в том, что у меня не так много контента было. И фаерфокс почему-то нормально эту плитку клал, а вебкитовские оригинальным способом, игнорируя 5 столбик. Как только добавил еще несколько блоков контента — все стало идеально показываться.
Анна : 2 июня, 2015 в 14:57Спасибо за статью! Просто супер! :3
Андрей : 17 июля, 2015 в 15:28Именно то, что искал! Спасибо Вам большое!
Ivan : 14 сентября, 2015 в 13:47 driver : 14 сентября, 2015 в 20:02В демо всё по центру, при изменении до любого размера экрана. Выравнивание по левому краю происходит при недостаточном количестве блоков(плиток) с контентом
Илья : 18 сентября, 2015 в 02:13Доброго времени! Подскажите, как следует изменить код, чтобы при добавлении блоки распологались по горизонтали, а не по вертикали как сейчас.
Т.е. сейчас при последовательном расположении блоков порядок такой:
1 4 7
2 5 8
3 6 9
А хотелось бы так:
1 2 3
4 5 6
7 8 9
Буду премного благодарен за совет.
Спасибо
transform rotate us-ai xD
ne, nu a 40, rehenie ))))
Как реализовано многоточие/бтн. подробнее в конце обрывающегося многострочного текстового блока?
driver : 28 июля, 2016 в 22:25 Дмитрий : 25 сентября, 2016 в 16:17Скопировал себе для проверки, ничего не работает!
driver : 25 сентября, 2016 в 19:21Что скопировал? Себе — это куда? Вы стили подключили? Или тупо, фарш демо-страницы скопировали? В демо работает, в песочнице тоже всё пучком. Да и вообще, зачем что-то копировать, если можно скачать исходники и измываться над ними сколько душе угодно
Oleg : 26 октября, 2016 в 22:35Все отлично работает, но возникает одна проблема: в DLE после коротких новостей, пагинация строится тоже кладкой. Как можно очистить поток, чтобы пагинация выводилась как положено?
just : 19 июля, 2017 в 08:39super puper. avtoru sps.
Инесса : 8 ноября, 2017 в 11:08Большое спасибо! Очень пригодилось!
Владимир : 14 декабря, 2017 в 16:04 Елена : 19 декабря, 2017 в 11:58А у меня все получилось — автору спасибо за заготовку — все можно изменять под нужный дизайн сайта! Давно искала подобное ☺♥☺♥
Горизонтальное меню для сайта
Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента <ul> , а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.
Как сделать горизонтальное меню: разметка и примеры оформления
- Содержание:
HTML-разметка и базовые стили для горизонтального меню
По умолчанию все элементы списка <li>. </li> располагаются вертикально, занимая по ширине всю ширину элемента контейнера <ul>. </ul> , который в свою очередь занимает всю ширину его блока-контейнера.
HTML разметка для горизонтальной навигации
Горизонтальное меню, находящееся внутри тега <ul>. </ul> , можно дополнительно помещать внутрь элемента <nav>. </nav> и/или <header>. </header> . Благодаря этому html-разметке придается семантический смысл, а также появляется дополнительная возможность для форматирования блока меню.
Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:
See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.
Способ 1. liДелаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li . Дальше стилизуем ссылки по своему желанию.
Способ 2. liДелаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a и стилизуем их по своему желанию.
Способ 3. liДелаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a и стилизуем их по своему желанию.
Способ 4. ulДелаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a и стилизуем их по своему желанию.
Горизонтальное выпадающее меню
Как сделать горизонтальное выпадающее меню
- Содержание:
1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка <li> добавляется вложенный список <ul> или <оl> .
Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.
See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.
Способ 1.Выпадающее меню скрывается с помощью .submenu , при наведении показывается с помощью .topmenu li:hover .submenu .
Способ 2. Способ 3. Способ 4.Способ 5. С помощью jQuery
2. 3D выпадающее меню
Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.
See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.
3. Разворачивающееся выпадающее меню с логотипом
В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.
4. Увеличивающееся выпадающее меню
Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu , при наведении размер увеличивается до .topmenu > li:hover .submenu .
See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.
5. Подъезжающее выпадающее меню
Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.
Вертикальное меню для сайта
Вертикальное меню делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка <li>. </li> располагаются вертикально, занимая по ширине всю ширину элемента контейнера <ul>. </ul> , который в свою очередь занимает всю ширину его блока-контейнера.
Элементы списка <li>. </li> могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.
1. Вертикальное меню с заголовком
Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.
3. Вертикальное меню с эффектами при наведении
Иконка и фоновая заливка, проявляющиеся при наведении на элемент списка, помогут разнообразить дизайн элементов вертикального меню.
4. Вертикальное меню с иконками
Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить шрифт Awesome. Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.
5. Вертикальное меню с картинками
Данный пример можно использовать для оформления блоков с новинками, похожими товарами, и т.п. сайте интернет-магазина.
Читайте также: