Панели навигации
Наличие простой в использовании навигации важно для любого веб-сайта.
С помощью CSS вы можете превратить скучное меню HTML в красивую панель навигации.
Панель навигации = Список Ссылок
Панели навигации необходим стандартный HTML в качестве базы.
В наших примерах мы будем строить навигационную панель из стандартного списка HTML.
Панель навигации в основном это список ссылок, поэтому использование элементов <ul> и <li> имеет смысл:
Пример 1
<html> <head> <meta charset="utf-8"> </head> <body> <ul> <li><a href="#home">Главная</a></li> <li><a href="#news">Новости</a></li> <li><a href="#contact">Контакты</a></li> <li><a href="#about">О нас</a></li> </ul> <p>Примечание: Мы используем href="#" для тестовых ссылок. В настоящем веб-сайте это должны быть ссылки URL.</p> </body> </html>
Теперь давайте уберем пули и внешние и внутренние поля из списка:
Пример 2
<html>
<head>
<meta charset="utf-8">
<style>
ul { list-style-type:none; margin:0; padding:0; }
</style>
</head>
<body>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
</body>
</html>
Объяснение примера:
list-style-type:none- Удаляет пули. Панель навигации не нуждается в маркерованном списке- Устанавливает margins и padding в 0 для удаления настроек браузера по умолчанию
Код в примере выше это стандартный код, используемый как в вертикальной, так и в горизонтальной панели навигации.
Вертикальная панель навигации
Для построения вертикальной панели навигации нам нужно только стилизовать элементы <a>, в дополнение к коду выше:
Пример 3
<html>
<head>
<meta charset="utf-8">
<style>
ul { list-style-type:none; margin:0; padding:0; }
a { display:block; width:80px; background-color:#dddddd; }
</style>
</head>
<body>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
<p>Цвет фона добавляется в ссылки, чтобы показать область ссылки.</p>
<p>Обратите внимание, что вся область ссылки является интерактивной, а не только текст.</p>
</body>
</html>
Объяснение примера:
display:block- отображение ссылок как блока элементов делает всю площадь ссылок интерактивной (а не только текст), и это позволяет нам указать ширинуwidth:60px- блочные элементы занимают всю доступную по умолчанию ширину. Мы хотим указать ширину в 60px
Совет: Также взгляните на наш пример с полностью стилизованной вертикальной панелью навигации.
Примечание: Всегда указывайте ширину для элементов <a> в вертикальной панели навигации. Если вы опустите ширину, IE6 может привести к неожиданным результатам.
Пример 4
Пример с полностью стилизованной вертикальной панелью навигации<html>
<head>
<meta charset="utf-8">
<style>
ul { list-style-type:none; margin:0; padding:0; }
a:link,a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active { background-color:#7A991A; }
</style>
</head>
<body>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
</body>
</html>
Горизонтальная панель навигации
Есть два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.
Оба метода работают хорошо, но если вы хотите, чтобы ссылки были одинакового размера, вы должны использовать плавающий метод.
Встроенные элементы списка
Один из способов создания горизонтальной панели навигации является определение элементов <li> как встроенных (inline), в дополнение к "стандартному" коду выше:
Пример 5
<html>
<head>
<meta charset="utf-8">
<style>
ul { list-style-type:none; margin:0; padding:0; }
li { display:inline; }
</style>
</head>
<body>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
</body>
</html>
Объяснение примера:
display:inline;- по умолчанию, элементы <li> являются блочными. Здесь, мы удаляем разрыв строки до и после каждого элемента списка, чтобы отобразить их на одной линии
Совет: Также взгляните на наш пример с полностью стилизованной горизонтальной панелью навигации.
Пример 6
Пример с полностью стилизованной горизонтальной панелью навигации.<html>
<head>
<meta charset="utf-8">
<style>
ul { list-style-type:none; margin:0; padding:6px 0; }
li { display:inline; }
a:link,a:visited {
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active { background-color:#7A991A; }
</style>
</head>
<body>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
<p><b>Примечание:</b> Если вы только установить заполнения для элементов a (а не ul), ссылки выйдут из элемента ul. Поэтому, мы добавили верхнее и нижнее заполнение для элемента ul.</p>
</body>
</html>
Плавающие элементы списка
В приведенном выше примере ссылки имеют разную ширину.
Чтобы все ссылки имели одинаковую ширину, укажите float для элементов <li> и укажите ширину для элеметов <a>:
Пример 7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul { list-style-type:none; margin:0; padding:0; overflow:hidden; }
li { float:left; }
a { display:block; width:100px; background-color:#dddddd; }
</style>
</head>
<body>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
<p><b>Примечание:</b> Если !DOCTYPE не указан, плавающие элементы могут привести к неожиданным результата.</p>
<p>Цвет фона добавляется в ссылки, чтобы показать область ссылки. Обратите внимание, что вся область ссылки является интерактивной, а не только текст.</p>
<p><b>Примечание:</b> overflow:hidden добавлен к элементу ul для предотвращения элементов li выходить из списка.</p>
</body>
</html>
Объяснение примера:
float:left- используйтеfloat, чтобы получить блок элементов рядом друг с другомdisplay:block- отображение ссылок как блока элементов делает всю площадь ссылок интерактивной (а не только текст), и это позволяет нам указать ширинуwidth:60px- так как элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Мы указали ширину ссылок в 60px
Совет: Также взгляните на наш пример с полностью стилизованной горизонтальной панелью навигации.
Пример 8
Пример с полностью стилизованной горизонтальной панелью навигации.<html>
<head>
<meta charset="utf-8">
<style>
ul { list-style-type:none; margin:0; padding:0; overflow:hidden; }
li { float:left; }
a:link,a:visited {
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active { background-color:#7A991A; }
</style>
</head>
<body>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
</body>
</html>
Была ли эта информация полезной?
