Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

Cara Membuat Menu Dropdown Simpel, Keren dan Mudah

By Muhammad Tajuddin 12 comments
Assalamu'alaikum Wr.Wb, Selamat Malam Para Blogger, bertemu lagi dengan saya dalam Tutorial Membuat Menu Dropdown, sesuai dengan permintaan Teman saya, saya akan menjelaskan bagaimana cara membuat Menu Dropdown atau yang sering kita ketahui Menu Jika kursor Mengarah Pada Satu menu, akan muncul menu lain. 
"Iya Bagaimana Cara Bikinnya Gan...?, Ane masih bingung gan..."
Oke Tenang saja, kalian akan menemukan solusinya di dalam tutorial Dunia Programming, semua masalah yang kalian alami akan teratasi di Dalam Blog Dunia Programming.

Yap, Langsung Saja Simak Tutorial Dibawah ini.
Oke berikut Tampilan Menu Dropdown Sederhana Yang sudah saya rancang :
Cara Membuat Menu Dropdown Versi Dunia Programming
Tampilan Menu Dropdown Versi Dunia Programming

Oke, Untuk Membuat menu tersebut yang kita perlukan adalah Script HTML dan CSS, Oke Langkah pertaman yaitu buat Script HTML dengan nama file index.html
Berikut Script HTMLnya :

HTML
<!doctype html>
    <html>
        <head>
            <title>Dunia Programming</title>
                <link rel="stylesheet" href="style.css" type="text/css" >
        </head>
        <body>
        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Profil</a>
                    <ul>
                        <li><a href="#">Tentang Kami</a></li>
                        <li><a href="#">Sejarah</a></li>
                        <li><a href="#">Visi dan Misi</a></li>
                        <li><a href="#">Struktur Organisasi</a></li>
                    </ul>
                </li>
                <li><a href="#">Kontak</a>
                    <ul>
                        <li><a href="#">Kritik & Saran</a></li>
                        <li><a href="#">Keluhan</a></li>
                    </ul>
                </li>
                <li><a href="#">Info Buku</a>
                    <ul>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">PHP</a></li>
                    </ul>
                </li>
                <li><a href="#">Question</a></li>
            </ul>
        <div>
        </body>
    </html>


Copy pastekan script diatas pada Notepad++ atau SublimeText. Setelah itu Kita Buat Script CSSnya.
Berikut Script CSSnya :

CSS
body {
 background: #000000;
}
#menu {
    position: relative;
    width: 100%;
    height: 40px;
    background: #ff0033;
    border: 5px solid #000000;
}
#menu ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
#menu ul li {
    float: left;
    position: relative;
}
#menu ul li a {
    color: #3300ff;
    padding: 10px;
    border-right: 1px dashed #000000;
    display: block;
    text-decoration: none;
    font-weight: bold;
}
#menu ul li a:hover {
    background: #ffff00;
}
#menu ul li ul {
    display: none;
}
#menu ul li:hover ul {
    display: block;
    position: absolute;
    top: 41px;
    left: 0;
}
#menu ul li:hover ul li a {
    display: block;
    background: #ff0000;
    color: #ffffff;
    width: 130px;
    border-left: 1px solid #000000;
}

Copy Patekan script CSS diatas, Simpan dengan nama style.css, setelah semuanya selesai dicopy, Simpan Semua script yang sudah kalian buat dalam satu folder, ingat...!!!, Harus satu folder, jika tidak, maka akan terjadi error 

Sekian tutorial dari saya,Jika terjadi kesalahan dalam penulisan script, kalian bisa berkomentar pada bawah artikel ini, Sekian Semoga Bermanfaat, Terimakasih. 

12 comments for "Cara Membuat Menu Dropdown Simpel, Keren dan Mudah"

- Gunakan Kata-Kata Yang Sopan
- Dilarang Keras Menaruh Link Aktif Dibawah Postingan
- Dilarang Membuat SPAM
- Dilarang Saling Melecehkan Antar Sesama
- Dilarang Promosi Web/Blog/Obat-Obatan Atau Yang Lain