Cara Membuat Menu Dropdown CSS3 Di Blog

Cara Mudah Membuat Menu Dropdown CSS3 Di Blog

Tutorial Terbaru Bagaimana Cara Membuat Menu Dropdown CSS3 Di Blog

Cara Membuat Menu Dropdown CSS3 Di Blog
Cara Membuat Menu Dropdown CSS3 Di Blog
Hallo Sobat CMWP (Cara Membuat Website Pemula)!!! Kali ini saya akan mencoba membuat sebuah artikel yang sangat sederhana tentang Cara Membuat Menu Dropdown CSS3 Di Blog

Cara Membuat Menu Dropdown CSS3  ini sebenarnya agak sedikit sangat rumit untuk temen-temen blogger yang masih berstatus pemula (seperti saya juga...hehe...) karena ini banyak berhubungan dengan pengkodean.
Menurut pengalaman saya alangkah lebih baiknya untuk belajar dulu tentang cara membuat menu dropdown dari dasar dulu Cara Membuat Menu Dropdown di Blog . Biar nanti akan lebih mudah untuk memahami dalam menerapkan kode-kode HTML nya.

Oiya silahkan di lihat dulu tampilan yang akan di buat tentang
Cara Membuat Menu Dropdown CSS3 Di Blog ini, silahkan di klik  saja gambar "Demo Here" yang ada di bawah ini:

http://tutorialblogdd.blogspot.com/

Bagaimana Sobat CMWP menarik kan? coba perhatikan di sana ada menu : Beranda, Top Artikel, Kategori, Panduan Website Pemula,dan Tentang Saya.
Nah bila mouse di arahkan pada menu-menu tersebut maka akan keluar berbagai macam bentuk menu dropdown nya.

Disana memuat paragraf dan bisa dibagi ke dalam maksimal 5 kolom. Jadi nanti setiap kotak yang muncul bisa di atur agar mempunyai 1-5 kolom. Dan di dalam kolom-kolom itu bisa diisi apa saja, baik itu gambar, teks, ataupun link.

Sekarang mari kita menuju langkah-langkah cara pembuatan Menu Dropdown CSS3 Di Blog nya. langkah pertama :

Memasang Kode CSS3 di Template Blog
  • Silahkan login ke blog dengan ID anda.
  • Pilih Menu "Template" lalu Klik "Sesuaikan".
  • Setelah itu akan terbuka laman baru, silahkan pilih menu"Tingkat Lanjut".
  • Kemudian coba scroll ke bawah, lalu pilih "Tambahkan CSS". 
  • Dan silahkan di Copas kode CSS di bawah, lalu masukan di kotak kosong untuk menaruh kode CSS di bawah ini :
body, ul, li {
/* ubah nilai font size untuk merubah ukuran huruf di dalam menu */
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    text-align:left;
}

/* Perintah Untuk Mencegah Drop Down Menu Tertindih Konten */
#iefix {
position:relative;
z-index:1000;
}

#menu {
    list-style:none;
/* Ubah nilai width sesuaikan dengan lebar kolom yang anda gunakan */
    width:920px;
    margin:0px;
                     height:43px;
    /* mengatur margin kiri agar tepat di batas kiri */
                     margin-left:-15px;
    /* ubah nilai radius untuk membuat sudut bar yang tumpul */
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    background: #014464;
/* ubah nilai kode hex warna untuk mengubah gradiasi warna bar */
    background: -moz-linear-gradient(top, #C47112, #F5A74F);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C47112), to(#F5A74F));
   
/* ubah warna border dari bar */
    border: 1px solid #002232;

    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
    float:left;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;
   
    /* ubah nilai hex untuk mengubah warna gradiasi pada box nama drop down menu */
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
   
    /* Ubah nilai radius untuk mengatur ketumpulan sudut kotak nama menu drop down */
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
    padding-right:21px;
    background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("img/drop.png") no-repeat right 7px;
}


.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em;
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;
   
    /* ubah nilai hex untuk mengubah nilai gradiasi */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

    /* atur ketumpulan sudut kotak isi item drop down */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}
/* atur lebar dari kotak item*/
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}

/* Pengaturan kolom */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
/* atur lebar dari kolom yang dimasukkan dalam kotak item */
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Pengaturan Menu Sisi Kanan */

#menu .menu_right {
    float:right;
    margin-right:0px;
}
#menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}

/* Membuat Pengaturan isi dari konten drop down menu */

#menu p, #menu h2, #menu h3, #menu ul li {
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
}

#menu h4 {
    font-size:20px;
    font-family: Impact;
    color: #E36A24;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
}
#menu p {
    line-height:18px;
    margin:0 0 10px 0;
    font-size:11px;
}

