Go! Blog

Membuat Navigasi Menu Kipas Dengan CSS3 - Hallo sobat akhirnya dihari minggu ini saya bisa kembali posting artikel sebenarnya saya hari ini tidak bisa posting karena speedy saya rusak, demi update artikel saya rela-rela pergi ke warnet hehehhe semoga artikel yang saya bagikan ini dapat sobat simak :D kali ini saya akan berbagi tentang CSS3 lagi yaitu membuat menu navigasi berbentuk kipas jika sobat belum tau bentuknya seperti apa?? oke saya akan tunjukkan demonya. Jika sobat berminat jangan close kan layar browser anda heheh XD.d

Demo

Jika sobat sudah melihat demonya seperti diatas yuk sekarang waktunya untuk memasang XD

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%;}

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.com">Lenses</a></li>
                    <li><a href="http://zifana.com">Flash Guns</a></li>
                    <li><a href="http://zifana.com">Tripods</a></li>
                    <li><a href="http://zifana.com">Filters</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div></div>

Keterangan

Sobat bisa mengganti tulisan yang saya beri warna merah muda dengan link yang sobat inginkan.

Nah sekian pembahasan artikel yang saya bagikan hari ini tentang CSS3 semoga artikel yang saya bagikan bermanfaat bagi sobat semua. Jika ada pertanyaan silahkan berkomentar di bawah artikel ini, Selamat melanjutkan liburan sobat ^_^