Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка . Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; }
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } Попробовать »
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } Попробовать »
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Подпункты мы разместим в отдельном списке, вложив его в элемент
Попробовать »
Теперь приступим к написанию 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; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; } Попробовать »
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#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; }
Последнее обновление: 27.04.2016
Панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Рассмотрим, как создать простенькую панель навигации.
Фактически панель навигации - это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент . Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.
Вертикальное меню
Распространенное решение данной проблемы для создания вертикального меню состоит в том, чтобы сделать ссылку блочным элементом.
После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.
Горизонтальное меню
Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block .
Использование float
Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li , в который заключена ссылка, устанавливается float: left; . Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.
Второй этап заключается в установке у элемента ссылки display: block , что дает нам возможность устанавливать ширину, отступы, вообщем все те признаки, которые характерны для блочных элементов.
inline и inline-block
Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline . После этого для элемента ссылки, которая располагается в элементе li , мы можем установить display: inline-block:
горизонтальный
Навигация Бары
Имея легкий в использовании навигации имеет важное значение для любого веб-сайта.
С помощью CSS вы можете превратить скучные меню HTML в симпатичных панели навигации.
Панель навигации = Список ссылок
Панель навигации необходим стандартный HTML в качестве базы.
В наших примерах мы будем строить навигационную панель из стандартного списка HTML.
Панель навигации в основном список ссылок, так что с помощью
-
и
-
элементы имеет смысл:
пример
Попробуй сам "Теперь давайте уберем пули и поля и отступы из списка:
Объяснение примера:
- 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; - добавить серый цвет фона для каждого элемента
Совет: добавьте цвет фона для
-
вместо каждого
элемента, если вы хотите полноширинные цвет фона:
- содержится одна ссылка . В HTML5 для навигации ввели отдельный тег
Горизонтальная панель навигации Примеры
Создание базовой горизонтальной панели навигации с темным цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:
пример
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 ссылки
Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигации
Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием 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 для
