Горизонтальное выпадающее меню на css и Html своими руками. Красивое горизонтальное меню на всю ширину Растянуть меню на всю ширину css

Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента

По умолчанию все элементы списка располагаются вертикально , занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.

HTML разметка для горизонтальной навигации

Пункт меню
Пункт меню
Пункт меню

Горизонтальное меню, находящееся внутри тега , можно дополнительно помещать внутрь элемента ... и/или ... . Благодаря этому html-разметке придается семантический смысл, а также появляется дополнительная возможность для форматирования блока меню.

Существует несколько способов разместить их горизонтально . Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

Ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ } a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;} . Дальше стилизуем ссылки по своему желанию.

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;} , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Делаем список ul гибким контейнером с помощью модели . В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {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 для Вашего ресурса. В этом меню пункты будут располагаться в одну строку. 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; }

Прописав необходимые значения свойств и код, получим вот такое резиновое меню:

Объемный код
Невозможность определения активного состояния элемента через селектор класса. Это происходит из-за разрыва слов в пунктах (если оно одно). Решением этой проблемы будет добавление еще однеого контейнера внутрь элементов списка.
Для выпадающего меню нужно подгонять код из-за негативного влияния overflow .


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Продолжаем серию уроком посвященных выпадающим меню. На очереди горизонтальное выпадающее меню на css своими руками.

Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел .

В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.

Навигация по странице:

И так, наша задача:

сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц

Первым делом, перед тем как приступать писать код, нам нужно сделать html шаблон для меню.

В связи с тем, что мы делаем универсальное меню, я хочу его сделать максимально похожим под вывод меню WordPress. На мой взгляд, это один из самых простых и универсальных Html кодов меню. Выглядит он вот так:

Главная
О нас
Наши услуги
- Наша услуга №1
- Наша услуга №2
- Наша услуга №3
- Наша услуга №4
- Услуга 5
Новости
Контакты

Как видно с кода, наше выпадающее меню будет реализовано на списках ul и li. Вот так выглядит это меню без стилей CSS:

Скажем прямо выглядит уродливо, как обычный список. Далее нам нужно разукрасить это меню с помощью стилей CSS.

Стили CSS для выпадающего меню и не только – вещь необходимая как воздух. Ведь выпадающая вкладка делается на основе псевдокласса:hover.

Для горизонтального выпадающего меню нам потребуются вот такие стили:

#menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul::after{ display:block; width:100%; height:0px; clear:both; content:" "; } #menu1 ul li{ position:relative; display:block; float:left; width:auto; height:auto; } #menu1 ul li a{ display:block; padding:9px 25px 0px 25px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; }

Это еще не конец, а только часть CSS для основного горизонтального меню. Далее мы напишем стили для выпадающего списка меню:

#menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; } #menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ float:none; width:100%; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 25px; width:100%; box-sizing:border-box; border-top:1px solid #ffffff; } #menu1 ul li ul li:first-child a{border-top:0px;} #menu1 ul li ul li a:hover{ background:#FDDC96; color:#6572BC; }

Вот теперь все. Сам механизм выпадашки реализован одной строчкой.

Смотрите скин с этим меню:

Рис. 2 (горизонтальное выпадающее меню)

Ниже доступен демо просмотр работы выпадающего меню, а также ссылка на скачивание исходников. (Демо будет открыт выпадашкой поверх этой страницы, не нужно нажимать открыть в новом окне 🙂 или колесико мышки)

Большинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.

Надеюсь вы скачали пример выше. Html у нас остается прежним, а вот CSS мы поменяем полностью. Вы можете просто взять от сюда код CSS и вставить в скачанный пример, или же посмотреть в режиме демо как он работает.

#conteiner{ width:1000px; height:auto; margin:0px auto; padding-top:10px; } #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul{ text-align:justify; font-size:1px; line-height:1px; } #menu1 > ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #menu1 ul li{ position:relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; } #menu1 ul li a{ display:block; padding:9px 35px 0px 35px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; } #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; } #menu1 ul li:last-child ul{/*последний пункт будет прикреплен по правому краю*/ left:auto; right:0px; } #menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ display:block; width:auto; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 35px; width:100%; box-sizing:border-box; border-top:1px solid #ffffff; } #menu1 ul li ul li:first-child a{border-top:0px;} #menu1 ul li ul li a:hover{ background:#FDDC96; color:#6572BC; }

Также этот пример отличается от первого тем, что выпадающее меню, сама выпадашка, тянется в зависимости от ширины всех пунктов меню.

Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство "white-space:nowrap;" у селектора #menu1 ul li ul, и удалить его.

Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:

Без разделителей это меню смотрится так себе. Разделители можно добавить в хтмл руками, но если у вас CMS, например WordPress, – то руками там добавлять не сильно удобно.

Существует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют::before или::after , или куда проще border-left, border-right я дублировать не буду.

Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.

Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:

Сразу после .

Как вы поняли, нужно создать файл script-menu-3.js и туда закинуть вот такой маленький код:

$(document).ready(function(){ $("#menu1 > ul > li:not(:last-child)").after(" "); });

Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:

