Среда, 27.09.2017, 00:55
Приветствую Вас Гость

РЕКЛАМНЫЙ БЛОК
Меню сайта
VKONTAKTE
FRIENDS SERVER
PUB
Новый объявлений
Наш опрос
Оцените мой сайт
Статистика
Зарегистрировано 172 (сегодня + 0 новых)
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Нас сегодня посетиле :
Главная » Каталог материал » Скрипты ucoz » Скрипты Разное

КРУГЛОЕ МЕНЮ С ПЛАВНЫМ УВЕЛИЧЕНИЕМ КАРТИНОК ДЛЯ UCOZ

Просмотров: 267 | Добавил: Bel | Рейтинг: 5.0/1 | Теги: КРУГЛОЕ МЕНЮ С ПЛАВНЫМ УВЕЛИЧЕНИЕМ
http://scripts-for-ucoz.ru/load/menju_dlja_ucoz_sajta/menju_dlja_ucoz/16-1-0-870 01.07.2013, 14:36
Отличное и очень редкое круглое меню, в котором при наведение мышку плавно увеличивается в размерах. Скажу сразу, что под такое меню Вам придётся подстраивать дизайн у всего сайта, так как меню является уникальным и необычной формы. Чем то форма этого меню напоминает менюшку у мобильных телефонов. Все картинки в этом круглом меню имеют размер 80 на 80 пикселей, и при желании их можно заменить на свои и на под тематику Вашего сайта. Ссылки в коде меню нужно изменить на свои. Если же у Вас остались какие-то вопросы, тогда задавайте их в комментариях чуть ниже и Мы попробуем Вам помочь с этим. Так же кликните LIKE в социальных сетях.
Код
<style>  
.circles {width:320px; height:320px; border-radius:320px; margin:50px auto; position:relative; border-radius:320px;}  
.circles a.tgt {display:block; position:absolute; left:128px; top:0; width:64px; height:64px; border-radius:64px; z-index:100; background:url(http://delaisait.ucoz.ru/script/menu/img/7/trans.gif);  
-webkit-transform-origin:32px 160px;  
-moz-transform-origin:32px 160px;  
-ms-transform-origin:32px 160px;  
-o-transform-origin:32px 160px;  
transform-origin:32px 160px;  
}  
.circle li:nth-child(2),  
.circles a:nth-child(2) {  
-webkit-transform: rotate(40deg);  
-moz-transform: rotate(40deg);  
-ms-transform: rotate(40deg);  
-o-transform: rotate(40deg);  
transform: rotate(40deg);  
}  
.circle li:nth-child(3),  
.circles a:nth-child(3) {  
-webkit-transform: rotate(80deg);  
-moz-transform: rotate(80deg);  
-ms-transform: rotate(80deg);  
-o-transform: rotate(80deg);  
transform: rotate(80deg);  
}.circle li:nth-child(4),  
.circles a:nth-child(4) {  
-webkit-transform: rotate(120deg);  
-moz-transform: rotate(120deg);  
-ms-transform: rotate(120deg);  
-o-transform: rotate(120deg);  
transform: rotate(120deg);  
}  
.circle li:nth-child(5),  
.circles a:nth-child(5) {  
-webkit-transform: rotate(160deg);  
-moz-transform: rotate(160deg);  
-ms-transform: rotate(160deg);  
-o-transform: rotate(160deg);  
transform: rotate(160deg);  
}  
.circle li:nth-child(6),  
.circles a:nth-child(6) {  
-webkit-transform: rotate(200deg);  
-moz-transform: rotate(200deg);  
-ms-transform: rotate(200deg);  
-o-transform: rotate(200deg);  
transform: rotate(200deg);  
}  
.circle li:nth-child(7),  
.circles a:nth-child(7) {  
-webkit-transform: rotate(240deg);  
-moz-transform: rotate(240deg);  
-ms-transform: rotate(240deg);  
-o-transform: rotate(240deg);  
transform: rotate(240deg);  
}  
.circle li:nth-child(8),  
.circles a:nth-child(8) {  
-webkit-transform: rotate(280deg);  
-moz-transform: rotate(280deg);  
-ms-transform: rotate(280deg);  
-o-transform: rotate(280deg);  
transform: rotate(280deg);  
}  
.circle li:nth-child(9),  
.circles a:nth-child(9) {  
-webkit-transform: rotate(320deg);  
-moz-transform: rotate(320deg);  
-ms-transform: rotate(320deg);  
-o-transform: rotate(320deg);  
transform: rotate(320deg);  
}  
ul.circle {padding:0; margin:0; list-style:none; width:320px; height:320px; position:absolute; left:0; top:0; z-index:10;}  
ul.circle li {position:absolute; left:128px; top:0; width:64px; height:64px; border-radius:64px;  
-webkit-transform-origin:32px 160px;  
-moz-transform-origin:32px 160px;  
-ms-transform-origin:32px 160px;  
-o-transform-origin:32px 160px;  
transform-origin:32px 160px;  
}  
ul.circle li b {display:block; width:64px; height:64px; border-radius:64px; text-align:center; margin:0; position:relative;  
-webkit-transition: 0.5s;  
-moz-transition: 0.5s;  
-ms-transition: 0.5s;  
-o-transition: 0.5s;  
transition: 0.5s;  
}  
ul.circle li b img {width:62.5%; height:62.5%; padding-top:18.75%;  
-webkit-transition: 0.5s;  
-moz-transition: 2s;  
-ms-transition: 0.5s;  
-o-transition: 0.5s;  
transition: 0.5s;  
}  
.circle li:nth-child(2) b {  
-webkit-transform: rotate(-40deg);  
-moz-transform: rotate(-40deg);  
-ms-transform: rotate(-40deg);  
-o-transform: rotate(-40deg);  
transform: rotate(-40deg);  
}  
.circle li:nth-child(3) b {  
-webkit-transform: rotate(-80deg);  
-moz-transform: rotate(-80deg);  
-ms-transform: rotate(-80deg);  
-o-transform: rotate(-80deg);  
transform: rotate(-80deg);  
}  
.circle li:nth-child(4) b {  
-webkit-transform: rotate(-120deg);  
-moz-transform: rotate(-120deg);  
-ms-transform: rotate(-120deg);  
-o-transform: rotate(-120deg);  
transform: rotate(-120deg);  
}  
.circle li:nth-child(5) b {  
-webkit-transform: rotate(-160deg);  
-moz-transform: rotate(-160deg);  
-ms-transform: rotate(-160deg);  
-o-transform: rotate(-160deg);  
transform: rotate(-160deg);  
}  
.circle li:nth-child(6) b {  
-webkit-transform: rotate(-200deg);  
-moz-transform: rotate(-200deg);  
-ms-transform: rotate(-200deg);  
-o-transform: rotate(-200deg);  
transform: rotate(-200deg);  
}  
.circle li:nth-child(7) b {  
-webkit-transform: rotate(-240deg);  
-moz-transform: rotate(-240deg);  
-ms-transform: rotate(-240deg);  
-o-transform: rotate(-240deg);  
transform: rotate(-240deg);  
}  
.circle li:nth-child(8) b {  
-webkit-transform: rotate(-280deg);  
-moz-transform: rotate(-280deg);  
-ms-transform: rotate(-280deg);  
-o-transform: rotate(-280deg);  
transform: rotate(-280deg);  
}  
.circle li:nth-child(9) b {  
-webkit-transform: rotate(-320deg);  
-moz-transform: rotate(-320deg);  
-ms-transform: rotate(-320deg);  
-o-transform: rotate(-320deg);  
transform: rotate(-320deg);  
}  
.circles a.tgt:hover {display:block; position:absolute; left:96px; top:-32px; width:128px; height:128px; border-radius:128px; z-index:100; z-index:50;  
-webkit-transform-origin:64px 192px;  
-moz-transform-origin:64px 192px;  
-ms-transform-origin:64px 192px;  
-o-transform-origin:64px 192px;  
transform-origin:64px 192px;  
}  
.circles a.p1:hover ~ .circle li:nth-child(1) b,  
.circles a.p2:hover ~ .circle li:nth-child(2) b,  
.circles a.p3:hover ~ .circle li:nth-child(3) b,  
.circles a.p4:hover ~ .circle li:nth-child(4) b,  
.circles a.p5:hover ~ .circle li:nth-child(5) b,  
.circles a.p6:hover ~ .circle li:nth-child(6) b,  
.circles a.p7:hover ~ .circle li:nth-child(7) b,  
.circles a.p8:hover ~ .circle li:nth-child(8) b,  
.circles a.p9:hover ~ .circle li:nth-child(9) b  
{width:128px; height:128px; border-radius:128px; margin-left:-32px; margin-top:-32px;}  
.circles a.p1:hover ~ .circle li:nth-child(2) b,  
.circles a.p2:hover ~ .circle li:nth-child(3) b,  
.circles a.p3:hover ~ .circle li:nth-child(4) b,  
.circles a.p4:hover ~ .circle li:nth-child(5) b,  
.circles a.p5:hover ~ .circle li:nth-child(6) b,  
.circles a.p6:hover ~ .circle li:nth-child(7) b,  
.circles a.p7:hover ~ .circle li:nth-child(8) b,  
.circles a.p8:hover ~ .circle li:nth-child(9) b,  
.circles a.p9:hover ~ .circle li:nth-child(1) b  
{width:112px; height:112px; border-radius:112px; margin-left:-24px; margin-top:-24px;}  
.circles a.p1:hover ~ .circle li:nth-child(3) b,  
.circles a.p2:hover ~ .circle li:nth-child(4) b,  
.circles a.p3:hover ~ .circle li:nth-child(5) b,  
.circles a.p4:hover ~ .circle li:nth-child(6) b,  
.circles a.p5:hover ~ .circle li:nth-child(7) b,  
.circles a.p6:hover ~ .circle li:nth-child(8) b,  
.circles a.p7:hover ~ .circle li:nth-child(9) b,  
.circles a.p8:hover ~ .circle li:nth-child(1) b,  
.circles a.p9:hover ~ .circle li:nth-child(2) b  
{width:96px; height:96px; border-radius:96px; margin-left:-16px; margin-top:-16px;}  
.circles a.p1:hover ~ .circle li:nth-child(4) b,  
.circles a.p2:hover ~ .circle li:nth-child(5) b,  
.circles a.p3:hover ~ .circle li:nth-child(6) b,  
.circles a.p4:hover ~ .circle li:nth-child(7) b,  
.circles a.p5:hover ~ .circle li:nth-child(8) b,  
.circles a.p6:hover ~ .circle li:nth-child(9) b,  
.circles a.p7:hover ~ .circle li:nth-child(1) b,  
.circles a.p8:hover ~ .circle li:nth-child(2) b,  
.circles a.p9:hover ~ .circle li:nth-child(3) b  
{width:80px; height:80px; border-radius:80px; margin-left:-8px; margin-top:-8px;}  
.circles a.p1:hover ~ .circle li:nth-child(9) b,  
.circles a.p2:hover ~ .circle li:nth-child(1) b,  
.circles a.p3:hover ~ .circle li:nth-child(2) b,  
.circles a.p4:hover ~ .circle li:nth-child(3) b,  
.circles a.p5:hover ~ .circle li:nth-child(4) b,  
.circles a.p6:hover ~ .circle li:nth-child(5) b,  
.circles a.p7:hover ~ .circle li:nth-child(6) b,  
.circles a.p8:hover ~ .circle li:nth-child(7) b,  
.circles a.p9:hover ~ .circle li:nth-child(8) b  
{width:112px; height:112px; border-radius:112px; margin-left:-24px; margin-top:-24px;}  
.circles a.p1:hover ~ .circle li:nth-child(8) b,  
.circles a.p2:hover ~ .circle li:nth-child(9) b,  
.circles a.p3:hover ~ .circle li:nth-child(1) b,  
.circles a.p4:hover ~ .circle li:nth-child(2) b,  
.circles a.p5:hover ~ .circle li:nth-child(3) b,  
.circles a.p6:hover ~ .circle li:nth-child(4) b,  
.circles a.p7:hover ~ .circle li:nth-child(5) b,  
.circles a.p8:hover ~ .circle li:nth-child(6) b,  
.circles a.p9:hover ~ .circle li:nth-child(7) b  
{width:96px; height:96px; border-radius:96px; margin-left:-16px; margin-top:-16px;}  
.circles a.p1:hover ~ .circle li:nth-child(7) b,  
.circles a.p2:hover ~ .circle li:nth-child(8) b,  
.circles a.p3:hover ~ .circle li:nth-child(9) b,  
.circles a.p4:hover ~ .circle li:nth-child(1) b,  
.circles a.p5:hover ~ .circle li:nth-child(2) b,  
.circles a.p6:hover ~ .circle li:nth-child(3) b,  
.circles a.p7:hover ~ .circle li:nth-child(4) b,  
.circles a.p8:hover ~ .circle li:nth-child(5) b,  
.circles a.p9:hover ~ .circle li:nth-child(6) b  
{width:80px; height:80px; border-radius:80px; margin-left:-8px; margin-top:-8px;}  
</style>  
<div class="circles">  
<a class="tgt p1" href="#"></a>  
<a class="tgt p2" href="#"></a>  
<a class="tgt p3" href="#"></a>  
<a class="tgt p4" href="#"></a>  
<a class="tgt p5" href="#"></a>  
<a class="tgt p6" href="#"></a>  
<a class="tgt p7" href="#"></a>  
<a class="tgt p8" href="#"></a>  
<a class="tgt p9" href="#"></a>  
<ul class="circle">  
<li><b><img src="http://delaisait.ucoz.ru/script/menu/img/7/i1.png" alt="" /></b></li>  
<li><b><img src="http://delaisait.ucoz.ru/script/menu/img/7/i2.png" alt="" /></b></li>  
<li><b><img src="http://delaisait.ucoz.ru/script/menu/img/7/i3.png" alt="" /></b></li>  
<li><b><img src="http://delaisait.ucoz.ru/script/menu/img/7/i4.png" alt="" /></b></li>  
<li><b><img src="http://delaisait.ucoz.ru/script/menu/img/7/i5.png" alt="" /></b></li>  
<li><b><img src="http://delaisait.ucoz.ru/script/menu/img/7/i6.png" alt="" /></b></li>  
<li><b><img src="http://delaisait.ucoz.ru/script/menu/img/7/i7.png" alt="" /></b></li>  
<li><b><img src="http://delaisait.ucoz.ru/script/menu/img/7/i8.png" alt="" /></b></li>  
<li><b><img src="http://delaisait.ucoz.ru/script/menu/img/7/i9.png" alt="" /></b></li>  
</ul>  
</div>

Материал, который Вы сейчас просматриваете, предоставлен, прежде всего, и только для ознакомления. Администрация сайта за содержание предоставленного материала ответственности не несет.
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Ваш профиль
Привет: Гость

Сообщения:

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
Реклама
Block title
Наша Кнопка


Код банера 88x31

Всё для сайтов системы uCoz


Каталог статей
Лента серверов







Поиск
Разные фото
Друзья сайта
TOP=PARTYDIP-ТОП 50 раскрутка раскрутка сайтов. PartyDiP.ucoz.Lv
OSUMANIA.RU - Карты, советы, общение, гайды и многое другое для игры OSU! 88x31
KILL Stebani.Ru - Сижу и Ржу
Топ сайтов и скрипты для uCoz



%
Мини-чат
Для добавления необходима авторизация