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