Наличие простой в использованнии системы навигации очень важно для любого веб сайта.
При помощи CSS вы можете изменить скучные HTML меню в отличного вида навигационные панели.
Панели Навигации = Список Ссылок
Панель навигации использует стандартный HTML в качестве базы.
В наших примерах мы будем строить панель навигации из обычного HTML списка.
Панель навигации - это по сути список ссылок, так что использование элементов
- и
- вполне логично:
Пример
-
встроенными, в дополнение к "стандартному" коду выше:
Объяснение примера:
- display:inline; - По умолчанию элементы
- являются блочными. Здесь мы удаляем переносы строк до и после каждого пункта списка, чтобы отображать их в одной строке
Плавающие Пункты Списка
Пример
li
{
float:left;
}
a
{
display:block;
width:80px;
background-color:#dddddd;
}
Замечание: Всегда указывайте ширину для элементов в вертикальной панели навигации. Если вы опустите ширину, IE6 может отобразить неожиданные результаты.
Горизонтальная Панель Навигации
Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих пунктов списка.
Оба метода работают отлично, но если вы хотите, чтобы все ссылки были одинакового размера, вы должны использовать "плавающий" способ.
Встроенные Пункты Списка
Один из способов построения горизонтальной панели навигации - сделать элементы
Горизонтальная
Панель навигации
Наличие простой в использовании навигации важно для любого веб сайта.
С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели
Панель авигации = список ссылок
Панель навигации нуждается в стандартном HTML в качестве основы.
В наших примерах мы построим панель навигации из стандартного HTML списка.
Панель навигации - это в основном список ссылок, поэтому использование элементов
-
и естественно
- :
Пример
- Главная
- Новости
- Контакты
- О Нас
Теперь давайте удалим маркеры, поля и отступы из списка:
Пример объяснение:
- list-style-type: none; - Убирает маркеры. В панели навигации не нужны маркеры для списка
- Установить margin: 0; и padding: 0; чтобы удалить настройки браузера по умолчанию
Код в приведенном выше примере - это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.
Вертикальная панель навигации
Чтобы создать вертикальную панель навигации, нужно задать стиль элемента в списке, к дополнению коду выше:
Объяснение примера:
- display: block; - Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)
- width: 60px; - Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей
Вы также можете установить ширину
- и удалить ширину ,
поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока.
Это приведет к тому же результату, что и в предыдущем примере:
- или
ссылки по центру.
Добавить свойство border в
- .
Добавить границы вокруг навигации. Если Вы также хотите установить границы внутри панели,
нужно добавить border-bottom во все элементы
- ,
за исключением последнего:
Фиксированная вертикальная навигация
Создать в полную в высоту, "фиксированную" боковую панель навигации:
Пример
ul {
Редактор кода »
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Полная высота */
position: fixed; /* Сделайте его придерживаться, даже на прокрутки */
overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}Примечание: Этот пример может работать неправильно на мобильных устройствах.
Горизонтальная панель навигации
Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.
Встроенные элементы списка
Одним из способов построения горизонтальной панели навигации является указание элементов
-
как встроенные, кроме того в "стандартные" в коде выше:
Объяснение примера:
- display: inline; - По умолчанию, элементы
- - это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии
Плавающие элементы списка
Другой способ создания горизонтальной навигации, плавают элементы
-
им нужно указать расположение для навигационных ссылок:
Объяснение примера:
- float: left; - Используйте поплавок, чтобы заставить элементы блока плавать рядом друг с другом
- display: block; - Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.д. если вы хотите)
- padding: 8px; - Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красиво
- background-color: #dddddd; - Добавить серый фон цвета к каждому элементу
Совет: Добавить background-color: #dddddd; в
- для каждого элемента , чтобы цвет фона был на всю ширину:
- Главная
- Новости
- Контакты
- О Нас
- Удобность в использовании;
- Должна быть создана навигация по всем разделам сайта;
- На каждой странице сайта должен быть выход на главную страницу;
- Переход на любую страницу сайта максимум в 3 клика.
- Создание меню сайта — это одна из позиций, где в a href="#" нужно будет вставить необходимую ссылку;
Примеры горизонтальной панели навигации
Создание базовой горизонтальной панели навигации с темным цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:
Пример
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;
}Активная и текущая ссылка навигации
Выравнивание списка по правому краю
Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right; :
Пример
Для того, чтобы было удобно перемещаться по сайту нужна навигация, которую я сделал использовав скрипты HTML и CSS. В результате моей работы, вы можете видеть 2 типа меню (вертикальное и горизонтальное). А теперь, постараюсь рассказать о тех задачах, которые, как мне кажется, должно выполнять меню для сайта:
Здесь я постараюсь максимально изложить материал по созданию меню, приготовьтесь, у многих могут возникнуть сложности, у меня по крайней мере они возникали. И так начнем!
Первым делом, я поведаю вам о том, как сделать . Сначала пишем скрипт в таблице стилей:
#navigation { width: 560px; height: 50px; margin: 0; padding: 0; background-image: url(img/gor_menu.jpg); background-repeat: no-repeat; background-position:center; } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation ul li { display: inline; margin: 0px; } #navigation ul li a { height:28px; display: block; float: left; color: #333333; text-decoration: none; font-family: Arial; font-size: 12px; font-weight: bold; background-image: url(img/menu_separatorline.jpg); background-repeat: no-repeat; background-position: right center; padding-top: 17px; padding-right: 15px; padding-bottom: 0; padding-left: 15px; } #navigation ul li a:hover { color:#FFF; background-image: url(img/button_hover.jpg); background-repeat: repeat-x; background-position: left top; } #navigation ul li#active a { background-image: url(img/button_hover.jpg); background-repeat: repeat-x; background-position: left top; }
Не пугайтесь ничего страшного в этом коде нет. Чтобы вам было понятней напишу-ка я сразу HTML-код для данного меню:
Как видите, мы имеем дело со списком, который без таблицы стилей ничего путного из себя не представляет. Оператор div вызывает переменные из внешней таблицы стилей CSS, далее наш список преображается и превращается в симпатичное на мой взгляд горизонтальное меню.
Теперь нужно немного разъяснить, что к чему относится, дальше я думаю вы сами со всем разберетесь:
— содержит всю структуру меню. В него же будет вставляться верхнее изображение, которое я подготовил заранее в Photoshop;
— тело меню, содержит неупорядоченный список. В него будет вставляться изображение, которое будет повторяться по вертикали и создавать фон. Может быть, я выбрал слишком яркие тона, но на мой взгляд, они не режут глаз;
— содержит каркас самого меню;
- ,
за исключением последнего:
Пример вертикальной панели навигации
Создание базовой вертикальной панели навигации с серым цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}/* Change the link color on hover */
Редактор кода »
li a:hover {
background-color: #555;
color: white;
}Центральные ссылки и добавить границы
Добавить выравнивание text-align:center в
-
встроенными, в дополнение к "стандартному" коду выше: