Главная → Платежные системы → Создание меню в html и css. Как сделать горизонтальное меню с наклоном? Сдвигаем положение всех элементов меню
Создание меню в html и css. Как сделать горизонтальное меню с наклоном? Сдвигаем положение всех элементов меню
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту.
Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка . Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
нашего списка будет содержать по одной ссылке:
Главная
Новости
Контакты
О нас
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Главная
Новости
Контакты
О нас
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Главная
Новости
Контакты
О нас
Подпункты мы разместим в отдельном списке, вложив его в элемент
, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:
Главная
Новости
Контакты
Адрес
Телефон
Email
О нас
Попробовать »
Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент
список снова был преобразован в блочный элемент:
#navbar ul { display: none; }
#navbar li:hover ul { display: block; }
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none; , чтобы они отображались друг под другом.
#navbar, #navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative; , а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul {
display: none;
background-color: #f90;
position: absolute;
top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navbar {
height: 30px;
background-color: #666;
padding-left: 25px;
min-width: 470px;
}
#navbar li {
float: left;
position: relative;
height: 100%;
}
#navbar li a {
display: block;
padding: 6px;
width: 100px;
color: #fff;
text-decoration: none;
text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }
Не так давно в свет вышел новый стандарт разметки гипертекста html5, который открыл перед веб-мастерами огромный простор для улучшения понимания структуры сайта поисковыми роботами. Изменения коснулись и подходов к разметке навигации.
При использовании 4-го стандарта html оптимальным вариантом верстки меню для сайта был следующий:
<
ul class
=
"nav"
>
<
li><
a href=
"#"
>
Пункт меню 1
<
li><
a href=
"#"
>
Пункт меню 2
<
li><
a href=
"#"
>
Пункт меню 3
Ну а что? Все крайне логично и лаконично. Тег ul согласно документации W3C следует использовать для разметки списков с перечислением чего-либо, а что такое меню, если не список ссылок на конкретные структурные части нашего ресурса?
Новый подход к верстке меню в html5
С выходом 5-го html мы узнали о существовании нового тега nav и что его тоже вроде как следует использовать для разметки меню и, не мудрствуя слишком много, из симбиоза старых и новых знаний получилась конструкция следующего содержания:
<
nav>
<
ul>
<
li><
a href=
"#"
>
Пункт меню 1
<
li><
a href=
"#"
>
Пункт меню 2
<
li><
a href=
"#"
>
Пункт меню 3
На первый взгляд все прекрасно, да и на второй ошибок особо здесь нет, НО! Списки предназначены просто для перечисления чего-либо по порядку. Они не предназначены для разметки навигации. И если раньше у нас особо не было выбора как размечать навигацию, то в новых реалиях все значительно упростилось.
Для того, чтобы поисковый робот понял, что перед ним находится элемент навигации по сайту одного наличия тега nav уже более чем достаточно. А дальше мы можем все максимально упростить:
<
nav>
<
a href=
"#"
>
Пункт меню 1
<
a href=
"#"
>
Пункт меню 2
<
a href=
"#"
>
Пункт меню 3
Среди преимуществ данного варианта разметки меню на html 5 мы можем выделить следующие:
Уменьшая количество кода на странице мы упрощаем ее обработку браузерам и поисковым роботам, что положительно сказывается на SEO сайта.
Меньше тегов – короче DOM структура документа, что тоже лишний плюс для обработки страницы различными приложениями.
Чем лаконичнее код, тем он чище и проще к восприятию.
Как сверстать вложенные меню в html5?
Вложенность меню с использованием новых стандартов хоть и будет выглядеть непривычно с первого взгляда, но зная предназначение тегов 5-го html данную структуру становится достаточно просто понять:
<
nav>
<
section>
<
a href=
"#"
>
Пункт меню 1
<
nav>
<
a href=
"#"
>
Подпункт меню 1
<
a href=
"#"
>
Подпункт меню 2
<
a href=
"#"
>
Подпункт меню 3
<
a href=
"#"
>
Пункт меню 2
<
a href=
"#"
>
Пункт меню 3
Используя тег section мы объединяем группу ссылок в 1 логический элемент меню, дальше же действуем по принципу схожему с принципом вложенности списков: используя второй nav внутри первого мы сообщаем о принадлежности ссылок в этом теге к более низкому уровню навигации, тобишь говорим, что ссылки которые будут в нем содержаться это уже не пункты, а подпункты нашего меню.
Эта конструкция хоть и не привычна на первый взгляд, но все-же во многом проще, чем аналогичная структура выполненная списками.
Подводя итоги
Хоть подход с использованием списков во многом и устарел, но ничего плохого в нем по-прежнему нет. Упростить код или же нет зависит во многом от Вашего желания и особенностей проекта.
К примеру, если для оформления меню нужны дополнительные элементы, на которые нужно повесить всякие прикольные фишки в css, то лучше использовать списки, которые их вам предоставят, чем лепить вокруг ссылок пустые дивы.
Продолжаем серию уроком посвященных выпадающим меню. На очереди горизонтальное выпадающее меню на css своими руками.
Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел .
В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.
Навигация по странице:
И так, наша задача:
сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц
в коде.
Выпадающее горизонтальное меню html
Первым делом, перед тем как приступать писать код, нам нужно сделать html шаблон для меню.
В связи с тем, что мы делаем универсальное меню, я хочу его сделать максимально похожим под вывод меню WordPress. На мой взгляд, это один из самых простых и универсальных Html кодов меню. Выглядит он вот так:
Главная
О нас
Наши услуги
Наша услуга №1
Наша услуга №2
Наша услуга №3
Наша услуга №4
Услуга 5
Новости
Контакты
Как видно с кода, наше выпадающее меню будет реализовано на списках ul и li. Вот так выглядит это меню без стилей CSS:
Скажем прямо выглядит уродливо, как обычный список. Далее нам нужно разукрасить это меню с помощью стилей 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/
, там собраны все примеры и разновидности выпадающих меню.
Прежде всего, давайте разберемся, для чего нужно меню, и что оно из себя
представляет.
Меню сайта
- это список страниц или разделов сайта,
размещенный на видном месте, и предназначенный для доступа пользователя к этим
страницам или разделам. Меню бывают двух типов: главные и дополнительные. Обычно
в главном меню содержатся ссылки на ключевые разделы сайта. В дополнительных
меню обычно размещают ссылки на подразделы или конкретные страницы. Кроме того,
меню могут иметь иерархическую структуру 3-х видов: выпадающий список,
раскрывающийся список и раскрытый список (может иметь древовидную структуру).
Итак, мы выяснили, что меню представляет из себя одноуровневый или
многоуровневый список. Соответственно делать мы его будем с помощью элемента,
представляющего список. В HTML такие элементы определяются тегами ul
и ol
,
обозначающими маркированный и нумерованный списки соответственно. Каждый элемент
списка пределяется тегом li
.
В нашем веб-документе, в месте, предназначенном для размещения кода
горизонтального меню, запишите следующий HTML-код:
Главная
Услуги и цены
Гарантии
Технологии
О компании
Этот список будет главным меню нашего сайта. Не обязательно делать главное меню
в виде закладок. Вы даже можете использовать многоуровневое раскрытое или выпадающее меню, или
еще какое-либо, но при разработке меню обратите внимание на удобство навигации.
Как правило, чем меньше вложенность любого меню тем удобнее. Таким образом,
меню, имееющее более одного уровня вложенности является не самым лучшим выбором.
В этом случае, лучше рассмотреть возможность внедрения дополнительного меню,
либо
еще какого-нибудь способа навигации.
Первый элемент главного меню имеет атрибут class
со значением selected
, поэтому
используя правило CSS, заданное селектором с именем этого класса, мы можем особо
выделить вкладку меню, определенную этим элементом. В данном примере мы не будем
как-либо выделять выбранный элемент. Тем не менее, именно таким способом
создаются меню, которые имеют текущую выбранную вкладку. Кроме того, здесь все
ссылки ведут на текущую страницу. В реальном меню, ссылок, ведущих на себя же
быть не должно, за исключением разве что ссылки на главную страницу. Также все
ссылки заключены в тег span
, он нам понадобится чтобы вертикально центрировать
текст.
Списки в HTML являются блочными элементами. Если сейчас вы откроете нашу
веб-страницу в браузере, вы увидите, что ссылки в нашем меню размещены одна под
другой. Поэтому вместе с оформлением каждого элемента, определяющего вкладку, мы
должны определить стиль его отображения.
Добавим в файл стилей следующие правила:
#hmenu {
margin-left: 160px; /* служит для выравнивания меню так, чтобы оно начиналось
над областью контента */
}
/* оформляем вкладку */
#hmenu li {
/* задаем шрифт */
font-family: Calibri;
font-size: 14px;
/* отступ сверху */
margin-top: 5px;
/* расстояние между вкладками */
margin-left: 0.5em;
margin-right: 0.5em;
/* указатель мыши */
cursor: pointer;
/* Фон */
background-image: url("mm_button.png");
background-repeat: no-repeat;
/* размеры вкладки */
width: 100px;
height: 40px;
/* делаем элемент линейным и одновременно блочным */
display: inline-block
}
/* оформление активной вкладки */
.selected { /* ... */}
/* оформление текста ссылок */
#hmenu li a {
color: green;
text-decoration: none; /* запрещаем подчеркивание ссылок */
}
/* вертикально центрируем текст */
#hmenu li a span {
display: block; /* делаем элемент блочным */
padding-top: 0.8em;
padding-bottom: 0.8em;
}
Здесь все описано внутри кода, лишь отмечу, используя приведенный выше CSS-код, правильно отобразят страницу
только современные браузеры. То есть, в Internet Explorer ниже 8 версии страница
будет представлена неправильно. Это связано с тем, что старые браузеры, такие
как Internet Explorer 6 и 7 не поддерживают значения inline и inline-block для
списков. Решить эту проблему поможет замена строки display:
inline-block во втором правиле на
/* для младших версий Firefox */
display: -moz-inline-stack;
/* для всех, кроме IE 7- и Firefox */
display: inline-block;
/* Для IE 7 и ниже */
*display: inline;
_overflow: hidden;
zoom: 1;
Также, как и в предыдущем случае, в Internet Explorer младших версий
возникнет ошибка отображения. Связана она с удвоением отступов у элементов в
этом браузере.
На следующем уроке мы завершим верстку нашей страницы, разместив логотип нашего
сайта, контент и подвал страницы.
Приветствую Вас, уважаемые читатели блога webcodius! Обязательным элементом практически любого сайта является меню. Поэтому если Ваш сайт имеет больше одной страницы, то без навигационного меню скорей всего не обойтись. Ведь без меню пользователю будет трудно найти нужные ему странички.
Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют , которые создаются с помощью html тегов
и
. Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню
? С использованием CSS это не является большой проблемой.
Для начала создадим обычный маркированный список, содержащий пункты нашего меню:
Главная
Новости
Контакты
О сайте
Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором "menu" .
По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:
Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки (добавить фоновый цвет, рамки, отступы, изменить шрифт) можно получить привлекательную навигационную панель.
Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали
. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block . Я буду использовать правило display:inline-block . Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:
ul#menu li{
}
Теперь элементы списка будут расположены по горизонтали:
Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт li, уберем подчеркивание ссылок, настроим отступы и др.:
#menu, #menu li {
margin: 0; /* убрать внутренние отступы */
padding: 0; /* убрать внешние отступы */
}
#menu {
background: #03658e; /* цвет фона навигационной панели */
}
#menu li{
display:inline-block; /* расположить пункты горизонтально */
text-align: center; /* текст горизонтально по центру */
}
#menu a {
display: block; /* ссылка растягивается на весь пункт li */
padding: 5px 15px; /* задаем внутренние отступы */
color: #fff; /* цвет текста */
text-decoration: none; /* убрать нижнее подчёркивание у ссылок */
}
#menu a:hover {
background: #8AB8CC; /* фон пунктов при наведении */
}
В итоге получится такое привлекательное меню:
Горизонтальное меню по центру
Выравнять меню по центру можно так:
#menu, #menu li {
margin: 0;
padding: 0;
}
#menu {
text-align: center; /* пункты и текст горизонтально по центру */
background: #03658e;
}
#menu li{
display:inline-block;
text-align: center;
}
#menu a {
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
}
#menu a:hover {
background: #8AB8CC;
}
Чтобы сделать все пункты меню одинакового размера указываем для них нужный размер. Только главное чтобы в сумме размеры пунктов не превышали размер всей панели. Можно сделать так:
Рис. 2 (горизонтальное выпадающее меню)
Я сделал 2 скина в одном, что бы показать как выпадашка смотрится справа и по средине.
