|
Plati.ru - Магазин цифровых товаров: пин-коды для игр, интернета и IP-телефонии, электронные книги, программное обеспечение, красивые номера ICQ и многое другое. Зайди и убедись сам! |
Меню (навигация)
Навигация
Простая и удобная навигация (меню) является одной из важных составляющих любого веб-сайта.
С помощью CSS вы можете изменить скучное HTML меню в полноценную красивую навигацию.
Навигация = список ссылок
Основой меню является стандартный HTML.
В наших примерах мы будем создавать навигацию из неупорядоченного списка.
Меню — это список ссылок, поэтому имеет смысл использовать элементы <ul> и <li>:
Пример
<ul>
<li><a href="default.html">Главная</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="contact.html">Контакты</a></li>
<li><a href="about.html">О нас</a></li>
</ul>
Теперь нам надо удалить маркеры списка, обнулить отступы: margin и padding:
Пример
ul
{
list-style-type:none;
margin:0;
padding:0;
}
Объясним код:
- list-style-type:none — удаляем маркеры списка
- Задаем свойствам margin и padding значение 0 для удаления настроек этих свойств по умолчанию.
Код, приведенный выше, является стандартным как для горизонтальных, так и для вертикальных меню.
Вертикальное меню
Для создания вертикального меню нам надо всего лишь стилизовать ссылки, добавив следующий код:
Объяснение примера:
- display:block — отображение ссылки, как блочный элемент, позволяет сделать кликабельной всю область ссылки (а не только текст ссылки). Кроме того это позволяет указать ширину элемента
- width:60px — блочный элемент по умолчанию занимает всю доступную ширину. Мы же указываем ширину в 60 px (зависит от длины текста ссылок)
Заметка: всегда указывайте ширину элемента <a> в вертикальном меню. Если вы забудете это сделать, IE6 может сгенерировать неожиданный результат.
Горизонтальная навигация
Существуют два способа создания горизонтального меню: использование свойств inline или float.
Оба метода работают на "ура", но если вы хотите, чтобы ссылки были одинакового размера, вам лучше использовать способ float.
Строчные пункты списка
Первым способом создания горизонтального меню является назначение элементу <li> свойств строчного элемента:
Пример
li
{
display:inline;
}
Объясним пример:
- display:inline — по умолчанию элемент <li> является блочным, то есть он занимает всю строку и вытесняет с нее другие блочные элементы. Для того, чтобы выстроить пункты списка в один ряд (строку) мы и отображаем их как строчные элементы.
Плавающие пункты списка
В результате предудущего примера, пункты меню будут иметь разную ширину.
Чтобы сделать меню с одинаковыми по ширине пунктами, нужно прибавить к элементам <li> свойство float:
Что все это значит:
- float:left — используем смещение (float) для выстраивания блочных элементов в ряд
- display:block — отображаем ссылки как блок для того, чтобы можно было щелкать мышью не только на тексте ссылки, но и около него. Это также позволяет указать ширину
- width:60px — указываем ширину пункта меню. Она зависит от текста меню. Если ваш текст не помещается в пункте меню, увеличьте это значение
