[вёрстка] Как сделать горизонтальное меню для сайта
Классическим средством навигации по сайту является горизонтальное меню в шапке сайта. Посмотрим, как сделать простое горизонтальное меню на HTML и CSS.
Простое HTML меню
По смыслу меню является списком разделов сайта, поэтому логично для меню использовать тег ul — маркированный список. Кроме того, в HTML5 появился новый тег, который следует использовать для обозначения области навигации по сайту — nav. Использование этих двух тегов позволит поисковой системе точнее разобраться в структуре нашего сайта.
В качестве примера возьмём меню из 4-х пунктов: Главная, Статьи, Услуги и Контакты. Таким образом код HTML нашего меню будет выглядеть так:
<nav class='hmenuA'>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
Если у вас nav используется только для главного горизонтального меню, можно обойтись без указания класса и все стили описать с использованием nav в качестве опорного селектора. Но я буду показывать несколько вариантов меню, поэтому добавил класс hmenuA, чтобы можно было применить разные стили к разным вариантам меню. Буква A на конце класса потому, что будут еще варианты B и С
Пока что наше меню совсем не похоже на горизонтальное. Выглядит оно вот так:
В первую очередь необходимо убрать маркеры списка и лишние отступы:
.hmenuA > ul {
list-style: none;
margin: 0px;
padding: 0px;
}
К элементам списка мы применяем режим inline-block:
.hmenuA > ul > li {
display: inline-block;
}
Этот режим означает, что «снаружи» элементы списка будут обрабатываться как строчные элементы, т.е. они вытянутся в одну строку. Внутри же они будут по-прежнему блочными элементами. Получается горизонтальная строка меню:
Видите пробелы между элементами меню? Это не отступы, а реальные текстовые пробелы. Они возникли из-за того, что HTML-код был разбит на несколько строк, и «пустые» символы между пунктами меню браузер интерпретировал как пробелы между «словами». Эту особенность надо учитывать при использовании режима inline-block.
В принципе, эти пробелы нам не очень мешают. Но если вам при вёрстке меню потребуется задать точные расстояния отступов между пунктами меню или прижать пункты меню друг к другу вообще без отступов, пробелы нам помешают. Поэтому при вёрстке горизонтальных панелей inline-block-ом принято все ненужные пробелы убирать. Я исправил HTML код меню так, чтобы между тегами не было лишних пробелов. Чтобы код оставался нормально читаемым, я поместил переводы строк внутрь тегов, перед закрывающей угловой скобкой. Вот такой код получился:
<nav class='hmenuA'>
<ul>
<li><a href="#">Главная</a></li
><li><a href="#">Статьи</a></li
><li><a href="#">Услуги</a></li
><li><a href="#">Контакты</a></li>
</ul>
</nav>
Теперь пробелы исчезли:
Не бойтесь, что пункты меню сливаются. Сейчас мы добавим немного оформления, и всё станет намного симпатичнее:
.hmenuA > ul {
list-style: none;
margin: 0px;
padding: 0px;
background-color: #d0e0ff;
text-align: center;
}
.hmenuA > ul > li {
display: inline-block;
}
.hmenuA > ul > li > a {
display: block;
padding: 0 30px;
text-decoration: none;
color: #088;
line-height: 50px;
font-family: "Verdana", "Arial";
font-size: 18px;
}
text-align: center используется, чтобы выровнять меню по центру страницы. Та как мы указали, что пункты меню следует воспринимать как строчные элемениты, они выравниваются при помощи text-align.
Высоту меню я задал, указав line-height. Этот приём позволяет одновременно указать высоту блока и выровнять текст по центру блока в вертикальном направлении.
Для тега a я также задал режим display: block, это делает ссылкой, на которую можно надать, весь прямоугольник пункта меню, а не только небольшую область текста.
Результат:
Как поведёт себя наше меню при уменьшении ширины страницы? Уменьшите окно браузера по ширине так, чтобы меню перестало в него помещаться. Что происходит? Меню из однострочного становистя двустрочным. (Или даже трёх- и четырёхстрочным, если сделать окно браузера совсем узким.)
Если вы не хотите, чтобы меню становилось многострочным, вам придётся ограничить минимальную ширину страницы, подобрав подходящее значение min-width для тега body.
Давайте добавим немного анимации. Самый простой вариант — подчёркивание пунктов меню при наведении мыши. Но так как простое подчёркивание — это совсем скучно, давайте сделаем, чтобы оно появлялось и исчезало плавно.
Добавим к стилям следующее:
.hmenuA > ul > li > a {
position: relative;
}
.hmenuA > ul > li > a:after {
content: ' ';
position: absolute;
height: 2px;
background-color: transparent;
bottom: 10px;
left: 30px;
right: 30px;
transition: background-color 0.6s ease;
}
.hmenuA > ul > li > a:hover:after {
background-color: #088;
}
Результат:
Другой вариант анимации:
.hmenuA > ul > li > a {
position: relative;
}
.hmenuA > ul > li > a:after {
content: ' ';
position: absolute;
height: 2px;
background-color: #088;
bottom: 10px;
left: 30px;
right: 100%;
transition: right 0.7s ease;
}
.hmenuA > ul > li > a:hover:after {
right: 30px;
}
Посмотрим еще несколько вариантов, как можно оформить меню. Всё ограничивается лишь вашей фантазией.
Меню с плоскими кнопками
Вариант меню с плоскими кнопками и появлением окантовки при наведении:
<style>
.hmenuB > ul {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
.hmenuB > ul > li {
display: inline-block;
padding: 3px;
}
.hmenuB > ul > li > a {
display: block;
padding: 0 15px;
text-decoration: none;
background-color: #349;
color: #fff;
line-height: 36px;
font-family: "Verdana", "Arial";
font-size: 16px;
transition: background-color 0.7s ease;
position: relative;
}
.hmenuB > ul > li > a:hover {
background-color: #119;
}
.hmenuB > ul > li > a:after {
content: ' ';
position: absolute;
background-color: transparent;
border: 1px solid transparent;
transition: border-color 0.7s ease;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}
.hmenuB > ul > li > a:hover:after {
border-color: #fff;
}
</style>
<nav class='hmenuB'>
<ul>
<li><a href="#">Главная</a></li
><li><a href="#">Статьи</a></li
><li><a href="#">Услуги</a></li
><li><a href="#">Контакты</a></li>
</ul>
</nav>
Меню с рельефными разделителями
Манипулируя цветом границ на стыке пунктов меню, можно добиться появления псевдо-рельефной линии. Похожее меню используется в шапке этого сайта.
<style>
.hmenuC > ul {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
background-color: #322;
}
.hmenuC > ul > li {
display: inline-block;
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.hmenuC > ul > li:first-child {
border-left-color: transparent;
}
.hmenuC > ul > li:last-child {
border-right-color: transparent;
}
.hmenuC > ul > li > a {
display: block;
padding: 0 15px;
text-decoration: none;
color: #fff;
line-height: 36px;
font-family: "Verdana", "Arial";
font-size: 16px;
transition: all 0.7s ease;
}
.hmenuC > ul > li > a:hover {
text-decoration: underline;
}
</style>
<nav class='hmenuC'>
<ul>
<li><a href="#">Главная</a></li
><li><a href="#">Статьи</a></li
><li><a href="#">Услуги</a></li
><li><a href="#">Контакты</a></li>
</ul>
</nav>
Анимированное меню с подписями
Красивое меню с подписями, которые появляются при наведении мыши:
<style>
.hmenuD > ul {
list-style: none;
margin: 0px auto;
padding: 0px;
text-align: center;
width: 640px;
height: 50px;
background-color: #349;
border: 2px solid rgba(0, 0, 0, 0.5);
}
.hmenuD > ul > li {
display: inline-block;
width: 25%;
height: 100%;
box-sizing: border-box;
border-right: 1px solid rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.hmenuD > ul > li:last-child {
border-right-color: transparent;
}
.hmenuD > ul > li > a {
display: block;
padding: 0 15px;
text-decoration: none;
color: #fff;
font-family: "Verdana", "Arial";
position: absolute;
left: 0px;
right: 0px;
top: 0px;
}
.hmenuD > ul > li > a > div {
padding-top: 0px;
line-height: 45px;
font-size: 16px;
transition: all 0.7s ease;
}
.hmenuD > ul > li > a:hover > div {
padding-top: 4px;
line-height: 20px;
}
.hmenuD > ul > li > a > div + div {
font-size: 12px;
}
</style>
<nav class='hmenuD'>
<ul>
<li><a href="#">
<div>Главная</div>
<div>О нас</div>
</a></li
><li><a href="#">
<div>Статьи</div>
<div>Уроки CSS</div>
</a></li
><li><a href="#">
<div>Услуги</div>
<div>Вёрстка, дизайн</div>
</a></li
><li><a href="#">
<div>Контакты</div>
<div>Свяжитесь с нами</div>
</a></li>
</ul>
</nav>
6 комментариев
все круто но помоему в последнем примере нет смысла задавать для .hmenuD > ul > li > a {
position absolute он и без этого неплохо работает. отпишись если я ошибаюсь...
Спасибо как раз то что искал.
Не получается добавить больше, чем 4 красивых ссылки.
Скачайте прогу Видео монтаж!
Отличные меню, красиво смотрятся и отлично работают.
Спасибо автору!!!
Отправить комментарий