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

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

Привет. Очень давно не писал постов на тему работы html/css. Недавно как раз начал верстать новый макет и в процессе наткнулся на интересный прием, который позволяет сделать меню резиновым (в него можно будет добавлять новые пункты и размер не увеличиться, а всегда будет 100% родительского блока). Итак, сегодня реализуем на css резиновое меню.

Кому лень читать статью, можно посмотреть это видео. Автор также все очень классно объясняет:

Резиновое меню на CSS — шаг 1

Первый шаг — это всегда html разметка, куда же без нее. Но в нашем случае все будет просто:

блок обертка для меню
само меню, выведенное через маркированный список (тег ul)
ну и пункты меню внутри, а в них, соответственно, уже ссылки

Все понятно, вот такой у меня код разметки:

Выглядит это все стандартно, вот так:

Теперь будем приводить все в нужный вид, за работу берется CSS.

Шаг 2 — базовые стили

Далее я добавлю стили блоку-обертке. А именно, установлю максимальную ширину в 600 пикселей (просто чтобы удобно было делать скриншот, чтобы меню влезало), а также отцентрирую блок.

Wrap{
background: #fff;
max-width: 600px;
margin: 0 auto;
}

Шаг 3 — реализуем резиновость

Теперь беремся за само меню. У него (у тега ul) я уберу маркеры, сделаю фоновый линейный градиент , и, самое главное, свойством display: table-row заставлю контейнер для меню вести себя как табличный ряд. Это важно сделать для дальнейших манипуляций.

R-menu{
background: linear-gradient(to right, #b0d4e3 0%,#88bacf 100%);
display: table-row;
list-style: none;
}

Как видите, приведенный код как раз решил все, о чем я писал. Кстати, градиенты удобно генерировать с помощью инструмента Ultimate CSS Gradient generator . О нем я еще напишу как-то.

R-menu li{
vertical-align: bottom;
display: table-cell;
width: auto;
text-align: center;
height: 50px;
border-right: 1px solid #222;
}

vertical-align: bottom — это свойство необходимо для того, чтобы в случае, если текст в пункте меню займет 2 строки, он отображался ровно. Когда мы сделаем меню, можете удалить это свойство, увеличить масштаб чтобы пункты сжались и текст перенесся на две строки и увидите проблему с отображением. Верните свойство и все будет нормально.
display: table-cell — поскольку мы задали самому меню отображения табличным рядом, логично будет задать его пунктам отображение как ячейки в таблице. Это обязательно.
width: auto — ширина будет вычисляться автоматически, в зависимости от длины текста в пункте
text-align: center — это просто для выравнивания текста внутри по центру
height: 50px — задаем высоту в 50 пикселей
ну и border-right это просто граница справа, такой разделитель для пунктов

Пока меню выглядит неказисто, но ничего, настало время довести его до ума.

Последнее, что нужно сделать — задать стили ссылкам внутри пунктов. Тут у меня такой код:

R-menu li a{
text-decoration: none;
width: 1000px;
height: 50px;
vertical-align: middle;
display: table-cell;
color: #fff;
font: normal 14px Verdana;
}

И вот так теперь выглядит меню:

Опять же, поясню некоторые строки:

свойство text-decoration отменяет подчеркивание у ссылок, которое ставится по умолчанию
width: 1000px — пожалуй, самая важная строка. Нужно задать ссылкам примерно такую ширину, можно и меньше, но обязательно больше максимально широкого пункта меню. Ссылки не станут в ширину 1000 пикселей, поскольку ширину ограничит пункт меню li, у которого ширина задана как auto, зато это позволит сделать так, чтобы при любом количестве пунктов в меню оно всегда было на 100 процентов ширины.
vertical-align: middle и display: table-cell — первое выровняет текст по вертикали по центру, а второе также делает отображение ссылок в виде ячеек. Оба свойства нужны.
font — ну это просто набор установок для шрифта. Читайте про css свойства для шрифтов в этой статье .

Шаг 4 (по желанию) можно добавить интерактивности

Например, чтобы при наведении изменялся цвет пункта меню. Реализуется это совсем просто, с помощью псевдокласса hover :

R-menu li:hover{
background-color: #6bba70;
}

Тестируем меню на резиновость

Отлично, меню готовы, но мы не проверили самое главное — насколько оно резиновое, как я вам и обещал. Что ж, добавлю в меню еще 2 пункта:

Меню осталось в ширину на 600 пикселей. Остальные пункты просто немного ужались, чтобы поместились 2 новых.

Добавлю еще 1 длинный пункт:

Как видите, меню еще немного ужалось и длинный пункт отобразился вполне себе нормально. А если бы не было свойства vertical-align: bottom , о котором я вам говорил, то меню выглядело бы хуже.

Уменьшу меню до трех пунктов.

Пунктам стало гораздо свободнее, но само меню не поменялось в ширине. Вот мы и сделали 100% резиновое меню!

Как его адаптировать?

В принципе, если вы задали блоку-обертке не фиксированную, а максимальную ширину, то его даже не нужно адаптировать. В моем случае у меня стоит свойство max-width: 600px и когда ширина станет меньше 600 пикселей, блок просто будет уменьшаться вслед за экраном, не образуя горизонтальной прокрутки.

Ну а если вы хотите как-то изменить или поправить меню на мобильных устройствах или широких экранах, то медиа запросы вам в помощь! Успехов в сайтостроении!

Добрый день!

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

Сегодня я бы хотел вам показать, как создавать именно такое меню.

Итак, наше меню будет следующим:

Оно растянуто на всю ширину, при наведении — выделяется. По бокам меню закруглено.

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; }

Вот и все!

У нас получилось отличное меню растянутое на всю ширину родительского блока! Пункты друг на друга при наведении мыши не наезжают и верстка не скачет.

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

очевидных преимуществ

Как сделать горизонтальное меню: разметка и примеры оформления

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. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

2. Адаптивное меню для свадебного сайта

3. Адаптивное меню с фестонами

4. Адаптивное меню на ленточке

5. Адаптивное меню с логотипом по середине

6. Адаптивное меню с логотипом слева

Довольно распространенная схема расположения меню сайта, когда контейнер с ним занимает всю ширину доступную на странице. При этом первый пункт прилегает к левому краю, а последний – к правому, а расстояние между всеми элементами равно. Сегодня мы расскажем, как это делается.

Мы предлагаем вам пример реализации резинового меню при помощи 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 .