Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Membuat Menu Dropdown Dengan CSS3

Pada kesempatan kali ini, Blog & Note of Nurul Imam akan membahas tentang Bagaimana Cara Membuat Menu Dropdown Dengan CSS3. Menu ini berupa daftar link yang mana jika kita sorot menu tersebut akan menampilkan menu lagi dibawahnya. Untuk lebih jelasnya, silahkan lihat Demo Dropdown Menu CSS3 dibawah ini.

Demo Menu Dropdown CSS3

Untuk pembuatan menu tersebut, silahkan siapkan editor favorite anda & ketikkan beberapa kode HTML & CSS3 dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Demo Menu Dropdown CSS3</title>
<style type="text/css">
body {
 background: #eee;
   font-size: 0.8em;
}
.utama {
  width: 50%;
 margin: 50px 25%;
}
.bersih  {
    clear: both;
}
h1, p {
    text-align: justify;
}
a, a:hover, a:link, a:active {
 color: #000;
    display: block;
 text-decoration: none;
}

.menu {
  width: 100%;
    margin: 0;
  padding: 0;
 list-style: none;
   background: #333;
   background: -moz-linear-gradient(#444, #333);
   background: linear-gradient(#444, #333);
    border-radius: 10px;
    box-shadow: 0 2px 1px #9c9c9c;
  transition: 1s ease-in-out;
 -moz-transition: 1s ease-in-out;
}
.menu li {
 float: left;
    padding: 0;
 position: relative;
}
.menu a {
   float: left;
    padding: 10px 20px 7px 20px;
    color: #999;
    text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 #000;
}
.menu li:hover > a {
  color: #eee;
}
.menu li:hover > ul {
   display: block;
}
.menu:after {
   visibility: hidden;
 display: block;
 font-size: 0;
   content: " ";
 clear: both;
    height: 0;
}


.menu ul {
   list-style: none;
   margin: 0;
  padding: 0;
 display: none;
  position: absolute;
 top: 35px;
  left: 0;
    z-index: 9999;
  background: #333;
   background: -moz-linear-gradient(#444, #333);
   background: linear-gradient(#444, #333);
    border-radius: 10px;
    box-shadow: 0 2px 1px #9c9c9c;
}
.menu ul li {
    float: none;
    margin: 0;
  padding: 0;
 display: block;
 box-shadow: 0 1px 0 #111, 0 2px 0 #777;
}
.menu ul a {
    padding: 10px;
  height: auto;
   display: block;
 white-space: nowrap;
    float: none;
    text-transform: none;
}



.menu ul a:hover {
    background: #0186ba;
    background: -moz-linear-gradient(#04acec, #0186ba);
 background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child a {
  border-radius: 5px 5px 0 0;
}
.menu ul li:first-child a:after {
   content: " ";
 position: absolute;
 left: 30px;
 top: -8px;
  width: 0;
   height: 0;
  border-left: 5px solid transparent;
 border-right: 5px solid transparent;
    border-bottom: 8px solid #333;
}
.menu ul li:first-child a:hover:after {
  border-bottom-color: #04acec;
}
.menu ul li:last-child {
  box-shadow: none;
}
.menu ul li:last-child a {
    border-radius: 0 0 5px 5px;
}
</style>
</head>
<body>
<article class="utama">
<h1>Dropdown Menu Animation Effect CSS3</h1>
<ul class="menu">
 <li><a href="#">Dashboard</a></li>
    <li><a href="#">Services</a>
        <ul>
  <li><a href="#">Web Development</a></li>
  <li><a href="#">Web Consulting</a></li>
   <li><a href="#">Desktop Programming</a></li>
      </ul> 
    </li>
 <li><a href="#">Profile</a></li>
  <li><a href="#">Account</a></li>
  <li><a href="#">Logout</a></li>
</ul>
<section class="bersih">&nbsp;</section>
<p><a href="http://www.nurulimam.com/2013/12/membuat-menu-dropdown-dengan-css3.html">Kembali ke Tutorial</a></p>
</article>
</body>
</html>

Setelah semuanya diketik, silahkan simpan dengan nama menu-dropdown.html lalu jalankan di web browser anda. Anda juga dapat menambahkan menu ini ke dalam blog anda baik Blogger maupun WordPress dengan menambahkan HTML & CSS secara terpisah.

28 Comments

  1. RirinReply

    Bagus juga menu drop down nya. Tapi kok lebar nya kecil baget mas. Padahal blog saya lebar nya panjang ehehehe :D

    • Nurul ImamReply

      Itu sebenernya menyesuaikan lebar ukuran layout websitenya karena di set width:100%;
      Karena layout dalam demo yang saya bikin cuma 700px-an jadi menunya ngikut 700px gitu lho mbak.
      Klo diterapin di layout tampilan blog ini maka tampilannya penuh :D

      • tianReply

        mas boleh donk belajar dan tnya”

        • Nurul ImamReply

          Silahkan :)

    • Pablo JhonReply

      Ririn:
      Sesuai ukuran menu dropdown nya dong…klw mau d panjangin lagi boleh tu………..heheheheheh

  2. caramadiaReply

    kalau mau ganti warna bagaimana gan ? soalnya saya lihat hitam semua

    • Nurul ImamReply

      Ganti kode warnanya aja :)

  3. ZalukhuReply

    Terimakasih sebelumnya atas artikel.

    Masa saya mencoba mengembangkan meu ini dalam sub-sub menunya.
    Bagaimana agar dalam di sub menunya itu arahnya ke sebelah kanan sampaing dari menunya sendir? atas bantuannya saya ucapkan terimakasih..

    • Nurul ImamReply

      Tinggal disesuaikan saja mas positionnya :)

  4. ZalukhuReply

    Terimakasih sebelumnya atas artikelnya, cukup membantu bagi kami yang baru belajar.

    Mas, saya mencoba mengembangkan menu ini dalam sub-sub menunya.
    Bagaimana agar dalam di sub menunya itu arahnya ke sebelah kanan disamping dari menunya sendiri? saya mencoba tapi arah letak menuju ke bawah jadi jelek banget. atas bantuannya saya ucapkan terimakasih..

    • Nurul ImamReply

      Iya sama-sama

  5. Soni solehudinReply

    Gmn cara mengganti menu di web saya yg sudah ada menu css nya…?

    • Nurul ImamReply

      Hapus dulu rangka html dan css menunya, lalu ganti dengan menu ini

  6. hendriyantoReply

    Saya mau menanyakan tentang sub menu d website..
    Bagai mana sih bikin sub menu dengan css ny terpisah…?
    Terimakasih..

    • Nurul ImamReply

      Terpisah bagaimana ?
      bisa dengan manipulasi css ul ul li :)

  7. ahmadReply

    sebelumnya terima kasih atas menunya ya ka. aku mau nanya cara manjangin menu nya gimana ya??soalnya pendek banget jadi menu yang lain ngga muat.

    • Nurul ImamReply

      set width jadi berapapun sesuai keinginan :)

  8. agF | Blog Trik dan Reply

    Keren gan..

    • Nurul ImamReply

      Keren juga :D

  9. nhReply

    mas,,, gimana pasang dropdown di tema yg dari downloadan…
    trus bedain html dgn css gmn? hehehe

    blogger newbie

  10. Syakir RahmanReply

    Keren mas, saya juga punya versi saya sendiri, ngelengkapin aja ini mah heheh

  11. Khoiril AnwarReply

    Wah itu mah bukan ngajarin namanya. gak ada keterangannya sama sekali…

  12. rzlfotocopyReply

    kalau mau buat ke kanan hover nya sama juga ya mas ??

  13. JakaReply

    gan, kalau mau bikin select menu animate pas di klik giman gan?

  14. Danang SetiawanReply

    Mas Nurul Imam, saya minta tolong untuk dibenerin website ini http://www.sscjogja.com/class-1/#
    Permasalahannya :
    1. Waktu di buka muncul tulisan : Situs yang akan dibuka berisi perangkat lunak perusak
    2. Saya tidak bisa membuat sub menu muncul setelah diklik. Harus di klik panjer jika pengen sub menunya muncul. Silahkan mas imam buka klik semester 1.
    Berikut ini kode HTML dan kode CSSnya. Tolong koreksi html dan cssnya ya mas.
    3. Mas, gimana memasang javascript di wordpress, soalnya saya bingung banget mas.
    Kalo bisa, hayuk mas kita team vieweran.
    Mas tolong bantuannya ya mas, terima kasih sebelumnya.
    Sebagai balasannya, saya akan memasang link website mas di http://www.sscjogja.com
    Saya tunggu secepatnya ya mas di email sssjogja@yahoo.co.id
    Sebelumnya terimakasih.

    body {
    background: #eee;
    font-size: 0.8em;
    }
    .utama {
    width: 50%;
    margin: 50px 25%;
    }
    .bersih {
    clear: both;
    }
    h1, p {
    text-align: justify;
    }
    a, a:hover, a:link, a:active {
    color: #000;
    display: block;
    text-decoration: none;
    }

    .menu {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #333;
    background: -moz-linear-gradient(#444, #333);
    background: linear-gradient(#444, #333);
    border-radius: 10px;
    box-shadow: 0 2px 1px #9c9c9c;
    transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    }
    .menu li {
    float: left;
    padding: 0;
    position: relative;
    }
    .menu a {
    float: left;
    padding: 10px 20px 7px 20px;
    color: #999;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    }
    .menu li:hover > a {
    color: #eee;
    }
    .menu li:hover > ul {
    display: block;
    }
    .menu:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
    }

    .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 9999;
    background: #333;
    background: -moz-linear-gradient(#444, #333);
    background: linear-gradient(#444, #333);
    border-radius: 10px;
    box-shadow: 0 2px 1px #9c9c9c;
    }
    .menu ul li {
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    box-shadow: 0 1px 0 #111, 0 2px 0 #777;
    }
    .menu ul a {
    padding: 10px;
    height: auto;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }

    .menu ul a:hover {
    background: #0186ba;
    background: -moz-linear-gradient(#04acec, #0186ba);
    background: linear-gradient(#04acec, #0186ba);
    }
    .menu ul li:first-child a {
    border-radius: 5px 5px 0 0;
    }
    .menu ul li:first-child a:after {
    content: ” “;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #333;
    }
    .menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
    }
    .menu ul li:last-child {
    box-shadow: none;
    }
    .menu ul li:last-child a {
    border-radius: 0 0 5px 5px;
    }

    Kode CSS :
    .menu {
    margin-right: 5px;
    margin-left: 5px;
    padding: 0;
    width: 575px;
    }

    .menu li { list-style: none; }
    .menu li a {
    display: table;
    margin-top: 1px;
    padding: 14px 10px;
    width: 100%;
    background: #337D88;
    text-decoration: none;
    text-align: left;
    vertical-align: middle;
    color: #fff;
    overflow: hidden;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
    }

    .menu > li:first-child a { margin-top: 0; }

    .menu li a:hover {
    background: #4AADBB;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    }

    .menu li ul {
    margin: 0;
    padding: 0;
    }

    .menu li li a {
    display: block;
    margin-top: 0;
    padding: 0 10px;
    height: 0;
    background: #C6DDD9;
    color: #1F3D39;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    }

    .menu > li:active li a {
    display: table;
    margin-top: 1px;
    padding: 10px;
    width: 100%;
    height: 1em;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    }

    .menu > li:active li a:active {
    background: #A4CAC8;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    }

  15. Danang SetiawanReply

    Maaf mas, ini kode HTML nya.

    Semester 1

    Matematika
    Bahasa Indonesia

    Semester 2

    Matematika
    Bahasa Indonesia
    Bahasa Inggris

    Dan ini kode CSSnya :
    .menu {
    margin-right: 5px;
    margin-left: 5px;
    padding: 0;
    width: 575px;
    }

    .menu li { list-style: none; }
    .menu li a {
    display: table;
    margin-top: 1px;
    padding: 14px 10px;
    width: 100%;
    background: #337D88;
    text-decoration: none;
    text-align: left;
    vertical-align: middle;
    color: #fff;
    overflow: hidden;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
    }

    .menu > li:first-child a { margin-top: 0; }

    .menu li a:hover {
    background: #4AADBB;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    }

    .menu li ul {
    margin: 0;
    padding: 0;
    }

    .menu li li a {
    display: block;
    margin-top: 0;
    padding: 0 10px;
    height: 0;
    background: #C6DDD9;
    color: #1F3D39;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    }

    .menu > li:active li a {
    display: table;
    margin-top: 1px;
    padding: 10px;
    width: 100%;
    height: 1em;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    }

    .menu > li:active li a:active {
    background: #A4CAC8;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    }

  16. agiReply

    gimana kalo isi dropdownnya gambar?? jawab ya gan

  17. Pengobatan TradisionReply

    makasih banyak mass buat infonya,, nice post

    http://toko661.com/pengobatan-tradisional-abses-anus/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>