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

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

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

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

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

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 .

В каких браузерах работает?


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

Привет. Очень давно не писал постов на тему работы 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; }

Вот и все!

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

01.04.2020

Компьютер

Самое интересное: