Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi

Satria Perwira 12/23/2013 Trixs Blogging

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

7 komentar

Unknown14 April 2014 pukul 13.31
jadinya keren juga yah setelah ane praktekin di blog ane :) thanks gan
BalasHapus
Balasan
Tio Agung Rianto14 April 2014 pukul 15.19
Wah keren gan, coba dulu hehe
BalasHapus
Balasan
Unknown17 April 2014 pukul 00.58
keren banget nih gan
BalasHapus
Balasan
Satria Perwira18 Januari 2015 pukul 16.02
Oke gan, silahkan monggo :)
BalasHapus
Balasan

Tambahkan komentar

Komentar anda sangat dibutuhkan bagi kemajuan kami untuk terus berkarya.
Diharapkan :
* Berkomentarlah dengan bahasa yang baik
* Tidak ada unsur SARA, SPAM, PORNO
* Tidak merugikan orang lain
* Menunjukkan identitas yang jelas bukan Anonim

Diperkenankan :
* Komentar promosi link web anda
* Kritik & Saran

[Protected] by DMCA Protection Pro™
EmoticonEmoticon

Most Visited

Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi

7 komentar