Сегодня выкладываю еще один код, вида горизонтального меню на чистом css .

Сразу же хотелось бы отметить, что благодаря стилям css, меню не имеет каких либо картинок не будет грузить сайт при начальной загрузке.

Особенности меню в том, что вид дизайна серый, а вод при наведении на пункт меню меняет цвет, (то есть стиль).

Смотрим скриншот меню.

Прозрачное горизонтальное меню на CSS с эффектом

Прозрачное горизонтальное меню на CSS с эффектом

Отображение: Корректно отображается – Firefox, Opera, IE, Safari, в остальных не проверял.

Настройка и установка:

В то место, где хотим видеть меню, вставляем это. Естественно ссылки меняем на свои.

<ul>
<li><a href="ссылка">анкор</a></li>
<li><a href="ссылка">анкор</a></li>
<li><a href="ссылка">анкор</a></li>
<li><a href="ссылка">анкор</a></li>
</ul>

Далее идем и прописываем стили css для нашего меню. (Придаем красивый эффект).

В самый низ вставляем это:

li {
display: inline-block; /* Строчно-блочные элементы */
background:rgba (118,118,118,0.7); /* Цвет фона */
margin-right: -5px; /* Расстояние между пунктами меню */
— webkit-transform: skewX (-30deg); /* Для Safari и Chrome */
— moz-transform: skewX (-30deg); /* Для Firefox */
— o-transform: skewX (-30deg); /* Для Opera */
— ms-transform: skewX (-30deg); /* Для IE */
transform: skewX (-30deg); /* CSS3 */
}
a {
color: #fff; /* Цвет ссылок */
display: block; /* Блочный элемент */
padding: 5px 15px; /* Поля вокруг текста */
text-decoration: none; /* Убираем подчёркивание */
— webkit-transform: skewX (30deg); /* Для Safari и Chrome */
— moz-transform: skewX (30deg); /* Для Firefox */
— o-transform: skewX (30deg); /* Для Opera */
— ms-transform: skewX (30deg); /* Для IE */
transform: skewX (30deg); /* CSS3 */
}
li:hover {
background: #333; /* Цвет фона при наведении курсора мыши */
}

Настройка:

Меню полностью можно подогнать под свой дизайн сайта, для этого нужно лишь подкорректировать стили css.

В коде все прописано, (пример color: #fff; /* Цвет ссылок */  — меняем на свой цвет).

Все, ставим, настраиваем и пользуемся! Всем пока!!!