Membuat Menu Drop down Dan Responsive


Sebagai web designer kebanyakan orang akan berpikir bagaimana agar tampilannya bisa memjadi dinamis, dan unik dan sebagian besar web designer yang sudah professional pasti sudah memikirkan tampilan untuk menu nya. disini saya akan membagi cara bagai mana sih membuat menu dropdown agar website kita memjadi lebih menarik.

Pertama kita siapkan seruktur html untuk menunya.


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

Setelah itu kita masukan kode cssnya untuk tampilanya, namun bisa kaian ubah sesuai anda mau.


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

Nah sudah kelihatan menunya kan. jadi sekarang bagaimana cara membuat dropdownnya.
Biasanya menu dropdown berada di dalam tag  <li> didalam menu pertama,


<div id="menu-wrap">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a>
                <ul>
                    <li><a href="#">Dropdown 1</a></li>
                    <li><a href="#">Dropdown 2</a></li>
                    <li><a href="#">Dropdown 3</a></li>
                    <li><a href="#">Dropdown 4</a></li>
                    <li><a href="#">Dropdown 5</a></li>
                </ul>
            </li>
            <li><a href="#">Article</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</div> 

Bisa dilihat di contoh kita telah menambahkan menu dropdown 1,dropdown 2 dan seterusnya.
Bisa juga kalian tambahkan di menu-menu lain seperti dibawah galery atau didalam dropdown ditambah dropdown lagi sempai seterusnya.


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

Lalu apakah itu sudah selesai? masih belum, kita tambahkan css untuk dropdownnya.

Letakkan tepat dibawah style sebelumya.


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

Ini untuk Demo nya.



Selamat Mencoba !!
Untuk Responsive nya baca lanjutanya
Responsive Drop down Menu Part II