|
CSS Урок 24 Панель Навигации
Демонстрация: Панель Навигации
Панели НавигацииНаличие простой в использованнии системы навигации очень важно для любого веб сайта.
При помощи CSS вы можете изменить скучные HTML меню в отличного вида навигационные панели.
Панели Навигации = Список СсылокПанель навигации использует стандартный HTML в качестве базы.
В наших примерах мы будем строить панель навигации из обычного HTML списка.
Панель навигации - это по сути список ссылок,
так что использование элементов <ul> и <li> вполне логично:
Пример
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Теперь давайте удалим маркеры, а также поля и отступы из списка:
Пример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>
встроенными, в дополнение к "стандартному" коду выше:
Пример
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Объяснение примера:
- display:inline; - По умолчанию элементы <li> являются блочными. Здесь мы удаляем переносы строк до и после
каждого пункта списка, чтобы отображать их в одной строке
Совет: Также взгляните на
пример полностью оформленной горизонтальной панели навигации.
Плавающие Пункты СпискаВ примере выше ссылки имеют различную ширину.
Для того чтобы ссылки имели одинаковую ширину, сделайте элементы <li> плавающими и укажите ширину
для элементов <a>:
Примерli
{
float:left;
}
a
{
display:block;
width:80px;
background-color:#dddddd;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Объяснение примера:
- float:left - использование свойства float, чтобы заставить блочные элементы располагаться ("плавать") друг за другом
- display:block -
Отображение ссылок в виде блоков делает всю область ссылки областью клика (а не только текст), и позволяет
указать ширину
- width:80px - Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать друг за другом. Поэтому мы
указываем ширину ссылок в 80px
Совет: Также взгляните на
пример полностью оформленной горизонтальной панели навигации (с использованием плавающих пунктов списка).
|
