Как расположить горизонтально меню?
Подскажите, как правильно расположить горизонтально меню в шапке, чтобы до разрешения 1024px пункты меню были в одну строку? T.е. чтобы пункт меню и текст не переносились на новую строку при уменьшении разрешения экрана. Для ссылок ещё нужен hover , чтобы при наведении ссылка выделялась другим цветом. Т.е. при данном количестве пунктов меню должно быть прижато слева и справа к краям родителя. А если пунктов меньше, пусть будет прижато влево. Т.е. нужен адаптив
header < background: red; >.wrapper < display: flex; justify-content: flex-start; align-items: center; position: relative; margin: 0 auto; max-width: 1440px; width: 95%; padding-left: 15px; padding-right: 15px; >aside < width: 19.91%; flex-basis: 19.91%; max-width: 281px; outline: 1px solid #fff; color: #fff; >.links < width: 80.09%; flex-basis: 80.09%; padding: 10px 0 10px 20px; >.links-ul < display: inline-flex; justify-content: flex-start; margin: 0; padding: 0; outline: 1px solid #fff; >li < display: inline-block; >a < font-size: 12px; padding: 18px 18px; font-weight: 600; color: #fff; line-height: 1.2; text-decoration: none; display: inline-block; text-transform: uppercase; transition: .2s; >a:hover, a.active < background: #bd3534; >@media (min-width: 1440px) < a < font-size: 14px; padding: 18px 20px; >>Отслеживать
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак
Как сделать горизонтальное меню в html
Здесь создается навигационное меню с четырьмя пунктами: «Главная», «О нас», «Услуги» и «Контакты».
-
свойство display: flex; :
nav ul display: flex; list-style: none; margin: 0; padding: 0; > nav li margin-right: 20px; > nav a color: #000; text-decoration: none; > Горизонтальное меню для сайта
-
, а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.
Как сделать горизонтальное меню: разметка и примеры оформления
- Содержание:
- HTML-разметка и базовые стили для горизонтального меню
- 1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
- 2. Адаптивное меню для свадебного сайта
- 3. Адаптивное меню с фестонами
- 4. Адаптивное меню на ленточке
- 5. Адаптивное меню с логотипом по середине
- 6. Адаптивное меню с логотипом слева
HTML-разметка и базовые стили для горизонтального меню
HTML разметка для горизонтальной навигации
Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:
ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ >a 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. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed'); .menu-main < list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; >.menu-main li .menu-main li:after < content: "|"; color: #606060; display: inline-block; vertical-align:top; >.menu-main li:last-child:after .menu-main a < text-decoration: none; font-family: 'Ubuntu Condensed', sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; >.menu-main a, .menu-main a:visited .menu-main a.current, .menu-main a:hover .menu-main a:before, .menu-main a:after < content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom: -5px; left: 50%; background: #feb386; transition: .8s; >.menu-main a:hover:before, .menu-main .current:before .menu-main a:hover:after, .menu-main .current:after @media (max-width: 550px) < .menu-main .menu-main li .menu-main li:after .menu-main a < padding: 25px 0 20px; margin: 0 30px; >>2. Адаптивное меню для свадебного сайта
@import url('https://fonts.googleapis.com/css?family=PT+Sans'); .top-menu < position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; >.top-menu:before, .top-menu:after < content: ""; display: block; height: 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; >.top-menu:after < border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; >.menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; >.menu-main:before, .menu-main:after < content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); >.menu-main:before .menu-main:after .menu-main li < display: inline-block; padding: 5px 0; >.menu-main a < text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: 'PT Sans', sans-serif; font-size: 16px; color: #777777; border-bottom: 1px solid transparent; transition: .3s linear; >.menu-main .current, .menu-main a:hover < border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; >@media (max-width: 500px) < .menu-main li >3. Адаптивное меню с фестонами
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; >.menu-main:after < content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; >.menu-main li .menu-main a < text-decoration: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: 'PT Sans Caption', sans-serif; color: #777777; transition: .3s linear; position: relative; >.menu-main a:before, .menu-main a:after < content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #F58262; opacity: 0; transition: .5s ease-in-out; >.menu-main a:before .menu-main a:after .menu-main a.current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after .menu-main a.current, .menu-main a:hover @media(max-width:680px) < .menu-main li >4. Адаптивное меню на ленточке
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .top-menu < margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); >.top-menu:before, .top-menu:after < content: ""; position: absolute; z-index: 2; left: 0; width: 100%; height: 3px; >.top-menu:before < top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); >.top-menu:after < bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); >.menu-main < list-style: none; padding: 0; margin: 0; text-align: center; >.menu-main:before, .menu-main:after < content: ""; position: absolute; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid #5A394E; transform: rotate(360deg); z-index: -1; >.menu-main:before < left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); >.menu-main:after < right: -30px; border-right: 12px solid rgba(255, 255, 255, 0); >.menu-main li < display: inline-block; margin-right: -4px; >.menu-main a < text-decoration: none; display: inline-block; padding: 15px 30px; font-family: 'PT Sans Caption', sans-serif; color: white; transition: .3s linear; >.menu-main a.current, .menu-main a:hover @media (max-width: 680px) < .top-menu .menu-main li < display: block; margin-right: 0; >.menu-main:before, .menu-main:after .menu-main a >5. Адаптивное меню с логотипом по середине
@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < position: relative; background: rgba(34,34,34,.2); >.menu-main < list-style: none; margin: 0; padding: 0; >.menu-main:after < content: ""; display: table; clear: both; >.left-item .right-item .navbar-logo < position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); >.menu-main a < text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: white; transition: .3s linear; >.menu-main a:hover @media (max-width: 830px) < .menu-main < padding-top: 90px; text-align: center; >.navbar-logo < position: absolute; left: 50%; top: 10px; transform: translateX(-50%); >.menu-main li < float: none; display: inline-block; >.menu-main a < line-height: normal; padding: 20px 15px; font-size: 16px; >> @media (max-width: 630px) < .menu-main li >6. Адаптивное меню с логотипом слева
@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; >.top-menu:after < content: ""; display: table; clear: both; >.navbar-logo .menu-main < list-style: none; margin: 0; padding: 0; float: right; >.menu-main li .menu-main a < text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; >.menu-main a:before < content: ""; width: 9px; height: 9px; background: #F73E24; position: absolute; left: 50%; transform: rotate(45deg) translateX(6.5px); opacity: 0; transition: .3s linear; >.menu-main a:hover:before @media (max-width: 660px) < .menu-main < float: none; padding-top: 20px; >.top-menu < text-align: center; padding: 20px 0 0 0; >.menu-main a .menu-main a:before > @media (max-width: 600px) < .menu-main li >Как расположить меню горизонтально css
Панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Рассмотрим, как создать простенькую панель навигации.
Фактически панель навигации — это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент . Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.
Вертикальное меню
Распространенное решение данной проблемы для создания вертикального меню состоит в том, чтобы сделать ссылку блочным элементом.
После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.
Горизонтальное меню
Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block .
Использование float
Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li , в который заключена ссылка, устанавливается float: left; . Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.
Второй этап заключается в установке у элемента ссылки display: block , что дает нам возможность устанавливать ширину, отступы, вообщем все те признаки, которые характерны для блочных элементов.
inline и inline-block
Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline . После этого для элемента ссылки, которая располагается в элементе li , мы можем установить display: inline-block :