Горизонтальное меню с внутренней тенью при наведении курсора мыши

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Это меню на CSS использует способность CSS3, чтобы создать тени (тень растет внутрь) в пункте меню при наведении курсора мыши. С помощью CSS3 анимации происходит постепенный переход с эффектом между пунктами меню. Изображения используются косвенно, то есть, они не принимают непосредственного участия в формировании собственно конструкции меню, а являются необязательным дополнением дизайна. Эффект тени работает во всех современных браузерах, чего нельзя сказать об старых браузерах, в которых пользователи просто не увидят CSS3 анимацию и тени, но меню при этом остается полностью функциональным.

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<style type="text/css">
.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 100%;
}

.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0; /* Show only top and bottom border for main menu container */
padding: 0;
margin: 0;
overflow: hidden;
}

.shadowblockmenu ul li{
display: inline;
margin: 0;
padding: 0;
}

.shadowblockmenu ul li a{
display: block;
float: left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}


.shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */
border-left: 1px solid #BBB; /* add border to left side of first menu link */
padding-left: 25px;
background: url(img/onebit_home.png) 1px center no-repeat; /* Add icon */
}

.shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */
padding-left: 25px;
background: url(img/onebit_bulb.png) 1px center no-repeat; /* Add icon */
}


.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item  */
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}
</style>

2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть меню и заполните своими данными:


<div class="shadowblockmenu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Дизайн</a></li>
<li><a href="#">Оптимизация</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>

Для добавления теней применяется свойство box-shadow и в нашем случае для создания первоначальной тени предназначен участок кода CSS:


box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);

Всякий раз, когда происходит наведение курсора мыши, появляется тень, которую формирует следующий участок кода:


box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);

Если имеет место добавления двух слоёв тени к элементу, то для создания множественных теней, просто отделите каждое определение тени запятой внутри определенного свойства.

Дополнительные изображения вставлены в первые два пункта меню. Если появится желание добавить изображения в следующие пункты, копируйте и вставляйте в коде CSS этот участок, не забывая о нумерации (3, 4, 5 и т.д.):

 

.shadowblockmenu li:nth-of-type(3) a{ /* Extra style for 2nd menu link */
padding-left: 25px;
background: url(img/onebit_bulb.png) 1px center no-repeat; /* Add icon */
}

Используемые изображения:

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом, в котором расположено меню.

Думаю, что всё понятно. Пока! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки