Меню для uCoz
827материалов
228тем на форуме
3003комментария
6151пользователь

Меню для 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
Материал просмотрен: 1201 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

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

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


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