#menu1 ul li.razd{ height:28px; width:1px; background:#ffffff; margin-top:4px; }

Выглядеть такое горизонтальное выпадающее меню с разделителями на jQuery будет вот так:

Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:

Преимуществами такого решения является:

меню будет тянутся динамически;
отступы от разделителя до пункта везде одинаковые;
более красивое и гибкое оформление.

Раз пошла речь о многоуровневых выпадающих меню при наведении, наверное стоить поделить их на подгруппы:

с випадашкой при наведении в сторону
со всплывающей выпадашкой третьего уровня

В своих примерах я буду показывать многоуровневое меню CSS на 3 уровня, далее думаю будет не сложно догадаться что нужно делать.

Для начала нам нужно немножко подкоректировать наш хтмл. Там добавится парочка строк для 3 уровня:

Главная
О нас
Наши услуги
- Наша услуга №1
  - Дополнение к услуге 1
  - Дополнение к услуге 2
- Наша услуга №2
  - Дополнение к услуге 3
  - Дополнение к услуге 4
- Наша услуга №3
- Наша услуга №4
- Услуга 5
Новости
Контакты
- Карта проезда
  - Дополнение для карты
  - Дополнение для карты 2
- Форма обратной связи

#conteiner{ width:1000px; height:auto; margin:0px auto; padding-top:10px; } #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul{ text-align:justify; font-size:1px; line-height:1px; } #menu1 > ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #menu1 ul li{ position:relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; } #menu1 ul li.razd{ height:28px; width:1px; background:#ffffff; margin-top:4px; } #menu1 ul li a{ display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; } #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; } #menu1 > ul > li:last-child > ul{/*последний пункт будет прикреплен по правому краю*/ left:auto; right:0px; } #menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ display:block; width:auto; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box; border-top:1px solid #ffffff; } #menu1 ul li ul li:first-child > a{border-top:0px;} #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{ background:#FDDC96; color:#6572BC; } #menu1 ul li ul li ul{ top:0px; left:100%; display:none; background:#fddc96; } #menu1 > ul > li:last-child > ul ul{left:auto; right:100%;} #menu1 ul li ul li ul a{color:#F38A01;}

Файлы для jQuery копируем как были с предыдущего примера. Решил оставить разделители, что б меню хоть немного лучше смотрелось. Можно конечно и без них.

Вот так получилось:
Я сделал 2 скина в одном, что бы показать как выпадашка смотрится справа и по средине.

Ниже вы можете посмотреть демо а также скачать пример:

Немного масло масляное получилось в заголовке, но прокатит, главное код.

Суть этого примера сделать горизонтальное выпадающее меню на всю ширину с выпадашкой на всю ширину + многоуровневость.

Хтмл код я менять не буду, его можно взять с предыдущего примере. Разделители на jQuery также оставляем.

Будет меняться только CSS полностью:

#conteiner{ width:1000px; height:auto; margin:0px auto; padding-top:10px; } #menu1{ position:relative; display:block; width:100%; height:auto; z-index:10; } #menu1 ul{ position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; } #menu1 > ul{ text-align:justify; font-size:1px; line-height:1px; } #menu1 > ul::after{ display:inline-block; width:100%; height:0px; content:" "; } #menu1 ul li{ position:relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; } #menu1 > ul > li{position:static;} #menu1 ul li.razd{ height:28px; width:1px; background:#ffffff; margin-top:4px; } #menu1 ul li a{ display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; } #menu1 ul li > a:hover, #menu1 ul li:hover > a{ background:#EBBD5B; color:#2B45E0; } #menu1 ul li ul{ position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; } #menu1 > ul > li > ul::after{ clear:both; float:none; width:100%; height:0px; content:" "; } #menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/ #menu1 ul li ul li{ display:block; width:30%; float:left; } #menu1 ul li ul li a{ display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box; } #menu1 ul li ul li:first-child > a{border-top:0px;} #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{ background:#FDDC96; color:#6572BC; } #menu1 ul li ul li ul{ top:0px; left:100%; display:none; background:#fddc96; z-index:15; } #menu1 ul li ul li ul li{display:block; float:none; width:100%;} #menu1 ul li ul li ul a{ color:#F38A01; border-top:1px solid #ffffff; }

Вот так меню будет смотреться:Единственный момент – у сайта должно быть достаточно места, так как крайнего пункта справа нет места для выпадашки. Эту проблему можно решить через:nth-child но я не стал городить огород.

Смотрите демо горизонтального многоуровневого выпадающего меню:

Как вы могли заметить: нижняя плашка тоже на всю ширину. Вот так делаются выпадашки в несколько блоков.

На этом у меня все, надеюсь хоть один мой пример вам подошел. Спасибо за внимание.

Если вы прочли пост полностью, но не нашли как сделать свое горизонтальное выпадающее меню на css, задайте вопрос в комментариях или воспользуйтесь поиском по сайту.

Также, советую посетить родительскую страницу https://сайт/vypadayushhee-menu/ , там собраны все примеры и разновидности выпадающих меню.

Категории
- Android
- Apple
- Hardware
- Malware
- Networks
- Software
- Windows
- Windows 10
- Windows 7
- Windows Server

Популярное