Наличие простой в использованнии системы навигации очень важно для любого веб сайта.
При помощи CSS вы можете изменить скучные HTML меню в отличного вида навигационные панели.
Панели Навигации = Список Ссылок
Панель навигации использует стандартный HTML в качестве базы.
В наших примерах мы будем строить панель навигации из обычного HTML списка.
Панель навигации - это по сути список ссылок,
так что использование элементов <ul> и <li> вполне логично:
Пример
<ul>
</ul>
Попробуйте сами » Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает
Теперь давайте удалим маркеры, а также поля и отступы из списка:
Пример
ul
{
list-style-type:none;
margin:0;
padding:0;
}
Попробуйте сами » Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает
Объяснение примера:
list-style-type:none - Удаляет маркеры. Панель навигации не нуждается в списке маркеров
Установка полей и отступов в 0
используется для удаления настроек браузера по умолчанию
Код в примере выше - это стандартный код, используемый как в вертикальных, так и
в горизонтальных панелях навигации.
Вертикальная Панель Навигации
Чтобы построить вертикальную панель навигации, нам нужно только добавить стили к элементам <a>, в дополнение
к коду выше:
Пример
a
{
display:block;
width:80px;
background-color:#dddddd;
}
Попробуйте сами » Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает
Объяснение примера:
display:block - Отображение ссылок в виде блоков делает всю область ссылки пригодной для клика (а не только
текст), а также позволяет нам указать ширину
width:80px - Блочные элементы занимают всю ширину по умолчанию.
Мы же хотим указать ширину в 80 px
Замечание: Всегда указывайте ширину для элементов <a> в вертикальной панели навигации.
Если вы опустите ширину, IE6 может отобразить неожиданные результаты.
Горизонтальная Панель Навигации
Существует два способа создания горизонтальной панели навигации. Использование
встроенных или плавающих пунктов списка.
Оба метода работают отлично, но если вы хотите, чтобы все ссылки были одинакового размера,
вы должны использовать "плавающий" способ.
Встроенные Пункты Списка
Один из способов построения горизонтальной панели навигации - сделать элементы <li>
встроенными, в дополнение к "стандартному" коду выше:
Пример
li
{
display:inline;
}
Попробуйте сами » Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает
Объяснение примера:
display:inline; - По умолчанию элементы <li> являются блочными. Здесь мы удаляем переносы строк до и после
каждого пункта списка, чтобы отображать их в одной строке
