УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS Урок 24 Панель Навигации


« Назад Далее »

Демонстрация: Панель Навигации


Панели Навигации

Наличие простой в использованнии системы навигации очень важно для любого веб сайта.

При помощи 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> являются блочными. Здесь мы удаляем переносы строк до и после каждого пункта списка, чтобы отображать их в одной строке

Совет: Также взгляните на пример полностью оформленной горизонтальной панели навигации.

Плавающие Пункты Списка

В примере выше ссылки имеют различную ширину.

Для того чтобы ссылки имели одинаковую ширину, сделайте элементы <li> плавающими и укажите ширину для элементов <a>:

Пример

li
{
float:left;
}
a
{
display:block;
width:80px;
background-color:#dddddd;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Объяснение примера:

  • float:left - использование свойства float, чтобы заставить блочные элементы располагаться ("плавать") друг за другом
  • display:block - Отображение ссылок в виде блоков делает всю область ссылки областью клика (а не только текст), и позволяет указать ширину
  • width:80px - Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать друг за другом. Поэтому мы указываем ширину ссылок в 80px

Совет: Также взгляните на пример полностью оформленной горизонтальной панели навигации (с использованием плавающих пунктов списка).





« Назад Далее »



© 2011 - 2022 Уроки CSS