Главная » Скрипты для uCoz » Меню и навигация » Ленточное меню на CSS3 для uCoz


100$ в день - на бирже подписок
 

Ленточное меню на CSS3 для uCoz

Автор: Raichu, Опубликован: 23:06, Просмотров: 486


Ленточное меню на CSS3 для uCoz. Красивое, яркое, насыщенное меню. Internet Explorer 8 и 9 не поддерживают переходы CSS3, так что при наведении на пункт меню, анимации не будет и в IE 7 так же меню будет не полноценно отображатся. Меню кросбраузерно во всех остальных оставшиеся браузерах.

Установка:

Где хотим видеть данное меню вставляем код:

Code
<div class='ribbon'>  
    <a href='#'><span>Главная</span></a>  
    <a href='#'><span>О нас</span></a>  
    <a href='#'><span>Сервисы</span></a>  
    <a href='#'><span>Кнотакт</span></a>  
  </div>


Далее в таблицу стилей вставляем:

Code
  
    .ribbon {  
    display:inline-block;  
    }  

    .ribbon:after, .ribbon:before {  
    margin-top:0.5em;  
    content: "";  
    float:left;  
    border:1.5em solid #fff;  
    }  

    .ribbon:after {  
    border-right-color:transparent;  
    }  

    .ribbon:before {  
    border-left-color:transparent;  
    }  

    .ribbon a:link, .ribbon a:visited {    
    color:#000;  
    text-decoration:none;  
    float:left;  
    height:3.5em;  
    overflow:hidden;  
    }  

    .ribbon span {  
    background:#fff;  
    display:inline-block;  
    line-height:3em;  
    padding:0 1em;  
    margin-top:0.5em;  
    position:relative;  

    -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */  
    -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */  
    -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */  
    -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */  
    transition: background-color 0.2s, margin-top 0.2s;  
    }  

    .ribbon a:hover span {  
    background:#FFD204;  
    margin-top:0;  
    }  

    .ribbon span:before {  
    content: "";  
    position:absolute;  
    top:3em;  
    left:0;  
    border-right:0.5em solid #9B8651;  
    border-bottom:0.5em solid #fff;  
    }  

    .ribbon span:after {  
    content: "";  
    position:absolute;  
    top:3em;  
    right:0;  
    border-left:0.5em solid #9B8651;  
    border-bottom:0.5em solid #fff;  
    }




    Источник: uc-portaller.ru      

Раздел: Меню и навигация

Гости не могут оставлять комментарии в данной новости.
Рекомендуем Вам зарегестрироваться или войти на сайт под своим логином.
-1  
2 Raichu   (21.08.2012 20:51) [Материал]
Послушай еще одно высказывание забаню, на russellere там только уроки есть!

0  
1 jaguar37russ   (21.08.2012 17:14) [Материал]
у uc-portaler ума не хватит такое сделать ! там админ ребенок !!!! когда копируешь материал убедись в правильности источника