Cara Membuat Menu Dropdown yang keren dan responsive di blog

Kembali lagi akang mencoba mempersembahkan Cara membuat menu dropdown yang keren dan responsive di blog, anda tentu ingin tampilan blog yang memiliki navigasi menu dropdown yang menarik juga responsive untuk blog anda bukan..???

Untuk membuat menu navigasi seperti gambar diatas,, berikut akang coba paparkan caranya

1. Masuk ke Dashboard Blogger dengan akun anda

2. Pilih Template => Edit HTML ( untuk berjaga jaga jika ada kegagalan sebaiknya sebelum Edit HTML anda klik dulu Cadangkan/pulihkan untuk membeckup template anda)

3. Setelah itu kita masukan kode CSS berikut ini, tepat sebelum kode ]]></b:skin>

#menu-wrap {

    float: left;
}
#menu-wrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu-wrap li {
    float: left;
    margin-right: 10px;
    position: relative;
}
#menu-wrap li:last-child {
    margin-right: 0;
}
#menu-wrap a {
    background-color: #777777;
    color: #FFFFFF;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}

4. Kemudian anda masukkan kode menu-menu dropdown di bawah ini tepat di bawah kode  </header>

<div id="menu-wrap">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul>
                <li><a href="#">Dropdown1</a>
                    <ul>
                        <li><a href="#">Dropdown1</a></li>
                        <li><a href="#">Dropdown2</a></li>
                        <li><a href="#">Dropdown3</a></li>
                        <li><a href="#">Dropdown4</a></li>
                        <li><a href="#">Dropdown5</a></li>
                    </ul>
                </li>
                <li><a href="#">Dropdown2</a></li>
                <li><a href="#">Dropdown3</a></li>
                <li><a href="#">Dropdown4</a></li>
                <li><a href="#">Dropdown5</a></li>
            </ul>
        </li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Gallery</a>
            <ul>
                <li><a href="#">Dropdown1</a></li>
                <li><a href="#">Dropdown2</a></li>
                <li><a href="#">Dropdown3</a></li>
                <li><a href="#">Dropdown4</a></li>
                <li><a href="#">Dropdown5</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

5. Langkah tersebut belum selesai,, lanjutkan dengan menambahkan kode berikut ini tepat di tengah tengah kode <style> dan </style>

#menu-wrap li ul {
    margin: 20px 0 0;
    opacity: 0;
    position: absolute;
    transition:0.5s;
    visibility: hidden;
    width: 200px;
}
#menu-wrap li li {
    float: none;
    margin: 0;
}
#menu-wrap li:hover > ul{
    transition:0.5s;
    margin: 0;
    visibility: visible;
    opacity: 1;
    z-index:2;
}
#menu-wrap li li ul {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.3);
    left: 200px;
    margin: 0 0 0 20px;
    top: 0;
}
#menu-wrap ul a:hover {
    color: #FFFFFF;
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}
#menu-wrap li:hover > a {
    color: #FFFFFF;
    background-image: linear-gradient(#04acec, #0186ba);
    background-color: #0186ba;
} 

6. Setelah kode kode nomor 3, nomor 4, dan nomor 5 sudah terpasang di template blog anda kemudian klik simpan template, tarrrraaaaaaaa,,,, Menu dropdown yang keren dan responsive telah terpasang di blog anda.

Itulah ulasan mengenai Cara Membuat Menu Dropdown yang keren dan responsive, semoga artikel ini dapat membantu anda, terima kasih sudah berkunjung di blog akang.

sumber kode

Tweet

Subscribe to receive free email updates: