» »

Круглое меню для сайта ucoz на CSS3

Круглое меню для сайта ucoz на CSS3

Красивое круглое меню для сайта. Редко где увидишь, можно сказать шикарная навигация по сайту. При наведение на кокой либо раздел в круге он становиться светлым, что очень впечатляет. Само оно оригинальное и создана на стилях, кроме картинок которые вы можете в коде поменять на свои под свою тематику сайта. Само оно выдержана в различной цветовой гамме, каждый цвет под каждый раздел, все создано с умом. Сам код проверен и полностью рабочий и без ошибок.

В коде есть конверт, если вы немного понимаете в кодах, то вы можете сделать, что когда вам кто то написал и оно будит мигать. Но пока просто сделано под некий ваш раздел который будит у вас на сайте. Ставить код вы можете там где по вашему мнению должен стоять. Но так же скажу его можно установить в блок вашего портала и он отлично будит смотреться. Хочу заметить что всего 9 разделов и для любой тематики это будит в самый раз.

Код который вам нужно установить на сайт:

Код
<style>  
ul.piechart {padding:0; margin:0 auto; list-style:none; width:340px; height:340px; overflow:hidden; border-radius:320px; position:relative;  
-webkit-transform:rotate(-20deg);  
-moz-transform:rotate(-20deg);  
-ms-transform:rotate(-20deg);  
-o-transform:rotate(-20deg);  
transform:rotate(-20deg);  
}  
ul.piechart li {width:300px; height:300px; background:transparent; position:absolute; left:170px; top:-130px; overflow:hidden;  
-webkit-transform-origin:0 300px;  
-moz-transform-origin:0 300px;  
-ms-transform-origin:0 300px;  
-o-transform-origin:0 300px;  
transform-origin:0 300px;  
}  
ul.piechart li b {  
-webkit-transform: skewY(50deg);  
-moz-transform: skewY(50deg);  
-ms-transform: skewY(50deg);  
-o-transform: skewY(50deg);  
transform: skewY(50deg);  
}  
ul.piechart li:nth-child(1) {  
-webkit-transform: skewY(-50deg);  
-moz-transform: skewY(-50deg);  
-ms-transform: skewY(-50deg);  
-o-transform: skewY(-50deg);  
transform: skewY(-50deg);  
}  
ul.piechart li:nth-child(1) b {background:#c88;}  
ul.piechart li:nth-child(2) {  
-webkit-transform:rotate(40deg) skewY(-50deg);  
-moz-transform:rotate(40deg) skewY(-50deg);  
-ms-transform:rotate(40deg) skewY(-50deg);  
-o-transform:rotate(40deg) skewY(-50deg);  
transform:rotate(40deg) skewY(-50deg);  
}  
ul.piechart li:nth-child(2) b {background:#c68;}  
ul.piechart li:nth-child(3) {  
-webkit-transform:rotate(80deg) skewY(-50deg);  
-moz-transform:rotate(80deg) skewY(-50deg);  
-ms-transform:rotate(80deg) skewY(-50deg);  
-o-transform:rotate(80deg) skewY(-50deg);  
transform:rotate(80deg) skewY(-50deg);  
}  
ul.piechart li:nth-child(3) b {background:#cc8;}  
ul.piechart li:nth-child(4) {  
-webkit-transform:rotate(120deg) skewY(-50deg);  
-moz-transform:rotate(120deg) skewY(-50deg);  
-ms-transform:rotate(120deg) skewY(-50deg);  
-o-transform:rotate(120deg) skewY(-50deg);  
transform:rotate(120deg) skewY(-50deg);  
}  
ul.piechart li:nth-child(4) b {background:#696;}  
ul.piechart li:nth-child(5) {  
-webkit-transform:rotate(160deg) skewY(-50deg);  
-moz-transform:rotate(160deg) skewY(-50deg);  
-ms-transform:rotate(160deg) skewY(-50deg);  
-o-transform:rotate(160deg) skewY(-50deg);  
transform:rotate(160deg) skewY(-50deg);  
}  
ul.piechart li:nth-child(5) b {background:#869;}  
ul.piechart li:nth-child(6) {  
-webkit-transform:rotate(200deg) skewY(-50deg);  
-moz-transform:rotate(200deg) skewY(-50deg);  
-ms-transform:rotate(200deg) skewY(-50deg);  
-o-transform:rotate(200deg) skewY(-50deg);  
transform:rotate(200deg) skewY(-50deg);  
}  
ul.piechart li:nth-child(6) b {background:#c8c;}  
ul.piechart li:nth-child(7) {  
-webkit-transform:rotate(240deg) skewY(-50deg);  
-moz-transform:rotate(240deg) skewY(-50deg);  
-ms-transform:rotate(240deg) skewY(-50deg);  
-o-transform:rotate(240deg) skewY(-50deg);  
transform:rotate(240deg) skewY(-50deg);  
}  
ul.piechart li:nth-child(7) b {background:#689;}  
ul.piechart li:nth-child(8) {  
-webkit-transform:rotate(280deg) skewY(-50deg);  
-moz-transform:rotate(280deg) skewY(-50deg);  
-ms-transform:rotate(280deg) skewY(-50deg);  
-o-transform:rotate(280deg) skewY(-50deg);  
transform:rotate(280deg) skewY(-50deg);  
}  
ul.piechart li:nth-child(8) b {background:#89c;}  
ul.piechart li:nth-child(9) {  
-webkit-transform:rotate(320deg) skewY(-50deg);  
-moz-transform:rotate(320deg) skewY(-50deg);  
-ms-transform:rotate(320deg) skewY(-50deg);  
-o-transform:rotate(320deg) skewY(-50deg);  
transform:rotate(320deg) skewY(-50deg);  
}  
ul.piechart li:nth-child(9) b {background:#9ca;}  
ul.piechart li:nth-child(1) b,  
ul.piechart li:nth-child(2) b,  
ul.piechart li:nth-child(3) b,  
ul.piechart li:nth-child(4) b,  
ul.piechart li:nth-child(5) b,  
ul.piechart li:nth-child(6) b,  
ul.piechart li:nth-child(7) b,  
ul.piechart li:nth-child(8) b,  
ul.piechart li:nth-child(9) b  
{display:block; width:300px; height:300px; border-radius:300px; position:absolute; left:-150px; top:150px;  
box-shadow:0px 0px 10px rgba(0,0,0,0.9);  
}  
ul.piechart li:nth-child(10) {width:200px; height:200px; box-shadow:inset 0px 0px 10px rgba(0,0,0,0.9); border-radius:200px; background:#fff; position:absolute; left:70px; top:70px;}  
ul.piechart li a b img {position:absolute; left:180px; top:20px; border:0;  
-webkit-transform:rotate(20deg);  
-moz-transform:rotate(20deg);  
-ms-transform:rotate(20deg);  
-o-transform:rotate(20deg);  
transform:rotate(20deg);  
}  
ul.piechart li a:hover b {background:#eee;}  
</style>  
<ul class="piechart">  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/ZR/1364854779_icon1.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/ZR/1364854714_icon2.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/ZR/1364854765_icon3.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/ZR/1364854791_icon4.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/ZR/1364854764_icon5.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/ZR/1364854794_icon6.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/ZR/1364854751_icon7.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/ZR/1364854750_icon8.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/ZR/1364854783_icon9.png" alt="" /></b></a></li>  
<li></li>  
</ul>
2013-08-23 Просмотров: 2111 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
Joni-Jo
Joni-Jo 2013-08-23 22:361
0
Еще б страничку с примером! А то несовсем понятно!
Kosten
Kosten 2013-08-23 22:532
0
За код ручаюсь, полностью рабочий.
Delete
Delete 2013-08-23 23:153
0
Joni-Jo, вот держите "Пример"
Kosten
Kosten 2013-08-24 00:054
0
N_O_O_B, от души за суету...
Delete
Delete 2013-08-24 00:345
0
Kosten, какую ?
Kosten
Kosten 2013-08-24 00:426
0
За, DEMO
Delete
Delete 2013-08-24 08:327
0
ничего сложного...
avatar