Рубрика CSS

Дизайн меню с использованием CSS

В этом уроке Вы познакомитесь с процессом создания списка меню, используя стиль рамки или фоновое изображение. Весь фокус заключается в применении нижней границы к тегу <li> и абсолютного позиционирования всех вложенных элементов со смещением вниз. Вы с легкостью можете изменять внешний вид границы. Данное меню легко масштабируется.

1. HTML код

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

<ul>
<li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>
</ul>

2. Код CSS

Ключевые пункты:

1. Всем тегам <li> мы применяем свойство position:relative, а также стиль рамки (нижней границы).
2. Применяем position:absolute с отрицательным значением к элементам <strong> и <em> (для смещения их к нижней границе тега <li>).

.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. Стиль рамки

Вы с легкостью можете изменить стиль рамки, задав необходимые параметры для тега <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, то вы можете заметить, что данное меню работает не правильно. Чтобы решить данную проблему, просто добавим clearfix (способ очистки) к элементам <li>.

/* clearfix */
.menu li:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.menu li {display: inline-block;}
/* Hides from IE-mac \*/
* html .menu li {height: 1%;}
.menu li {display: block;}
/* End hide from IE-mac */

Смотрим, что получилось!

Источник: www.webdesignerwall.com.
Перевод: Администратор сайта explorer-soft.com.