[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Великолепное горизонтальное меню (jQuery) - Меню
AKA-47 Date: Понедельник, 16.07.2012, 19:00 | Message # 1
Messages: 73
Reproofs:
Respect
[ 5 ]
Offline
скрин

Очень красивое горизонтальное меню на jQuery. Подойдёт для сайтов с любой цветовой схемой.
Установка:

В верхнюю часть сайта, в то место, где будет меню, вставляем код:
Code
<script type="text/javascript" src="http://s101.ucoz.net/src/u.js"></script>    
    <script>    
    jQuery(function(){    
    $('.menu td').append('<div align="center"><img src="http://joomla.ucoz.com/icons-shadow.png"></div>')    
    $('.menu td').hover(function(){    
    $(this).find('a').stop().animate({top:'-30'},300);    
    $(this).find('a').animate({top:'-20'},300)    
    $(this).find('img').stop().animate({opacity:'.3',height:'25px'},300)    
    $(this).find('span').stop().animate({opacity:'.7',bottom:'15px'},300)    
    },    
    function(){    
    $(this).find('a').stop().animate({top:'10',}, 300);    
    $(this).find('span').stop().animate({opacity:'0.0',bottom:'20px'}, 300)    
    $(this).find('img').stop().animate({opacity:'1.0',height:'30px'}, 300)    
    });    
    });    
    </script>    
    <style>    
    body{margin:0}    
    .menu td{width:110px;height:200px;text-align:center;}    
    .menu a{display:block;width:90px;height:90px;position:relative;left:10px;top:10}    
    #home{background:url(http://joomla.ucoz.com/home.png)no-repeat center;}    
    #blog{background:url(http://joomla.ucoz.com/blog.png)no-repeat center;}    
    #load{background:url(http://joomla.ucoz.com/load.png)no-repeat center;}    
    #forum{background:url(http://joomla.ucoz.com/img.png)no-repeat center;}    
    #img{background:url(http://joomla.ucoz.com/forum.png)no-repeat center;}    
    #rss{background:url(http://joomla.ucoz.com/rss.png)no-repeat center;}    
    .menu span{opacity:.0;position:relative;font-weight:700;background:#555;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;color:#FFF;border:1px solid #000;padding:3px;bottom:20px;}    
    </style>    
    <table align="center" class="menu" border="0" cellspadding="0" cellspacing="0">    
    <tr>    
    <td><a id="home" href="#"></a><span>Главная</span></td>    
    <td><a id="blog" href="#"></a><span>Блог</span></td>    
    <td><a id="load" href="#"></a><span>Файлы</span></td>    
    <td><a id="forum" href="#"></a><span>Альбомы</span></td>    
    <td><a id="img" href="#"></a><span>Форум</span></td>    
    <td><a id="rss" href="#"></a><span>RSS</span></td>    
    </tr>    
    </table>




Edited by:ak-47__alex - Понедельник, 16.07.2012, 19:01
  • Страница 1 из 1
  • 1
Поиск: