Как сделать меню навигации в html. CSS Панель навигации
Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента
- , а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.
- Пункт меню
- Пункт меню
- Пункт меню ...
- вполне логично:
горизонтальный
Навигация Бары
Имея легкий в использовании навигации имеет важное значение для любого веб-сайта.
С помощью CSS вы можете превратить скучные меню HTML в симпатичных панели навигации.
Панель навигации = Список ссылок
Панель навигации необходим стандартный HTML в качестве базы.
В наших примерах мы будем строить навигационную панель из стандартного списка HTML.
Панель навигации в основном список ссылок, так что с помощью
-
и
-
элементы имеет смысл:
пример
- Home
- News
- Contact
- About
Теперь давайте уберем пули и поля и отступы из списка:
Объяснение примера:
- list-style-type: none; - Удаляет пули. Панель навигации не нужен список маркеров
- Установить margin: 0; и padding: 0; для удаления настроек браузера по умолчанию
Код в приведенном выше примере стандартный код используется в обоих вертикальных и горизонтальных панелей навигации.
Вертикальная панель навигации
Чтобы построить вертикальную панель навигации, вы можете стиль элементов внутри списка, в дополнение к указанному выше коду:
- display: block; - Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным (а не только текст), и это позволяет нам указать width (и padding, margin, height и т.д. , если вы хотите)
- width: 60px; - блочные элементы занимают всю доступную ширину по умолчанию. Мы хотим, чтобы задать ширину 60 пикселей
Вы также можете установить ширину
-
и снимите ширину
, так как они будут занимать всю доступную ширину, когда отображаются в виде блочных элементов. Это приведет к тому же результату, как и в предыдущем примере:
-
или
к центру ссылки.
Добавьте border свойство
-
добавить рамку вокруг навигационной панели. Если вы также хотите границы внутри навигационной панели, добавить border-bottom для всех
-
элементов, за исключением последнего:
Полноразмерные Фиксировать вертикально Navbar
Создание полной высоты, "sticky" боковой навигации:
пример
Ul {
Попробуй сам "
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}Примечание: Этот пример может не работать должным образом на мобильных устройствах.
Горизонтальная панель навигации
Есть два способа создания горизонтальной панели навигации. Использованиевстроенных или плавающих элементов списка.
Встроенные элементы списка
Один из способов создания горизонтальной панели навигации, чтобы указать
-
элементы как встроенные, в дополнение к "standard"
коду выше:
Объяснение примера:
- display: inline; - По умолчанию
- элементы являются блочные элементы. Здесь мы удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии
Плавающий элементов списка
Другой способ создания горизонтальной панели навигации, чтобы плавать на
-
элементов, а также указать макет для навигационных ссылок:
Объяснение примера:
- float: left; - использование с плавающей точкой, чтобы получить блок элементов, чтобы скользить рядом друг с другом
- display: block; - Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным (а не только текст), и это позволяет нам указать отступы (и height, width, margins и т.д. , если вы хотите)
- padding: 8px; - Так как блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, указать некоторое дополнение, чтобы сделать их хорошо выглядеть
- background-color: #dddddd; - добавить серый цвет фона для каждого элемента
Совет: добавьте цвет фона для
-
вместо каждого
элемента, если вы хотите полноширинные цвет фона:
Горизонтальная панель навигации Примеры
Создание базовой горизонтальной панели навигации с темным цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:
пример
Ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}li {
float: left;
}li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}/* Change the link color to #111 (black) on hover */
Попробуй сам "
li a:hover {
background-color: #111;
}Активный / Текущая навигация Ссылка
Добавить "active" класс к текущей ссылке, чтобы пользователь мог знать, на какой странице он / она находится на:
Щелкните правой кнопкой Align ссылки
В данном уроке мы сделаем систему навигации по сайту с использованием только CSS3. Идея заключается в организации нескольких слайдов или слоев с содержанием, которые будут выводиться и скрываться с помощью псевдо-класса:target . C помощью переходов CSS можно сделать отличные визуальные эффекты появления слайдов. Также наша навигация будет адаптивной.
Примечание: результат урока полноценно работает в браузерах, поддерживающих CSS3.
Разметка HTML
Для каждого отдельного слайда, который будет содержать либо набор ссылок, либо информацию, либо подслайд, создадим элемент div с классом cn-slide . Для подслайдов, которые содержат две ссылки в строке, будем использовать другой класс cn-slide-sub . Слайд с информацией просто будет иметь класс cn-slide .
В нашем примере будет один основной слайд, который содержит три подслайда. Каждый подслайд содержит четыре ссылки, которые указывают на слайд с информацией. Вся структура будет представлять собой конструкцию из одного основного слайда, трех подслайдов и двенадцати слайдов с информацией:
. . .Подслайды и слайды с информацией содержат ссылки на предыдущий слой.
CSS
Основной контейнер имеет свойства min-width и max-width , которые позволяют нам использовать для задания ширины проценты в условиях ганатии, что элемнет не станет слишком большим или маленьким:
Cn-container{ width: 60%; min-width: 300px; max-width: 820px; margin: 10px auto 0 auto; text-align: left; position: relative; }
Основной заголовок будет позиционироваться абсолютно и выводиться с использованием эффектов при "открывании" слайда. Переходы устанавливаются с задержкой, чтобы заголовок появлялся после вывода блоков ссылок:
Cn-container h2{ font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700; color: #fff; position: absolute; z-index: 1000; text-shadow: 0 0 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(0,0,0,0.2); font-size: 80px; line-height: 80px; top: 0px; right: 200px; white-space: nowrap; opacity: 0; -webkit-transition: all 0.3s linear 0.4s; -moz-transition: all 0.3s linear 0.4s; -o-transition: all 0.3s linear 0.4s; -ms-transition: all 0.3s linear 0.4s; transition: all 0.3s linear 0.4s; } .cn-container .cn-slide:target h2{ right: 0px; opacity: 1; }
Слайды также позиционируются абсолютно. Начальная непрозрачность слайдов устанавливается равной 0. Они выводятся только тогда, когда являются целью:
Cn-slide{ text-align: center; position: absolute; left: -100%; padding-top: 80px; margin: 0 5%; width: 90%; opacity: 0; -webkit-transition: left 0.4s linear, opacity 0.4s linear; -moz-transition: left 0.4s linear, opacity 0.4s linear; -o-transition: left 0.4s linear, opacity 0.4s linear; -ms-transition: left 0.4s linear, opacity 0.4s linear; transition: left 0.4s linear, opacity 0.4s linear; } .cn-slide:target{ left: 0px; opacity: 1; }
Обратите внимание на другие файлы демонстрации. Там используются другие последовательности переходов для формирования визуальных эффектов.
Теперь посмотрим на элементы ссылок. Они будут иметь одно фоновое изображение, которое позже будет переопределено для каждого элемента. По умолчанию используется файл 1.jpg . При наведении курсора мыши на элемент будет изменяться цвет тени текста и самого блока:
Cn-slide nav a{ text-align: left; display: block; font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700; border: 8px solid #fff; padding: 2%; font-size: 66px; letter-spacing: 7px; text-shadow: 0px 0px 10px rgba(255,255,255,0.9); color: rgba(255,255,255,0.1); line-height: 66px; margin: 0 0 10px 0; outline: none; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); background: #fff url(../images/1.jpg) no-repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-clip: padding-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cn-slide nav a:hover{ box-shadow: 1px 3px 7px rgba(0,0,0,0.25); text-shadow: 1px 1px 1px rgba(0,0,0,0.1); color: rgba(255,255,255,0.9); }
Cn-slide-sub nav a{ width: 42%; display: inline-block; font-size: 40px; }
Для создания небольшого зазора между элементами установим правое поле для нечетных потомков:
Cn-slide-sub nav a:nth-child(odd){ margin-right: 5px; }
Слайд с информацией является конечной точкой переходов:
Cn-content{ background: #80B8CE url(../images/1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: left; padding: 20px 20px 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 8px solid #fff; margin-top: 5px; cursor: pointer; }
Каждая область с содержанием соответствует блоку ссылки. Фоновое изображение будет установлено позже:
Параграф также будет иметь переходы. С помощью псевдо-класса :active мы даем возможность пользователю посмотреть на фон, удерживая левую клавишу мыши.
Cn-content:active p{ opacity: 0; } .cn-content p{ line-height: 24px; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); color: rgba(103,59,77,0.9); padding: 15px 20px; margin-bottom: 10px; background: rgba(255,255,255,0.96); font-style: italic; border-top: 7px solid rgba(103,59,77,0.6); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
Стрелка возврата выскальзывает слева. Сначала она имеет положение -100px, а при активации слайда выдвигается в положение 3px:
Cn-back{ outline: none; text-indent: -9000px; width: 49px; height: 42px; background: transparent url(../images/arrow.png) no-repeat center center; position: absolute; top: 22px; left: -100px; cursor: pointer; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition: all 0.4s ease-in-out 0.5s; -ms-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s; } .cn-slide:target .cn-back{ left: 3px; opacity: 1; }
Теперь определим фоновое изображение для каждого элемента ссылки. С помощью удобного селектора атрибутов мы можем указать конкретный элемент. Смотрим на значение атрибута href и определяем изображение:
/* Основные пункты */ .cn-slide nav a{ background-image: url(../images/1.jpg); } .cn-slide nav a{ background-image: url(../images/2.jpg); } .cn-slide nav a{ background-image: url(../images/3.jpg); } /* Пункты и подпункты для слайда 1*/ .cn-slide nav a, #slide-1-1 .cn-content { background-image: url(../images/4.jpg); } .cn-slide nav a, #slide-1-2 .cn-content { background-image: url(../images/5.jpg); } .cn-slide nav a, #slide-1-3 .cn-content { background-image: url(../images/6.jpg); } .cn-slide nav a, #slide-1-4 .cn-content { background-image: url(../images/7.jpg); } /* Пункты и подпункты для слайда 2*/ .cn-slide nav a, #slide-2-1 .cn-content { background-image: url(../images/8.jpg); } .cn-slide nav a, #slide-2-2 .cn-content { background-image: url(../images/9.jpg); } .cn-slide nav a, #slide-2-3 .cn-content { background-image: url(../images/10.jpg); } .cn-slide nav a, #slide-2-4 .cn-content { background-image: url(../images/11.jpg); } /* Пункты и подпункты для слайда 3*/ .cn-slide nav a, #slide-3-1 .cn-content { background-image: url(../images/12.jpg); } .cn-slide nav a, #slide-3-2 .cn-content { background-image: url(../images/13.jpg); } .cn-slide nav a, #slide-3-3 .cn-content { background-image: url(../images/14.jpg); } .cn-slide nav a, #slide-3-4 .cn-content { background-image: url(../images/15.jpg); }
В завершение определяем несколько медиа запросов для формирования шаблона на маленьких размерах экрана. Лучше всего определить точки разлома шаблона и установить для них правила изменения. В нашем случае таких точек две: 1060 px и 900 px. Изменим размер шрифта, а в подслайдах дуем использовать только один элемент в строке.
@media screen and (max-width: 1060px){ .cn-slide-sub nav a{ font-size: 28px; } } @media screen and (max-width: 900px){ .cn-container h2{ font-size: 48px; line-height: 95px; } .cn-slide nav a{ font-size: 38px; } .cn-slide-sub nav a{ width: auto; font-size: 36px; display: block; } .cn-slide-sub nav a:nth-child(odd){ margin-right: 0px; } }
Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигации
Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка
-
элементов, за исключением последнего:
Вертикальная панель навигации Примеры
Создание базовой вертикальной панели навигации с серым цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:
пример
Ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}/* Change the link color on hover */
Попробуй сам "
li a:hover {
background-color: #555;
color: white;
}Центр Ссылки & Добавить границы
Добавить text-align:center для
-
элементы имеет смысл:
Как сделать горизонтальное меню: разметка и примеры оформления
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 списка.
Панель навигации - это по сути список ссылок, так что использование элементов
- и