Kb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Вертикальное меню с подменю выплывающим строчкой сбоку (СSS3)</title> <style type="text/css"> .menu, .menu ul {margin:0; padding:0; list-style:none; float:left;} .menu .main {position:relative; float:left; clear:left; overflow:hidden; background:#9097aa; border-right:5px solid #000; margin-bottom:1px;} .menu .sub li {margin-top:-35px;} .menu a {position:relative; display:block; width:89px; text-decoration:none; font:normal bold 12px/35px arial, sans-serif; color:#fff; background:#9097aa; padding-left:10px; border-right:1px solid #ebf0f4;} .menu a.top { -webkit-transition: margin 0.7s ease-in-out; -mz-transition: margin 0.7s ease-in-out; -o-transition: margin 0.7s ease-in-out; transition: margin 0.7s ease-in-out; } .menu a.p1 {left:100px} .menu a.p2 {left:200px} .menu a.p3 {left:300px} .menu a.p4 {left:400px} .menu a.p5 {left:500px} .menu a:hover {background:#dfe2e9; color:#000;} .menu a.top:hover, .menu .sub a:hover {margin-right:500px;} </style> </head> <body> <div class="imageHolder"> <ul class="menu"> <li class="main"><a href="">Home</a></li> <li class="main"><a href="" class="top">Get in Touch</a> <ul class="sub"> <li><a class="p1" href="">Email</a></li> <li><a class="p2" href="">Telephone</a></li> <li><a class="p3" href="">Online Form</a></li> <li><a class="p4" href="">Snail Mail</a></li> </ul> </li> <li class="main"><a href="" class="top">Resort</a> <ul class="sub"> <li><a class="p1" href="">Ski Hire</a></li> <li><a class="p2" href="">Ski Slopes</a></li> <li><a class="p3" href="">Night Life</a></li> <li><a class="p4" href="">Restaurants</a></li> <li><a class="p5" href="">Car Hire</a></li> </ul> </li> <li class="main"><a href="" class="top">The Area</a> <ul class="sub"> <li><a class="p1" href="">Where to go</a></li> <li><a class="p2" href="">What to do</a></li> <li><a class="p3" href="">Museums</a></li> <li><a class="p4" href="">National Parks</a></li> </ul> </li> <li class="main"><a href="" class="top">Information</a> <ul class="sub"> <li><a class="p1" href="">Currency</a></li> <li><a class="p2" href="">Resort</a></li> <li><a class="p3" href="">Language</a></li> <li><a class="p4" href="">Short Breaks</a></li> </ul> </li> <li class="main"><a href="">Privacy</a></li> </ul> </div> </body> </html>
Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER
