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>.

/* 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 */
  

---

Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»

---

Оцените, пожалуйста, эту статью:

Опубликовано: 24 апреля 2009 | Просмотров: 31332 | Страница для печати

Читать комментарии [14] на форуме.

Оставить комментарий

Ваше имя:
Проверка на человечность: Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.

Идёт отправка комментария ...