#menu li:hover div a {
    font-size:12px;
    color:#015b86;
}
#menu li:hover div a:hover {
    color:#029feb;
}
.strong {
    font-weight:bold;
}
.italic {
    font-style:italic;
}
.imgshadow {
    background:#FFFFFF;
    padding:4px;
    border:1px solid #777777;
    margin-top:5px;
    -moz-box-shadow:0px 0px 5px #666666;
    -webkit-box-shadow:0px 0px 5px #666666;
    box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
    width:auto;
    float:left;
    margin:5px 15px 5px 5px;
}
#menu li .black_box {
    background-color:#333333;
    color: #eeeeee;
    text-shadow: 1px 1px 1px #000;
    padding:4px 6px 4px 6px;

    /* mengatur sudut tumpul dari kotak hitam */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    /* mengatur bayangan */
    -webkit-box-shadow:inset 0 0 3px #000000;
    -moz-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}
#menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
}
#menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}
#menu li .greybox li {
    background:#F4F4F4;
    border:1px solid #bbbbbb;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width:116px;

    /* mengatur ketumpulan sudut kotak abu-abu */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
    background:#ffffff;
    border:1px solid #aaaaaa;
    padding:4px 6px 4px 6px;
    margin:0px 0px 4px 0px;
}
NOTE : Dari kode di atas, kode yang disorot warna pink harus anda rubah agar sesuai dengan lebar template anda. Sedangkan kode yang di sorot warna biru harus anda rubah juga agar warna menu serasi dengan template anda.
  • Setelah itu silahkan di klik saja "Terapkan Ke Blog" yang terletak di sudut kanan atas . Biar lebih jelasnya lihat gambar di bawah ini :
Cara Membuat Menu Dropdown CSS3 Di Blog
Cara Membuat Menu Dropdown CSS3 Di Blog
Nah... dengan demikian kode CSS sekarang sudah terpasang di blog anda. Dan untuk langkah yang kedua :

Membuat Kode HTML Menu Dropdown yang Akan Di Pasang di Blog

Nah di sinilah tingkat kesulitan yang akan di hadapi untuk membuat kode HTML nya, karena kita di tuntut untuk bisa merangcang bentuk dan gambar seperti apa yang akan di tampilkan pada menu dropdown nya.

Eit... tapi jangan menyerah dulu sebelum kita mencoba mempelajarinya, mari kita pelajari dasar-dasar untuk membuat kode HTML nya. Pada dasarnya kode HTML untuk rancangan sebuah Menu Dropdown adalah seperti berikut :
<ul>
<li><a href="#" title="">Beranda</a></li>
<li><a href="#" title="">Anchor Text Menu 1</a>
      <li><a href="#" title="">Anchor Text Sub Menu 1-1</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 1-2</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 1-3</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 1-4</a></li>
</li>
<li><a href="#" title="">Anchor Text Menu 2</a>
      <li><a href="#" title="">Anchor Text Sub Menu 2-1</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 2-2</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 2-3</a></li>
      <li><a href="#" title="">Anchor Text Sub Menu 2-4</a></li>
</li></ul> 
Akan Tetapi menu dropdown kali ini akan sedikit berbeda alias tidak sama persis seperti di atas. Karena bentuk dasar HTML dari drop down menu dengan paragraf ini kurang lebih seperti di bawah ini :


<ul id="menu">

    <li><a href="#">Item 1</a>

<div>

 Content Menu Drop Down

<div>

</li>

    <li><a href="#">Item 2</a>

<div>

 Content Menu Drop Down

<div>

 </li>

</ul>
Nah Jadi yang perlu sobat CMWP pelajari sebenarnya adalah mengatur elemen div yang akan disisipkan di antara :
<li><a href="URL1">NAMA MENU 1</a>......</li> 
agar tampilan yang keluar nanti persis seperti yang dikehendaki.

Jadi sekarang kita akan mempelajari beberapa hal akan di terapkan pada menu dropdown yang akan kita rancang atau kita ciptakan dengan berbagai Variasi seperti yang terlihat pada "DEMO HERE". Ada 4 hal yang akan di pelajari dari menu-menu dropdown tersebut, diantaranya :
  1. Mengatur Posisi Nama Menu pada Menu bar.
  2. Mengatur Lebar Kotak Drop Down.
  3. Mengatur lebar petak di dalam Kotak.
  4. Memberi Style pada Petak. 
JADI MULAI SEKARANG KITA AKAN BELAJAR MEMBEDAKAN ANTARA NAMA MENU, KOTAK ITEM DAN PETAK.

