Красивое выдвигающиеся меню
Code <style type="text/css"> /* ***** menu ***** */ ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:550px; } ul#navigation li { width: 103px; display:inline; float:left; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 17px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:12px; color:#60ACD8; text-shadow: 0 -1px 1px #fff; } ul#navigation .bazar a{ background-image: url(http://6543210.ucoz.com/images/miscellaoneous.png); } ul#navigation .hal a { background-image: url(http://6543210.ucoz.com/images/misc_doc.png); } ul#navigation .for a { background-image: url(http://6543210.ucoz.com/images/misc.png); } ul#navigation .chatib a { background-image: url(http://6543210.ucoz.com/images/misccc.png); } ul#navigation .sms a { background-image: url(http://6543210.ucoz.com/images/miscellaneous.png); } </style> <ul id="navigation"> <li class="bazar"><a href="/" target ="_blank"><span>Меню</span></a></li> <li class="hal"><a href="/" target ="_blank"><span>Меню</span></a></li> <li class="for"><a href="/forum/" target ="_blank"><span>Меню</span></a></li> <li class="chatib"><a href="/forum/misc.php?do=cchatbox" target ="_blank"><span>Меню</span></a></li> <li class="sms"><a href="/sms.php" target ="_blank"><span>Меню</span></a></li> </ul> <script type="text/javascript" src="http://scriptozina.ucoz.ru/scripts/navigation_by_vlados.js"></script> <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script> </td> </tr> </table> </div></td> </tr> </table> Источник: http://www.i-ucoz.ru/_nw/5/s24842519.jpg | |
| |
Просмотров: 489 | |
Всего комментариев: 0 | |