» »

Круглое меню для сайта 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>
23.08.2013 Просмотров: 1199 Комментарий: (7)

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

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

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