Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку.menu:
Menu a {
border-top: 1px solid blue;
}
.menu {
border-bottom: 1px solid blue;
}
Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Основная задача при создании горизонтальной навигации - расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Первый вариант - задать пунктам списка свойство display со значением inline либо inline-block:
После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
Menu a {
text-decoration: none;
font-family: sans-serif;
color: #5757a0;
display: inline-block;
padding: 10px 20px;
background-color: lavender;
border-bottom: 5px solid #5757a0;
}
Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding . Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
:Menu li {
float: left;
}
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,
), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись: Menu {
overflow: hidden;
}
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента:after . Пример выше - это еще один способ решить вопрос с исчезнувшей высотой контейнера.
Примечание:
если вы установите фон для элемента.menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать
В своей работе, немало времени уделял разработке различных видов навигации для сайтов, как с применением , так и используя чистый стиль 3 без дополнительных изображений и подключаемых javascript. Решил все наработки по теме собрать воедино и выложить в качестве своеобразной подборки уроков по созданию навигации. В обзоре представлены разные типы , по стилю исполнения и функционалу, многоуровневые с выпадающими подменю, в популярном стиле «аккордеон», вертикальные и горизонтальные с динамическими эффектами, простые и сложные по своей структуре. Отталкиваясь от этих уроков, исходя из приведенных примеров, экспериментируя и применив немного фантазии, вы с легкостью сможете сделать свой сайт выделяющимся из общей массы, эффектным и запоминающимся.
✓
Нажав на заголовок, вы попадете непосредственно на страницу с детальным описанием всего процесса, а жмякнув по картинке, перейдете на страницу с примером работы выбранного вами меню ツ
1.
При создании этого замечательного меню использовались чистые стили и функции CSS3, без каких либо дополнительных файлов изображений и javascript. С поддержкой современными браузерами новых стандартов CSS3, стало возможным использовать в разработке дизайна сайтов, все волшебные свойства магии CSS3. Применяя на практике данную технику создания меню, можно добиться потрясающих результатов.
2.
Из этого урока, вы узнаете, как с помощью стилей и новых свойств CSS3, не используя javascript и изображения, можно заделать отличное, функциональное и быстро работающее меню в стиле «аккордеон».
3.
Подробный мануал по созданию красивого меню в стиле «аккордеон» с помощью CSS и библиотеки jQuery. Меню тестировалось и замечательно работает во всех современных браузерах. Использование функции линейного градиента css3 в оформлении, делает это меню более выразительным и динамичным.
4.
В уроке представлен весь процесс изготовления интересного, вертикального меню для сайта, построенного полностью на использовании CSS и небольшого файла изображения, которое при желании Вы с легкостью сможете отредактировать под свои нужды.
5.
В продолжение предыдущего урока, добавлено подробное описание варианта создания вертикального меню с вложенными подпунктами
6.
Небольшой, но в тоже время подробнейший урок, по созданию качественного, с небольшим количеством HTML, CSS и JavaScript кода, с красивым интерфейсом, блока навигации в стиле «Аккордеон».
7.
Еще одно интересное решение в плане создания многоуровневого меню навигации с использованием jQuery. Кросс-браузерность конечного продукта, JQuery анимация и градиент CSS3 делает навигационный блок еще более привлекательным.
8.
Мне нравится решение, когда меню ведет себя как раскрывающиеся списки. Мастеровой люд часто использует JavaScript, чтобы добиться этого эффекта, в уроке же расписано, как достигнуть желаемого, применяя только чистые стили и функции CSS.
9.
Из этого урока, вы узнаете, как сделать красивое меню с выпадающими подпунктами. Привлекает внимание нестандартное решение вывода подменю, не как обычно, прямо под основными пунктами меню, а элементы подменю выровнены по левому краю, с отображением непосредственно под панелью навигации.
10.
Перевод и адаптированная версия урока по созданию красивого, горизонтального меню в стиле "Lava-Lamp. В интернете представлено много версий меню выполненных в этом стиле, опираясь на полученные знания из урока, вы свободно сможете создать что нибудь свое индивидуальное.
На этом пока все. В этой подборке представлена лишь малая часть того, что можно сделать в плане создания красивых и индивидуальных, а главное функциональных меню навигации для ваших проектов. Надеюсь кто то найдет для себя подходящий вариан и использует его в своей работе по благоустройству сайта. Если кому понравилась статья, комментируйте, делитесь с друзьями через Твиттер, Google+ и другие соц. сервисы, а можно просто добавить статью в закладки
Горизонтальное меню
представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента
, а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.
Как сделать горизонтальное меню: разметка и примеры оформления
HTML-разметка и базовые стили для горизонтального меню
По умолчанию все элементы списка располагаются вертикально
, занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
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. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed");
.menu-main {
list-style: none;
margin: 40px 0 5px;
padding: 25px 0 5px;
text-align: center;
background: white;
}
.menu-main li {display: inline-block;}
.menu-main li:after {
content: "|";
color: #606060;
display: inline-block;
vertical-align:top;
}
.menu-main li:last-child:after {content: none;}
.menu-main a {
text-decoration: none;
font-family: "Ubuntu Condensed", sans-serif;
letter-spacing: 2px;
position: relative;
padding-bottom: 20px;
margin: 0 34px 0 30px;
font-size: 17px;
text-transform: uppercase;
display: inline-block;
transition: color .2s;
}
.menu-main a, .menu-main a:visited {color: #9d999d;}
.menu-main a.current, .menu-main a:hover{color: #feb386;}
.menu-main a:before,
.menu-main a:after {
content: "";
position: absolute;
height: 4px;
top: auto;
right: 50%;
bottom: -5px;
left: 50%;
background: #feb386;
transition: .8s;
}
.menu-main a:hover:before, .menu-main .current:before {left: 0;}
.menu-main a:hover:after, .menu-main .current:after {right: 0;}
@media (max-width: 550px) {
.menu-main {padding-top: 0;}
.menu-main li {display: block;}
.menu-main li:after {content: none;}
.menu-main a {
padding: 25px 0 20px;
margin: 0 30px;
}
}
2. Адаптивное меню для свадебного сайта
@import url("https://fonts.googleapis.com/css?family=PT+Sans");
.top-menu {
position: relative;
background: #fff;
box-shadow: inset 0 0 10px #ccc;
}
.top-menu:before,
.top-menu:after {
content: "";
display: block;
height: 1px;
border-top: 3px solid #575350;
border-bottom: 1px solid #575350;
margin-bottom: 2px;
}
.top-menu:after {
border-bottom: 3px solid #575350;
border-top: 1px solid #575350;
box-shadow: 0 2px 7px #ccc;
margin-top: 2px;
}
.menu-main {
list-style: none;
padding: 0 30px;
margin: 0;
font-size: 18px;
text-align: center;
position: relative;
}
.menu-main:before,
.menu-main:after {
content: "\25C8";
line-height: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.menu-main:before {left: 15px;}
.menu-main:after {right: 15px;}
.menu-main li {
display: inline-block;
padding: 5px 0;
}
.menu-main a {
text-decoration: none;
display: inline-block;
margin: 2px 5px;
padding: 6px 15px;
font-family: "PT Sans", sans-serif;
font-size: 16px;
color: #777777;
border-bottom: 1px solid transparent;
transition: .3s linear;
}
.menu-main .current, .menu-main a:hover {
border-radius: 3px;
background: #f3ece1;
color: #313131;
text-shadow: 0 1px 0 #fff;
border-color: #c6c6c6;
}
@media (max-width: 500px) {
.menu-main li {display: block;}
}
3. Адаптивное меню с фестонами
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption");
.menu-main {
list-style: none;
padding: 0 30px;
margin: 0;
font-size: 18px;
text-align: center;
position: relative;
background: white;
}
.menu-main:after {
content: "";
position: absolute;
width: 100%;
height: 20px;
left: 0;
bottom: -20px;
background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px;
background-size: 20px 20px;
background-repeat: repeat-x;
}
.menu-main li {display: inline-block;}
.menu-main a {
text-decoration: none;
display: inline-block;
margin: 0 15px;
padding: 10px 30px;
font-family: "PT Sans Caption", sans-serif;
color: #777777;
transition: .3s linear;
position: relative;
}
.menu-main a:before,
.menu-main a:after {
content: "";
position: absolute;
top: calc(50% - 3px);
width: 6px;
height: 6px;
border-radius: 50%;
background: #F58262;
opacity: 0;
transition: .5s ease-in-out;
}
.menu-main a:before {left: 5px;}
.menu-main a:after {right: 5px;}
.menu-main a.current:before,
.menu-main a.current:after,
.menu-main a:hover:before,
.menu-main a:hover:after {opacity: 1;}
.menu-main a.current,
.menu-main a:hover {color: #F58262;}
@media(max-width:680px) {
.menu-main li {display: block;}
}
4. Адаптивное меню на ленточке
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption");
.top-menu {
margin: 0 60px;
position: relative;
background: #5A394E;
box-shadow:
inset 1px 0 0 rgba(255,255,255,.1),
inset -1px 0 0 rgba(255,255,255,.1),
inset 150px 0 150px -150px rgba(255,255,255,.12),
inset -150px 0 150px -150px rgba(255,255,255,.12);
}
.top-menu:before,
.top-menu:after {
content: "";
position: absolute;
z-index: 2;
left: 0;
width: 100%;
height: 3px;
}
.top-menu:before {
top: 0;
border-bottom: 1px dashed rgba(255,255,255,.2);
}
.top-menu:after {
bottom: 0;
border-top: 1px dashed rgba(255,255,255,.2);
}
.menu-main {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.menu-main:before,
.menu-main:after {
content: "";
position: absolute;
width: 50px;
height: 0;
top: 8px;
border-top: 18px solid #5A394E;
border-bottom: 18px solid #5A394E;
transform: rotate(360deg);
z-index: -1;
}
.menu-main:before {
left: -30px;
border-left: 12px solid rgba(255, 255, 255, 0);
}
.menu-main:after {
right: -30px;
border-right: 12px solid rgba(255, 255, 255, 0);
}
.menu-main li {
display: inline-block;
margin-right: -4px;
}
.menu-main a {
text-decoration: none;
display: inline-block;
padding: 15px 30px;
font-family: "PT Sans Caption", sans-serif;
color: white;
transition: .3s linear;
}
.menu-main a.current,
.menu-main a:hover {background: rgba(0,0,0,.2);}
@media (max-width: 680px) {
.top-menu {margin: 0;}
.menu-main li {
display: block;
margin-right: 0;
}
.menu-main:before,
.menu-main:after {content: none;}
.menu-main a {display: block;}
}
5. Адаптивное меню с логотипом по середине
@import url("https://fonts.googleapis.com/css?family=Arimo");
.top-menu {
position: relative;
background: rgba(34,34,34,.2);
}
.menu-main {
list-style: none;
margin: 0;
padding: 0;
}
.menu-main:after {
content: "";
display: table;
clear: both;
}
.left-item {float: left;}
.right-item {float: right;}
.navbar-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.menu-main a {
text-decoration: none;
display: block;
line-height: 80px;
padding: 0 20px;
font-size: 18px;
letter-spacing: 2px;
font-family: "Arimo", sans-serif;
font-weight: bold;
color: white;
transition: .3s linear;
}
.menu-main a:hover {background: rgba(0,0,0,.3);}
@media (max-width: 830px) {
.menu-main {
padding-top: 90px;
text-align: center;
}
.navbar-logo {
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
}
.menu-main li {
float: none;
display: inline-block;
}
.menu-main a {
line-height: normal;
padding: 20px 15px;
font-size: 16px;
}
}
@media (max-width: 630px) {
.menu-main li {display: block;}
}
6. Адаптивное меню с логотипом слева
@import url("https://fonts.googleapis.com/css?family=Arimo");
.top-menu {
background: rgba(255,255,255,.5);
box-shadow: 3px 0 7px rgba(0,0,0,.3);
padding: 20px;
}
.top-menu:after {
content: "";
display: table;
clear: both;
}
.navbar-logo {display: inline-block;}
.menu-main {
list-style: none;
margin: 0;
padding: 0;
float: right;
}
.menu-main li {display: inline-block;}
.menu-main a {
text-decoration: none;
display: block;
position: relative;
line-height: 61px;
padding-left: 20px;
font-size: 18px;
letter-spacing: 2px;
font-family: "Arimo", sans-serif;
font-weight: bold;
color: #F73E24;
transition:.3s linear;
}
.menu-main a:before {
content: "";
width: 9px;
height: 9px;
background: #F73E24;
position: absolute;
left: 50%;
transform: rotate(45deg) translateX(6.5px);
opacity: 0;
transition: .3s linear;
}
.menu-main a:hover:before {opacity: 1;}
@media (max-width: 660px) {
.menu-main {
float: none;
padding-top: 20px;
}
.top-menu {
text-align: center;
padding: 20px 0 0 0;
}
.menu-main a {padding: 0 10px;}
.menu-main a:before {transform: rotate(45deg) translateX(-6px);}
}
@media (max-width: 600px) {
.menu-main li {display: block;}
}
Горизонтальная
Панель навигации
Наличие простой в использовании навигации важно для любого веб сайта.
С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели
Панель авигации = список ссылок
Панель навигации нуждается в стандартном HTML в качестве основы.
В наших примерах мы построим панель навигации из стандартного HTML списка.
Панель навигации - это в основном список ссылок, поэтому использование элементов
и естественно :
Пример
Редактор кода »
Теперь давайте удалим маркеры, поля и отступы из списка:
Пример объяснение:
list-style-type: none; - Убирает маркеры.
В панели навигации не нужны маркеры для списка
Установить margin: 0; и padding: 0;
чтобы удалить настройки браузера по умолчанию
Код в приведенном выше примере - это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.
Вертикальная панель навигации
Чтобы создать вертикальную панель навигации, нужно задать стиль элемента
в списке, к дополнению коду выше:
Объяснение примера:
display: block; - Отображение ссылок в виде элементов блока составляет
область кликабельных ссылок (не только текст), и позволяет указать ширину
(и отступы, поля, высота и т. д. какие вы хотите)
width: 60px; - Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей
Вы также можете установить ширину