Untuk lebih jelasnya lihat pada gambar di bawah ini :

Cara Membuat Menu Dropdown CSS3 Di Blog
Cara Membuat Menu Dropdown CSS3 Di Blog
 
Gimana Sobat CMWP, apakah sudah jelas? kalau belum jelas yuk mari kita lanjutkan pembahasannya sampai tuntas...hehe... lanjutkan langkah ketiga:

Mengatur Nama Menu Dropdown Yang Berada Di Sisi Kiri Atau Sisi Kanan Bar 

Coba lihat lagi DEMO nya yang ada di atas dan coba perhatikan, di sana terdapat ada menu yang berada di sisi kiri dan juga ada menu yang berada di sisi kanan, dari kedua fungsinya bisa anda pergunakan ataupun tidak di pergunakan itu terserah anda alias abaikan saja.

Untuk membuat menu yang berada di sisi kiri bar, maka kode yang harus di buat adalah seperti di bawah ini :
<li><a href="#" class="drop">Top Artikel</a> 
Nah bila anda ingin membuat menu yang akan di pasang di bagian kanan, maka kode yang akan di but adalah seperti contoh di bawah ini :
<li class="menu_right"><a href="#" class="drop">Panduan Website Pemula</a>
Bagaimana Sobat CMWP, mudah tidak? mudah-mudahan sampai di sini sobat CMWP sudah bisa memahaminya tentang perbedaan pembuatan kode HTML nya dan tidak menemui masalah, hehe... :.D.
Ayo kita lanjutkan pada langkah yang ke empat :

Mengatur Lebar Dalam Membuat Kotak Dropdown

Setelah anda memahami bagaimana cara mengatur posisi pada bar, maka selanjutnya anda harus bisa juga memahami membuat lebar kotak yang akan dikeluarkan pada saat kursor melintasi NAMA MENU.

Nah Yang mau di bikin bisa di pilih dulu apakah mau membuat yang lebarnya 1 kolom, apa 2 kolom, 3 kolom, 4 kolom atau bahkan mau 5 kolom?  

Contoh di dalam DEMO, menu dropdown nya itu menggunakan 4 kolom, maka kode <div yang harus di gunakan adalah seperti berikut :
<div class="dropdown_4columns">
Kode div dari kolom-kolom
</div>
Dan apabila menu dropdown nya mau menggunakan lebarnya hanya 2 kolom saja, maka kode yang di gunakannya akan seperti ini
<div class="dropdown_2columns">
Kode div dari kolom-kolom
</div>
Bagaimana sobat CMWP apakah sudah bisa di pahami ? mudah-mudahan dengan adanya 2 contok kode di atas sudah bisa di mengerti ya... hehe... :.D 
mari Lanjutkan pada langkah ke lima :

Mengatur Ukuran Pada Lebar Dari Petak Entri

Dalam mengatur lebar, Selain KOTAK yang bisa di atur lebarnya, PETAK entri pun sebenarnya bisa juga di atur ukuran lebarnya loh. 

Coba perhatikan pada contoh gambar di atas, disana ada KOTAK yang ukuran selebar 5 kolom. Di dalam KOTAK itu ada PETAK selebar 1 kolom (PETAK 1, PETAK 2,PETAK 3,PETAK 4, PETAK 5),  Ada juga PETAK yang lebarnya 5 kolom (PETAK 6), Lalu ada juga PETAK yang lebarnya 2 kolom (PETAK 7), Yang terakhir ada PETAK yang lebarnya 3 kolom (PETAK 8).

Nah sekarang bagaimana caranya memasukan 1 PETAK berukuran 2 KOLOM,
dan 2 PETAK berukuran 1 KOLOM ke dalam KOTAK yang ukuranNYA selebar 2 KOLOM? maka kodenya akan nampak seperti di bawah ini :
<div class="dropdown_2columns">
     <div class="col_2">
     ISI DARI PETAK 1....
     </div>
     <div class="col_1">
     ISI DARI PETAK 2....
     </div>
     <div class="col_1">
     ISI DARI PETAK 3....
     </div>
</div>
Nah gimana sobat CMWP sudah bisa di mengerti kan? mudah-mudahan sudah bisa di pahami ya... hehe... :.D 

Kalau sudah bisa di pahami berarti kita bisa membuat menu dropdown sendiri dengan 2 NAMA MENU. Biar lebih jelasnya maka kode nya akan seperti di bawah ini :

<div id="iefix"><ul id="menu">
<li><a href="#" class="drop">NAMA MENU 1</a>
<div class="dropdown_2columns">
     <div class="col_2">
     ISI DARI PETAK 1....
     </div>
     <div class="col_1">
     ISI DARI PETAK 2....
     </div>
     <div class="col_1">
     ISI DARI PETAK 3....
     </div>
