Анимированное меню в виде ленты uCozКогда один плагин в своем описании использует слова "анимированное",
"меню", "в виде ленты", я уже точно знаю, что хочу его. И правильно
делаю, и вам того же советую, потому что на данный момент стиль
меню-лента очень популярен. Это очень просто и красиво, а подходит для
сайтов любой тематики.
Конечно, для сайта ненавистников меню в виде
анимированных лент не подойдет, но что-то я за долгие годы, проведенные в
интернете, такого сайта еще не встречал. Конечно, если я вот сейчас
подал идею - ок, но для всех остальных - это отличное легкое и простое в
установке решение для облагораживания вашего сайта. Небольшая белая
ленточка, которая податливо выгибается при наведении, подставляя вам под
мышку нужную вкладку меню, которая, между прочим, подсвечивается в
желтый цвет. Для сайтов, как в светлом, так и в темном оформлении
идеально подойдет. В нужное место в код страницы впишите его и
пользуйтесь, а так же рекомендуйте знакомым. Анимация хорошая, не
тормозит. Пишите комментарии и оставляйте свое мнение, оно для нас очень
важно, ведь мы ищем все эти классные штуки специально для вас и ваших
сайтов.
Установка:
В то место, где должно быть меню, вставляйте: <divclass='ribbon'> <ahref='#'><span>Главная</span></a> <ahref='#'><span>О нас</span></a> <ahref='#'><span>Сервисы</span></a> <ahref='#'><span>Контакты</span></a> </div>
|
В самый низ css: .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:01em; 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; }
|
Нравится
|