Красивое выдвигающиеся меню
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
Категория: Разное | Добавил: Admin (28.08.2010) | Автор: www.i-ucoz.ru
Просмотров: 489 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]