CSS: Дизайн списка меню
Этот небольшой урок по CSS покажет вам, как создавать список меню, используя либо стиль границы CSS, либо фоновое изображение. Прием состоит в том, чтобы применить нижнюю границу к элементу <li>, затем, используя свойство абсолютное положение, сместить вложенные элементы вниз, чтобы закрыть границу. Это очень удобно – вы легко можете изменить верстку, сменив фоновое изображение или изображение границы. Прием работает, даже когда размер шрифта в браузере изменяется (увеличивается или уменьшается).
Посмотреть демо "Дизайн меню".
1. HTML код
Взгляните на HTML код и на схему. Они помогут вам понять, как работает CSS
<ul><br> <li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li><br></ul>
2. CSS код
Вот ключевые моменты:
Задайте элементу <li> свойство position:relative и примените к стилю нижней границы.
Используйте position:absolute с отрицательным значением bottom, чтобы сместить элементы <strong> и <em> ниже границы.
Запомните: используйте относительное значение (<em>) чтобы контролировать пространство при отступах.
.menu { width: 500px; list-style: none; margin: 0 0 2em; padding: 0; font: 150%/100% Arial, Helvetica, sans-serif;}.menu li { clear: both; margin: 0; padding: 0 0 1.8em 0; position: relative; border-bottom: dotted 2px #999;}.menu strong { background: #fff; padding: 0 10px 0 0; font-weight: normal; position: absolute; bottom: -.3em; left: 0;}.menu em { background: #fff; padding: 0 0 0 5px; font: 110%/100% Georgia, "Times New Roman", Times, serif; position: absolute; bottom: -.2em; right: 0;}.menu sup { font-size: 60%; color: #666; margin-left: 3px;}
3. Изменение стиля границы
Вы можете легко менять стиль границы, редактируя значения переменных padding и border для элемента <li>.
li { border-bottom: dashed 1px #000; padding: 0 0 2.3em 0;}
4. Использование изображения в качестве границы (посмотреть конечное демо)
Также вы можете использовать фоновое изображение.
li { background: url(images/circle.gif) repeat-x left bottom;}
5. Версия IE6 (смотреть демо для IE6)
Если вы все еще пользуетесь старым и полным багов браузером IE6, вы заметите что верстка отображается неправильно. Чтобы это исправить, просто добавьте прием clearfix к элементу <li>.
.menu li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }.menu li {display: inline-block;} * html .menu li {height: 1%;}.menu li {display: block;}
