828материалов
231тема на форуме
3032комментария
6247пользователей

Меню для uCoz


Красивое прозрачное анимированное выпадающие меню для системы uCoz! Очень красивое на css3! Если будут вопросы то обращайтесь ко мне или на форум! Скрипт очень легок в установки, особых знаний не нужно!

В любое место ставим код
Код
<style type="text/css">
/* ***** menu ***** */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 0px;
    list-style: none;
    z-index:999999;
    width:440px;
}
ul#navigation li {
    width: 110px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 27px;
    background-color:#fff5ee;
    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:#d5d5d5;
}
ul#navigation li a span{
    letter-spacing:1px;
    font-size:12px;
    color:#6495ed;
font-weight: bold;
    text-shadow: 0 -1px 1px #fff;    
       
}
ul#navigation .link1 a{
    background-image: url(http://webmaster-ucoz.ru/master/images/sait/load.png);
}
ul#navigation .link2 a {
    background-image: url(http://webmaster-ucoz.ru/master/images/sait/forum.png);
}
ul#navigation .link3 a {
    background-image: url(http://webmaster-ucoz.ru/master/images/sait/news.png);
}
ul#navigation .link4 a {
    background-image: url(http://webmaster-ucoz.ru/master/images/sait/publ.png);
}
</style>
<ul id="navigation">
    <li class="link1"><a href="/load" target ="_blank"><span>Файлы</span></a></li>
    <li class="link2"><a href="/forum"><span>Сообщество</span></a></li>
    <li class="link3"><a href="/news" target ="_blank"><span>Обновления</span></a></li>
    <li class="link4"><a href="/load" target ="_blank"><span>Помощь в uCoz</span></a></li>
</ul>
<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>

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 14.09.2013 в 20:42
Материал просмотрен: 1241 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
uLike – кнопка «Мне нравится»
Вход через социальные сети
Эрудит системы uCoz-uВопросы
Статистики нашего сайта