Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента
- , а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.
Как сделать горизонтальное меню: разметка и примеры оформления
HTML-разметка и базовые стили для горизонтального меню
- Пункт меню
- Пункт меню
- Пункт меню ...
- Главная
- О нас
- Наши услуги
- Наша услуга №1
- Наша услуга №2
- Наша услуга №3
- Наша услуга №4
- Услуга 5
- Новости
- Контакты
- меню будет тянутся динамически;
- отступы от разделителя до пункта везде одинаковые;
- более красивое и гибкое оформление.
- с випадашкой при наведении в сторону
- со всплывающей выпадашкой третьего уровня
- Главная
- О нас
- Наши услуги
- Наша услуга №1
- Дополнение к услуге 1
- Дополнение к услуге 2
- Наша услуга №2
- Дополнение к услуге 3
- Дополнение к услуге 4
- Наша услуга №3
- Наша услуга №4
- Услуга 5
- Наша услуга №1
- Новости
- Контакты
- Карта проезда
- Дополнение для карты
- Дополнение для карты 2
- Форма обратной связи
- Карта проезда
- Объемный код
- Невозможность определения активного состояния элемента через селектор класса. Это происходит из-за разрыва слов в пунктах (если оно одно). Решением этой проблемы будет добавление еще однеого контейнера внутрь элементов списка.
- Для выпадающего меню нужно подгонять код из-за негативного влияния overflow . В каких браузерах работает?
По умолчанию все элементы списка располагаются вертикально , занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
HTML разметка для горизонтальной навигации
Горизонтальное меню, находящееся внутри тега , можно дополнительно помещать внутрь элемента ... и/или ... . Благодаря этому html-разметке придается семантический смысл, а также появляется дополнительная возможность для форматирования блока меню.
Существует несколько способов разместить их горизонтально . Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:
Ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ } a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}
Способ 1. li {display: inline;}Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;} . Дальше стилизуем ссылки по своему желанию.
Способ 2. li {float: left;}Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;} , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.
Способ 3. li {display: inline-block;}Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.
Способ 4. ul {display: flex;}Делаем список ul гибким контейнером с помощью модели . В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.
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 {display: inline-block;} .menu-main li:after { content: "|"; color: #606060; display: inline-block; vertical-align:top; } .menu-main li:last-child:after {content: none;} .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 {color: #9d999d;} .menu-main a.current, .menu-main a:hover{color: #feb386;} .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 {left: 0;} .menu-main a:hover:after, .menu-main .current:after {right: 0;} @media (max-width: 550px) { .menu-main {padding-top: 0;} .menu-main li {display: block;} .menu-main li:after {content: none;} .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 {left: 15px;} .menu-main:after {right: 15px;} .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 {display: block;} } 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 {display: inline-block;} .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 {left: 5px;} .menu-main a:after {right: 5px;} .menu-main a.current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after {opacity: 1;} .menu-main a.current, .menu-main a:hover {color: #F58262;} @media(max-width:680px) { .menu-main li {display: block;} } 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 {background: rgba(0,0,0,.2);} @media (max-width: 680px) { .top-menu {margin: 0;} .menu-main li { display: block; margin-right: 0; } .menu-main:before, .menu-main:after {content: none;} .menu-main a {display: block;} } 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 {float: left;} .right-item {float: right;} .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 {background: rgba(0,0,0,.3);} @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 {display: block;} } 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 {display: inline-block;} .menu-main { list-style: none; margin: 0; padding: 0; float: right; } .menu-main li {display: inline-block;} .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 {opacity: 1;} @media (max-width: 660px) { .menu-main { float: none; padding-top: 20px; } .top-menu { text-align: center; padding: 20px 0 0 0; } .menu-main a {padding: 0 10px;} .menu-main a:before {transform: rotate(45deg) translateX(-6px);} } @media (max-width: 600px) { .menu-main li {display: block;} }Добрый день!
Часто бывает нужно сделать горизонтальное меню, которое будет растягиваться на всю ширину родительского блока независимого от того, сколько пунктов в нем содержится.
Сегодня я бы хотел вам показать, как создавать именно такое меню.
Итак, наше меню будет следующим:
Оно растянуто на всю ширину, при наведении — выделяется. По бокам меню закруглено.
HTML РАЗМЕТКА
|
|
...
|
Чтобы сделать меню на всю ширину, я использовал таблицы со 100% шириной. В каждой таблице есть div контейнер пункта меню. В зависимости от того первый, последний или промежуточный пункт меню — div -у присваивается соответствующий класс.
В каждом div контейнере есть 2 боковых бордера с абсолютным позиционированием, которые нужны для корректного отображения. Если использовать стандартные бордеры, то при переключении пунктов меню, текст будет скакать на 1-2 пикселя, что ни есть хорошо.
Класс active отвечает за выбранный пункт меню и выделяет его.
В каждом пункт у нас есть картинка и текст. Чтобы все это выравнивалось строго посередине по вертикали мы используем таблицу. Благодаря свойству вертикального выравнивания наши пункты меню всегда будут ровно отображаться и не уедут.
CSS ПРАВИЛА
Сначала зададим стили для общего отображения меню:
Menu_container { padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; } .menu_container td { vertical-align: middle; /* вертикальное выравнивание */ } .last_point_menu, .first_point_menu, .middle_point_menu { width: 100%; height: 47px; border: 1px solid #dadbda; z-index: 1000; position: relative; border-left: none; } .inner_table { width: 100%; height: 100%; } .inner_table td { padding: 0px; vertical-align: middle; border: none; text-align: left; width: 150px; padding-left: 4px; } .td.inner_table_title { padding-top: 4px; font-weight: bold; } .td.inner_table_img { width: 40px!important; } .inner_table_menu { height: 100%; padding: 0px; vertical-align: middle; border: none; text-align: left; } .inner_table_title { padding-left: 10px; padding-right: 10px; text-transform: uppercase; line-height: 13px; } .inner_table_menu td.inner_table_img { width: 30px!important; height: 30px!important; padding-left: 15px; }
Для красоты округлим уголки по бокам меню:
First_point_menu { -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px solid #dadbda; } .last_point_menu { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
Теперь наше меню приобрело более красивый вид:
Пока что у первого пункта нет левого бордера. Его мы исправим несколько позже.
А сейчас давайте добавим для меню эффекты при наведении.
Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active { background-color: #CAE285; background-image: -moz-linear-gradient(top, #CAE285, #9FCB56); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); background-image: -webkit-linear-gradient(top, #CAE285, #9FCB56); background-image: -o-linear-gradient(top, #CAE285, #9FCB56); background-image: linear-gradient(to bottom, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; } /* проработает бордеры при наведении*/ .first_point_menu { border: 1px solid #dadbda; } .first_point_menu:hover, .first_point_menu.active { border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; } .last_point_menu { border: 1px solid #dadbda; border-left: none; } .last_point_menu:hover { border: 1px solid #9FCB56; border-left: none; border-color: #aec671 #9fbb62 #87ac4a; } .last_point_menu.active { border-left: none; }
Теперь наше меню выглядит намного приятней, но пока у нас нет бордеров у выделенных пунктов меню. Давайте это исправим!
/* стили для боковых бордеров */ .borderLeftSecond, .borderRightSecond { display: none; position: absolute; width: 1px; height: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; } /* абсолютные смещения для бордеров */ .borderLeftSecond { left: 0px; } .borderRightSecond { right: -1px; } /* у активного и наведенного показываем бордеры */ .active .borderLeftSecond, .active .borderRightSecond, .middle_point_menu:hover > .borderLeftSecond, .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond { display: block; } /* обрабатываем случаи первого и последнего пункта*/ .first_point_menu.active .borderLeftSecond { display: none; } .last_point_menu.active .borderRightSecond { display: none; } .last_point_menu:hover .borderLeftSecond { display: block; }
Вот и все!
У нас получилось отличное меню растянутое на всю ширину родительского блока! Пункты друг на друга при наведении мыши не наезжают и верстка не скачет.
Продолжаем серию уроком посвященных выпадающим меню. На очереди горизонтальное выпадающее меню на css своими руками.
Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел .
В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.
Навигация по странице:
И так, наша задача:
сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц
6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |