Cara Membuat Menu Bar Keren Dengan Efek Whirling (Berputar)

komputerdia.com - Efek whirling (berputar) pada menu bar dalam konteks pembuatannya memang tidak jauh berbeda dengan pembuatan jenis menu bar atau menu navigasi lainnya. Unsur pertama yang harus kalian perhatikan adalah kode CSS nya.

Jika kalian menginginkan menu bar dengan tampilan elegan yang dilengkapi dengan efek berputar, dalam artikel ini saya akan mencoba menjelaskan bagaimana cara membuat menu bar pada blog dengan menggunakan efek whirling (berputar).

Bagi kalian yang ingin mencoba jenis menu bar yang lainnya, kalian dapat membaca dan mempelajari artikel saya yang lainnya pada list dibawah ini :

Baca Juga :

Cara Membuat Menu Bar Keren Dengan Efek Whirling (Berputar)

Cara Membuat Menu Bar Blog Dengan Efek Whirling

Cara Membuat Menu Bar Keren Dengan Efek Whirling (Berputar)
  • Silahkan kalian masuk ke akun blogger kalian
  • Pilih menu template atau menu theme dan klik tombol edit html .
  • Setelah berada di halaman edit html, silahkan kalina cari kode ]]></b:skin>, dan tempelkan kode dibawah ini tepat diatas kode ]]></b:skin> .
/*Menubar Efek Berputar*/
.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    height: 58px;
}
.menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    background: -o-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);

    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    min-width: 160px;
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
    border-radius: 5px 0 0;
}
.menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #808080;
    display: block;
    font-family: 'Lucida Console';
    font-size: 18px;
    line-height: 54px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
}
.menu li:hover {
    background-color: #1c1c1c;
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
    background: linear-gradient(#1c1c1c, #1b1b1b);

    border-bottom: 2px solid #222222;
    border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
    border-radius: 5px 0 0 0;
    border-left: 3px solid #C4302B;
    color: #C4302B;
}
/* submenu styles */
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;

    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);

    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
  • Langkah selanjutnya silahkan kalian cari kode <div class='outer-wrapper'> , jika kalian tidak menemukan kode seperti itu, carilah kode yang hampir mirip dengan kode tersebut
  • Setelah kode tersebut ditemukan, kalian letakkan kode dibawah ini tepat diatas kode <div class='outer-wrapper'> atau kode mirip seperti kode tersebut
<ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="#s1">Menu 1</a>
        <ul class="submenu">
            <li><a href="http://www.komputerdia.com/">Submenu a</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu b</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu c</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu d</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu e</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu f</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu g</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu h</a></li>
        </ul>
    </li>
    <li class="active"><a href="#s2">Menu 2</a>
        <ul class="submenu">
            <li><a href="http://www.komputerdia.com/">Submenu a</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu b</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu c</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu d</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu e</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu f</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu g</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu h</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul class="submenu">
            <li><a href="http://www.komputerdia.com/">Submenu a</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu b</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu c</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu d</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu e</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu f</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu g</a></li>
            <li><a href="http://www.komputerdia.com/">Submenu h</a></li>
        </ul>
    </li>
    <li><a href="http://www.komputerdia.com/">Menu 4</a></li>
    <li><a href="http://www.komputerdia.com/">Back To</a></li>
</ul>
  • Silahkan kalian ganti kode yang berwarna merah dengan alamat url atau alamat link yang akan kalian tuju.
  • Ganti juga setelan lainnya seperti nama menu dan warna sesuai dengan selera kalian
  • Jika semuanya telah kalian ubah, silahkan kalian tekan tombol simpan .
  • Lihat hasilnya, semoga bermanfaat untuk kalian semuanya

Sumber Referensi : https://mastamvan.blogspot.co.id/
.
.

Berlangganan Artikel terbaru (free):

Post a Comment