Довольно распространенная схема расположения меню сайта, когда контейнер с ним занимает всю ширину доступную на странице. При этом первый пункт прилегает к левому краю, а последний – к правому, а расстояние между всеми элементами равно. Сегодня мы расскажем, как это делается.
Мы предлагаем вам пример реализации резинового меню при помощи CSS для Вашего ресурса. В этом меню пункты будут располагаться в одну строку. Javascript использоваться не будет. Содержимое меню будет заключено в обычный список. Главной чертой такого меню является универсальность, которая выражается в том, что как число так и длина пунктов может быть любая.
Как это реализовать?Каждый программист может предложить свой способ решения поставленной задачи. Все зависит от его фантазии, уровня профессионализма и способностей. Наиболее распространенное решение этой проблемы - использование таблицы. Также многие предложили бы воспользоваться javascript. Тех, кто предложил бы воспользоваться свойством display со значением table или table-cell – спешу огорчить. Этот способ не обладает достаточной кроссбраузерностью.
Наше решениеНаше предложение будет воздвигнуто на прочном фундаменте из знаний HTML5 и CSS3.
Суть процесса базируется на свойстве text-align со значением justify. Для тех кто забыл - напоминаю: это свойство ориентирует выравнивание текста по всей ширине контейнера.
При использовании нашего решения должно соблюдаться два обязательных правила. Первое заключается в том, что ширина контейнера пункта меню должна быть меньше, чем текст. То есть не в одну строку. Второе важное правило – слова растягиваются в равно мере, не зависимо от того, к одному пункту они принадлежат или нет.
Ниже представлен код, который служит примером создания «резинового» меню:
HTML
< ul> < li>< a href= "#" > Главная < li>< a href= "#" > Блог < li>< a href= "#" > Новости < li>< a href= "#" > Популярное < li>< a href= "#" > Новинки
ul { text- align: justify; overflow: hidden; /* устраняет побочное влияние метода*/ height: 20px; /* тоже устраняет лишнее */ cursor: default ; /* устанавливает изначальную форму курсора*/ margin: 50px 100px 0 100px; background: #eee; padding: 5px; } li { display: inline; /* делает пункты меню текстовыми */ } li a { display: inline- block; /* устраняет разрыв слов в меню */ color: #444; } a: hover { color: #ff0000; } ul: after { /* формирование второй строки для отработки метода */ content: "1" ; margin- left: 100 %; height: 1px; overflow: hidden; display: inline- block; }
Для работы в старом добром Internet Explower необходимо дополнительно внести в CSS следующий код
ul { z- index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, " < li class = "last" > ")); } ul .last { margin-left: 100%; } * html ul { /* need ie6 only */ height: 30px; }
Прописав необходимые значения свойств и код, получим вот такое резиновое меню:
Недостатки метода6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента
- , а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.
Как сделать горизонтальное меню: разметка и примеры оформления
HTML-разметка и базовые стили для горизонтального меню
- Пункт меню
- Пункт меню
- Пункт меню ...
- Главная
- О нас
- Наши услуги
- Наша услуга №1
- Наша услуга №2
- Наша услуга №3
- Наша услуга №4
- Услуга 5
- Новости
- Контакты
- меню будет тянутся динамически;
- отступы от разделителя до пункта везде одинаковые;
- более красивое и гибкое оформление.
- с випадашкой при наведении в сторону
- со всплывающей выпадашкой третьего уровня
- Главная
- О нас
- Наши услуги
- Наша услуга №1
- Дополнение к услуге 1
- Дополнение к услуге 2
- Наша услуга №2
- Дополнение к услуге 3
- Дополнение к услуге 4
- Наша услуга №3
- Наша услуга №4
- Услуга 5
- Наша услуга №1
- Новости
- Контакты
- Карта проезда
- Дополнение для карты
- Дополнение для карты 2
- Форма обратной связи
- Карта проезда
По умолчанию все элементы списка располагаются вертикально , занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
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;} }Продолжаем серию уроком посвященных выпадающим меню. На очереди горизонтальное выпадающее меню на css своими руками.
Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел .
В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.
Навигация по странице:
И так, наша задача:
сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц
|
|
...
|
Чтобы сделать меню на всю ширину, я использовал таблицы со 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; }
Вот и все!
У нас получилось отличное меню растянутое на всю ширину родительского блока! Пункты друг на друга при наведении мыши не наезжают и верстка не скачет.