Печать

Вертикальное меню для сайта с эффектом увеличения

Автор: Алексей Елизаров.

View Comments
Вертикальное меню для сайта на чистом CSS3 с эффектом увеличения.


Просмотр Скачать

Код HTML

<ul class="menu">
<li class="p1"><a href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#"><span>Главная</span></a></li>
<li _cke_saved_href="#"><span>Главная</span></a></li>
<li class="p2"><a href="#"><span>Уроки CSS</span></a></li>
<li class="p3"><a href="#"><span>Уроки HTML</span></a></li>
<li class="p4"><a href="#"><span>Joomla</span></a></li>
<li class="p5"><a href="#"><span>Горизонтальное меню</span></a></li>
<li class="p6"><a href="#"><span>Вертикальное меню</span></a></li>
<li class="p7"><a href="#"><span>Контакты</span></a></li>
<li class="p8"><a href="#"><span>Карта сайта</span></a></li>
<li class="icons">
  <b class="m1">Главная</b>
  <b class="m2">Уроки CSS</b>
  <b class="m3">Уроки HTML</b>
  <b class="m4">Joomla</b>
  <b class="m5">Горизонтальное меню</b>
  <b class="m6">Вертикальное меню</b>
  <b class="m7">Контакты</b>
  <b class="m8">Карта сайта</b>
</li>
</ul>

Код CSS

.menu {padding:0; margin:0; list-style:none; width:250px; position:relative; z-index:100; margin:50px auto; height:320px;}
.menu li {width:250px; height:40px; float:left;}
.menu li a {display:block; width:250px; height:100%; background:url(trans.gif);}
.menu li a span {position:absolute; left:-9999px;}
.menu li.icons {position:absolute; left:0; top:0; width:250px; height:240px; z-index:-1;}
.menu li.icons b {display:block; width:220px; height:40px; padding-left:20px; line-height:40px; font:normal 14px/40px arial, sans-serif; color:#d8d8d8; text-shadow:0 -1px 1px rgba(0,0,0,0.8); background-color:#800; border-radius:5px;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
transition:0.2s;
}

.menu li:hover {height:48px;  margin:-5px 0 0 0; width:276px; position:relative; z-index:100;}
.menu li.p2:hover {margin:-3px 0 0 0;}
.menu li.p3:hover {margin:-2px 0 0 0;}
.menu li.p4:hover {margin:-2px 0 0 0;}
.menu li.p5:hover {margin:-2px 0 0 0;}
.menu li.p6:hover {margin:-2px 0 0 0;}
.menu li.p7:hover {margin:-2px 0 0 0;}
.menu li.p8:hover {margin:-2px 0 0 0;}

.menu li.icons:hover {position:absolute; left:0; top:0; margin:0; width:250px; height:240px; z-index:-1;}

.menu li.p1:hover ~ li.icons b.m1,
.menu li.p2:hover ~ li.icons b.m2,
.menu li.p3:hover ~ li.icons b.m3,
.menu li.p4:hover ~ li.icons b.m4,
.menu li.p5:hover ~ li.icons b.m5,
.menu li.p6:hover ~ li.icons b.m6,
.menu li.p7:hover ~ li.icons b.m7,
.menu li.p8:hover ~ li.icons b.m8 {font-size:17px; height:48px; width:240px; line-height:48px; margin:-5px 0 -5px 16px; background-color:#c00; position:relative; z-index:10; box-shadow:0 0 20px rgba(0,0,0,0.6); color:#fff;}

.menu li.p1:hover ~ li.icons b.m2,
.menu li.p2:hover ~ li.icons b.m1,
.menu li.p2:hover ~ li.icons b.m3,
.menu li.p3:hover ~ li.icons b.m2,
.menu li.p3:hover ~ li.icons b.m4,
.menu li.p4:hover ~ li.icons b.m3,
.menu li.p4:hover ~ li.icons b.m5,
.menu li.p5:hover ~ li.icons b.m4,
.menu li.p5:hover ~ li.icons b.m6,
.menu li.p6:hover ~ li.icons b.m5,
.menu li.p6:hover ~ li.icons b.m7,
.menu li.p7:hover ~ li.icons b.m6,
.menu li.p7:hover ~ li.icons b.m8,
.menu li.p8:hover ~ li.icons b.m7 {font-size:16px; height:46px; width:232px; line-height:46px; margin:-4px 0 -4px 12px; background-color:#b00; position:relative; z-index:9; box-shadow:0 0 15px rgba(0,0,0,0.7); color:#f0f0f0;}

.menu li.p1:hover ~ li.icons b.m3,
.menu li.p2:hover ~ li.icons b.m4,
.menu li.p3:hover ~ li.icons b.m1,
.menu li.p3:hover ~ li.icons b.m5,
.menu li.p4:hover ~ li.icons b.m2,
.menu li.p4:hover ~ li.icons b.m6,
.menu li.p5:hover ~ li.icons b.m3,
.menu li.p5:hover ~ li.icons b.m7,
.menu li.p6:hover ~ li.icons b.m4,
.menu li.p6:hover ~ li.icons b.m8,
.menu li.p7:hover ~ li.icons b.m5,
.menu li.p8:hover ~ li.icons b.m6 {font-size:15px; height:44px; width:226px; line-height:44px; margin:-3px 0 -3px 8px; background-color:#a00; position:relative; z-index:8; box-shadow:0 0 10px rgba(0,0,0,0.8); color:#e8e8e8;}

.menu li.p1:hover ~ li.icons b.m4,
.menu li.p2:hover ~ li.icons b.m5,
.menu li.p3:hover ~ li.icons b.m6,
.menu li.p4:hover ~ li.icons b.m1,
.menu li.p4:hover ~ li.icons b.m7,
.menu li.p5:hover ~ li.icons b.m2,
.menu li.p5:hover ~ li.icons b.m8,
.menu li.p6:hover ~ li.icons b.m3,
.menu li.p7:hover ~ li.icons b.m4,
.menu li.p8:hover ~ li.icons b.m5 {font-size:14px; height:42px; width:222px; line-height:42px; margin:-2px 0 -2px 4px; background-color:#900; position:relative; z-index:7; box-shadow:0 0 5px rgba(0,0,0,0.9); color:#e0e0e0;}
Нравится
SocButtons v1.5