[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Красивое выдвигающиеся меню By Vlados
BaceKДата: Четверг, 24.06.2010, 14:13 | Сообщение # 1
I LOVE EXTRIM
Сообщений: 928

Настраиваем под себя. Картинки и названия меню.

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>


  • Страница 1 из 1
  • 1
Поиск: