CSS: дизайн списка меню

Этот небольшой урок по CSS покажет вам, как создавать список меню, используя либо стиль границы CSS, либо фоновое изображение. Прием состоит в том, чтобы применить нижнюю границу к элементу <li>, затем, используя свойство абсолютное положение, сместить вложенные элементы вниз, чтобы закрыть границу. Это очень удобно – вы легко можете изменить верстку, сменив фоновое изображение или изображение границы. Прием работает, даже когда размер шрифта в браузере изменяется (увеличивается или уменьшается).

1. HTML код

Взгляните на HTML код и на схему. Они помогут вам понять, как работает CSS

    <ul><br>  <li><strong>CSS Design</strong> <em>250^95</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>.

/* clearfix */

.menu li:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

    }

.menu li {display: inline-block;}

/* Hides  IE-mac */

 * html .menu li {height: 1%;}

.menu li {display: block;}

/* End hide  IE-mac */