</div>
</li>
<li><a href="#" class="drop">NAMA MENU 1</a>

<div class="dropdown_2columns">
     <div class="col_2">
     ISI DARI PETAK 1....
     </div>
     <div class="col_1">
     ISI DARI PETAK 2....

     </div>
     <div class="col_1">
     ISI DARI PETAK 3....
     </div>
</div>
</li>
</ul></div>

Nah sekarang sobat CMWP tinggal memikirkan mau di isi apa saja ke setiap ISI DARI PETAK tersebut. Sobat bisa mengisi TEKS BIASA, atau ARTIKEL BLOG, LINK, ataupun GAMBAR dan POTO. dan langkah yang ke enam :

Memberi Style Pada PETAK Di Dalam Menu Dropdown

Gimana sobat CMWP, masih semangat kan untuk membaca artikelnya sampai tuntas? hehe... :.D. 

Sekarang silahkan di buka lagi "DEMO HERE" di atas, lalu coba buka satu persatu dari tampilan-tampilan menu dropdownnya, perhatikan di sana ada beberapa macam variasi dan gaya yang berbeda dari masing-masing PETAK.

Pada menu PANDUAN WEBSITE PEMULA di sana ada link-link di dalam petak-petak kecil. Nah untuk membuatnya maka kodenya akan seperti ini :
<div class="col_1">
   <ul class="greybox">
                    <li><a href="#">Buat Gmail</a></li>
                    <li><a href="#">Buat Blog</a></li>
                    <li><a href="#">Setting Menu Dasar</a></li>
                    <li><a href="#">Setting Komentar</a></li>
                    <li><a href="#">More...</a></li>
     </ul>   

</div> 
Kemudian pada menu TOP ARTIKEL ada petak warna hitam  dengan tulisan warna putih, cara untuk membut kodenya seperti di bawah ini :
<div class="col_1">                <p class="black_box">ISI DARI PETAK</p></div>
Dan masih di dalam TOP ARTIKEL di sana ada tulisan yang hurufnya tercetak miring alias italic. Untuk membuatnya maka kodenya seperti di bawah ini :
<div class="col_1">                <p class="italic">ISI DARI PETAK</p></div>
Dan yang di sebelahnya ada tulisan yang hurufnya tercetak tebal, maka untuk membuatnya mudah saja, tinggal mengganti kata "italic" dengan kata "strong", maka untuk kodenya akan nampk seperti ini :
<div class="col_1">
                <p class="strong">ISI DARI PETAK</p>
</div

Nah... bagaimana nih sobat CMWP, apakah sudah bisa di pahami artikel yang sangat panjang ini.... tongue       peace sign

Jika sobat CMWP sudah jadi merancang kode-kodenya, maka langkah selanjutnya tinggal menyimpan kode HTML ini ke gadget HTML/JAVASCRIP.

Langkah-langkah untuk menyimpan kode HTML rancangannya adalah :
  • Login ke blog dengan ID anda.
  • Silahkan di pilih menu "Tata Letak"
  • Kemudian di pilih "Tambahkan Gadget".
Cara Membuat Menu Dropdown CSS3 Di Blog
Cara Membuat Menu Dropdown CSS3 Di Blog
  • Lalu di "Pilih HTML/JavaScript"
Cara Membuat Menu Dropdown CSS3 Di Blog
Cara Membuat Menu Dropdown CSS3 Di Blog

  • Masukan Kode HTML/JavaScript di kotak Konten
  • Kemudian klik "Simpan".
Cara Membuat Menu Dropdown CSS3 Di Blog
Cara Membuat Menu Dropdown CSS3 Di Blog
  • Selesai.
Bagi sobat CMWP yang kesulitan membuat kode-kodenya silahkan download saja yang sudah jadi, di bawah ini :
Demikianlah sobat CMWP (Cara Membuat Website Pemula) artikel yang sangat sederhana ini tentang Cara Membuat Menu Dropdown CSS3 Di Blog semoga bermanfaat buat sobat semuanya. Jangan lupa silahkan kumjungi juga Cara Membuat Menu Dropdown Horizontal di Blogl. Terima Kasih telah membaca dan berkunjung di Blog ini. Silahkan tinggalkan jejakmu di komentar blognya.
Support : RWP | BSG | #
Copyright © 2013. Cara Membuat Blog | Website Pemula - All Rights Reserved
Suport by Rahasia Website Pemula Published by Cara Membuat Website Pemula
Proudly powered by Blogger