Home / Trixs Blogging / Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi

Cara Download Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi Update Terbaru

Sedikit Info Seputar Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel Trixs Blogging, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi Terbaru
link: Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi Terbaru dan Terlengkap 2017

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

Itulah sedikit Artikel Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi terbaru dari kami

Semoga artikel Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Membuat Navigasi Menu Model Kipas Lingkaran Efek Transisi

Share this