Membuat Navigasi Menu Kipas Dengan CSS3

Membuat Navigasi Menu Kipas Dengan CSS3 - Kali ini Fajri 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

Tutorial ini sebelumnya saya dapatkan dari Agan G-Bloog.com.

Oke langsung aja ya kita ke TKP.

 

Demo

• Menu
  • Home
  • Services
    • Printing
    • Editing
    • Storage
  • Contacts
    • Support
    • Sales
    • Buying
    • Photographers
    • Stockist
    • General
  • Stores
    • South Region
    • North Region
    • Central Region
  • Contact Us
    • Email
    • Post
    • Telephone
  • Sales
    • DSLR Cameras
    • Lenses
    • Flash Guns
    • Tripods
    • Filters

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 ^_^

Sumber Script:http://zifana.com/2013/07/kipas-navigasi-menu-keren-dengan-css3/