Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi

Rafi Orilya Groups,- Hello sob.. ketemu lagi dengan saya diposting terbaru kali ini. Semoga posting kali ini bisa bermanfaat buat kita semua yah. Salam blogger Indonesia..

Baiklah langsung saja ya, kali ini kita akan Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi, bagaimana caranya? Silahkan pasang saja script-script yang telah tersedia dibawah ini pastinya udah paham dikit-dikit dong. Untuk demonya bisa dilihat di => Rafi Orilya Portal

Buat pengetahuan aja kalau script CSS diletakan diatas ]]></b:skin>

Untuk script HTML terserah bisa diatas </body> atau dibawah <body> atau ditambah widget dll

Berikut script CSS

/* ===============================================================
copyright © zifana.com
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menuHolder {width:100px; height:100px; margin:50px 0 250px 10px; position:relative; z-index:100;}
.menuHolder ul {padding:0; margin:0; list-style:none; position:absolute; left:0; top:0; width:0; height:0;}
.menuHolder ul li {border-radius:0 0 300px 0; width:0; height:0;}
.menuHolder ul li a {color:#000; text-decoration:none; font:bold 13px/30px arial, sans-serif; text-align:center; box-shadow:-5px 5px 5px rgba(0,0,0,0.4);
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
}
.menuHolder ul.p1 li {position:absolute; left:0; top:0;}
.menuHolder ul.p2 {z-index:-1;}
.menuHolder ul.p3 {z-index:-1;}
.menuHolder li.s1 > a {position:absolute; display:block; width:100px; height:100px; background:#c8c8c8; border-radius:0 0 100px 0;}
.menuHolder li.s2 > a {position:absolute; display:block; width:100px; padding-left:100px; height:200px; background:#ddd; border-radius:0 0 200px 0;}
.menuHolder ul.p3 li a {position:absolute; display:block; width:100px; padding-left:200px; height:300px; background:#999; border-radius:0 0 300px 0;}
.menuHolder ul ul {
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:rotate(90deg);
-moz-transform:rotateZ(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
.menuHolder li.s2:nth-of-type(6) > a {background:#888;
-webkit-transform:rotate(75deg);
-moz-transform:rotateZ(75deg);
-ms-transform:rotate(75deg);
-o-transform:rotate(75deg);
transform:rotate(75deg);
}
.menuHolder li.s2:nth-of-type(5) > a {background:#999;
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder li.s2:nth-of-type(4) > a {background:#aaa;
-webkit-transform:rotate(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menuHolder li.s2:nth-of-type(3) > a {background:#bbb;
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
.menuHolder li.s2:nth-of-type(2) > a {background:#ccc;
-webkit-transform:rotate(15deg);
-moz-transform:rotateZ(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
}

.menuHolder .a6 li:nth-of-type(6) > a {background:#444;
-webkit-transform:rotate(75deg);
-moz-transform:rotateZ(75deg);
-ms-transform:rotate(75deg);
-o-transform:rotate(75deg);
transform:rotate(75deg);
}
.menuHolder .a6 li:nth-of-type(5) > a {background:#555;
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder .a6 li:nth-of-type(4) > a {background:#666;
-webkit-transform:rotate(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menuHolder .a6 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
.menuHolder .a6 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(15deg);
-moz-transform:rotateZ(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
}

.menuHolder .a5 li:nth-of-type(5) > a {background:#555;
-webkit-transform:rotate(72deg);
-moz-transform:rotateZ(72deg);
-ms-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform:rotate(72deg);
}
.menuHolder .a5 li:nth-of-type(4) > a {background:#666;
-webkit-transform:rotate(54deg);
-moz-transform:rotateZ(54deg);
-ms-transform:rotate(54deg);
-o-transform:rotate(54deg);
transform:rotate(54deg);
}
.menuHolder .a5 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(36deg);
-moz-transform:rotateZ(36deg);
-ms-transform:rotate(36deg);
-o-transform:rotate(36deg);
transform:rotate(36deg);
}
.menuHolder .a5 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(18deg);
-moz-transform:rotateZ(18deg);
-ms-transform:rotate(18deg);
-o-transform:rotate(18deg);
transform:rotate(18deg);
}

.menuHolder .a3 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder .a3 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}

.menuHolder li.s1:hover ul.p2 {
-webkit-transform:rotate(0deg);
-moz-transform:rotateZ(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
.menuHolder li.s2:hover ul.p3 {
-webkit-transform:rotate(0deg);
-moz-transform:rotateZ(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
.menuHolder ul li:hover > a {background:#f00; color:#fff;}
.menuHolder li.s2:hover > a {background:#d00; color:#fff;}
.menuHolder .a6 li:hover > a {background:#b00; color:#fff;}
.menuHolder .a5 li:hover > a {background:#b00; color:#fff;}
.menuHolder .a3 li:hover > a {background:#b00; color:#fff;}

.menuWindow {width:110px; height:110px; overflow:hidden; position:absolute; left:0; top:0; z-index:100;
-webkit-transition:0s 1s;
-moz-transition:0s 1s;
-ms-transition:0s 1s;
-o-transition:0s 1s;
transition:0s 1s;
}
.menuHolder:hover .menuWindow {width:310px; height:310px;
-webkit-transition:0s 0s;
-moz-transition:0s 0s;
-ms-transition:0s 0s;
-o-transition:0s 0s;
transition:0s 0s;
}
.menuHolder span {display:block;
-webkit-transform:rotate(5deg);
-moz-transform:rotateZ(5deg);
-ms-transform:rotate(5deg);
-o-transform:rotate(5deg);
transform:rotate(5deg);
}
.menuHolder ~ img.close {width:0; height:0; position:fixed; z-index:-1; left:0; top:0;}
.menuHolder:hover ~ img.close {width:100%; height:100%;}

Berikut script HTML

<div class="menuHolder"><div class="menuWindow">
<ul class="p1">
   <li class="s1"><a href="#url">Menu</a>
       <ul class="p2">
           <li class="s2"><a href="http://zifana.com"><span>Home</span></a></li>
           <li class="s2"><a href="#url"><span>Services</span></a>
               <ul class="p3 a3">
                   <li><a href="http://zifana.com">Printing</a></li>
                   <li><a href="http://zifana.com">Editing</a></li>
                   <li><a href="http://zifana.com">Storage</a></li>
               </ul>
           </li>
           <li class="s2"><a href="#url"><span>Contacts</span></a>
               <ul class="p3 a6">
                   <li><a href="http://zifana.com">Support</a></li>
                   <li><a href="http://zifana.com">Sales</a></li>
                   <li><a href="http://zifana.com">Buying</a></li>
                   <li><a href="http://zifana.com">Photographers</a></li>
                   <li><a href="http://zifana.com">Stockist</a></li>
                   <li><a href="http://zifana.com">General</a></li>
               </ul>
           </li>
           <li class="s2"><a href="#url"><span>Stores</span></a>
               <ul class="p3 a3">
                   <li><a href="http://zifana.com">South Region</a></li>
                   <li><a href="http://zifana.com">North Region</a></li>
                   <li><a href="http://zifana.com">Central Region</a></li>
               </ul>
           </li>
           <li class="s2"><a href="#url"><span>Contact Us</span></a>
               <ul class="p3 a3">
                   <li><a href="http://zifana.com">Email</a></li>
                   <li><a href="http://zifana.com">Post</a></li>
                   <li><a href="http://zifana.com">Telephone</a></li>
               </ul>
           </li>
           <li class="s2 b6"><a href="#url"><span>Sales</span></a>
               <ul class="p3 a5">
                   <li><a href="http://zifana.com">DSLR Cameras</a></li>
                   <li><a href="http://zifana.co">Lenses</a></li>
               </ul>
           </li>
       </ul>
   </li>
</ul>
</div></div>

Yaps silahkahkan ubah tulisan yang berwarna hijau sesuai dengan kehendak anda, hehe..
Biar ngga terlalu panjang penjelasannya, jika error atau ada pertanyaan silahkan berkomentar saja yap, thank's

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin

Digital Informasi

Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi

Artikel Menarik Lainnya