Loading...

Cara Membuat CSS3 Drop Down Menu

ajatshare 14:07 34 Comments

Cara Membuat CSS3 Drop Down Menu

Posting kali ini saya coba menjawab komentar dari saudari @Tati Rachmawati tentang bagaimana membuat Menu Drop Down Dan saya coba share menu tersebut dengan menggunakan kode css lalu bagaimana Cara Membuat CSS3 Menu Drop Down. Menu ini murni menggunakan CSS dan HTML, mengapa saya tidak menggunakan script seperti jquery tetapi dengan CSS dan HTML. Karena struktur CSS dan bagian HTML tidak mempengaruhi waktu buka blog Anda.

Ikutilah cara-cara nya di bawah ini:

Pergi ke dashboard blogger Anda
Klik pada "Design"> "Edit HTML"> back up template Anda
Gunakan ctrl F untuk menemukan ]]></b:skin> dan paste kode berikut di atasnya
/* CSS3 Drop Down Menu by Ajatshare*/
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
overflow: hidden;
width: 100%;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 10px 20px;
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
.nav ul li ul {
position: absolute;
left: 0;
display: none;
visibility: hidden;
}
.nav ul li ul li {
display: list-item;
float: none;
}
.nav ul li ul li ul {
top: 0;
}
.nav ul li ul li a {
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
#nav li li ul {
margin: -1px 0 0 160px;
visibility: hidden;
}
#nav li li:hover ul {
visibility: visible;
}
/* CSS3 Drop Down Menu by Ajatshare*/

Klik pada "Elemen halaman"> "Add a Gadget"
Pilih "HTML/JavaScript" dan salin kode di bawah di kotak konten.

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Tutorials</a></li>
    <li><a href="#">Sitemap</a></li>
    <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Sub Page #1</a></li>
      <li><a href="#">Sub Page #2</a></li>
      <li><a href="#">Sub Page #3</a></li>
      <li><a href="#">Sub Page #4</a></li>
      <li><a href="#">Sub Page #5</a></li>
    </ul>
  </li>
  <li><a href="#">Create This</a></li>
  </ul>
</div>

Itu saja, jika Anda membutuhkan bantuan lebih lanjut, jangan ragu untuk bertanya melalui kotak komentar, dan jangan lupa berlangganan untuk posting update terbaru kami dan berbagi ini dengan teman. Terima kasih semoga bermanfaat.

Masukan email Anda untuk Dapatkan Update terbaru dari AjatShare BloggerPrint PDF
Cara Membuat CSS3 Drop Down Menu
Cara Membuat CSS3 Drop Down Menu - written by ajatshare, published at 14:07, categorized as Navigasi . And have 34 comments
Facebook Twitter Google+ Linkedin Technorati Digg DMCA.com

34 comments

Tambah komentar

saya coba ternyata gak cocok ama template saya gan.. gimana solusinya

Biasanya masalah ada pada script Kode HTML di atas, kalau kode html disimpan dalam widget "text/javascript" tidak perlu ada yang dirubah asal betul sesuai intruksi, tapi kalau kode html dipasang di dalam template coba rubah kode html ini <div id="nav"> menjadi <nav id="nav">.......</nav>

Jangan salah meletakan Kode CSS harus diatas ]]></b:skin> atau <style>. Terima kasih selamat mencoba.

Terima kasih sudah berkunjung

untuk membuat menu dropdown pada menu bawaan template yang sudah ada bagimana mas? kususnya template yang sudah valid html 5. sebelumnya saya ucapkan terima kasih untuk jawabannya.

Hapus semua kode css yang berawalan " #nav " pada template bawaan dan ganti dengan kode css diatas, lalu ganti pula kode html <nav id='nav'> ........... <nav> pada template bawaan dengan kode html diatas.
Dan terakhir sesuaikan warna backround menu tsb.

Maaf bukan <nav id='nav'> ........... <nav> tapi <div id='nav'> ........... <div>

oh iya mas..ini yang selama ini q cari....kapan2 saya bertanya kepada mas lewat fb..udah q add tdi

gak bisa mas, susah diterapkan pada tmplate yang sudah ada menu bar'a,,

saya krim aja semua sript html'a blog saya, trus coba mas pasang sbntr .. thnks

Itu yg punya agan menunya sudah menggunakan dropdown css3, malah lebih bagus dan keren. Tapi kalau mau coba silahkan ganti kode menu css agan dengan yg di atas, lalu ganti juga menu navigasi di template agan dengan menu di atas.

(kalau masih tidak bisa silahkan hubungi saya lewat Contact Me)

tapi ini kagak seperti menu bar blog agan ini ya?

Betul gan ini menu dropdown jenis yang berbeda, tapi sama koq menggunakan css3.

setelah saya cari menggunakan ctrl+f kode div id='nav'> ........... <div tidak ada mas? soalnya terlalu banyak menu diblog saya. saya juga sekalian mau tanya mas. kenapa setiap link yang saya cantumkan dimenu selalu ada di list tag judul yang hilang pada webmaster, bagaimana ya mas cara mengatasinya?

Coba ganti menu bawaan dari template Mas Ihsan kurang lebih seperti ini:
<nav id='nav'>
<ul>
<li><a href='/' target='blank'><strong>Beranda</strong></a></li>
<li><a href='http://tipsdantrikampuh.blogspot.com/search/label/Tips%20dan%20Trik%20Gokil' rel='nofollow' target='blank'><strong>Tips Gokil</strong></a></li>
<li><a href='http://tipsdantrikampuh.blogspot.com/search/label/Tips%20Pacaran' rel='nofollow' target='blank'><strong>Pacaran</strong></a></li>
<li><a href='http://tipsdantrikampuh.blogspot.com/search/label/Keluarga' rel='nofollow' target='blank'><strong>Keluarga</strong></a></li>
<li><a href='http://tipsdantrikampuh.blogspot.com/search/label/Tips%20Kecantikan' rel='nofollow' target='blank'><strong>Kecantikan</strong></a></li>
<li><a href='http://tipsdantrikampuh.blogspot.com/search/label/Tips%20Kesehatan' rel='nofollow' target='blank'><strong>Kesehatan</strong></a></li>
<li><a href='http://tipsdantrikampuh.blogspot.com/search/label/Karir' rel='nofollow' target='blank'><strong>Karir</strong></a></li>
<li><a href='http://tipsdantrikampuh.blogspot.com/search/label/Kuliner' rel='nofollow' target='_blank'><strong>kuliner</strong></a></li>
<li><a href='http://tipsdantrikampuh.blogspot.com/search/label/Tahukah%20Kamu' rel='nofollow' target=' blank'><strong>Tahukah kamu?</strong></a></li>
</ul>
</nav>

dengan menu di atas seperti yang dicontohkan:
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Sub Page #1</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<li><a href="#">Create This</a></li>
</ul>
</div>

Biasanya berhasil, dicoba aja dulu.
Maksudnya link pada bagian webmaster yg mana yach...? saya kurang mengerti...!

Thanks banget nih gan ane nyoba cari-cari buat koleksi

Jadi barang antik nih pake dikoleksi segala...!

ok sob terima kasih...!

Tutorial yang bagus,kalau saya lebih suka saya tambahkan di html javascript widget blogger saya gan,soalnya lebih mudah tidak pakai ribet....

tutor diatas juga menyarankan seperti itu...!

numpang nyimak, saja dulu..
masih baru,,

aneasystep.blogspot.com

Silahkan sob disimak aja...

KODE ]]>
Tidak Ada gan !!!
G mana solusinya

Siap di terapkan di http://naufalqih.blogspot.com

Akan saya coba di http://cuyexsputra.blogspot.com/

This comment has been removed by a blog administrator.

trims mas sangat bermanfaat.
saya mau bertanya tentang drop down di tampilan muka bagus gimana caranya?

terimakasih sob buat tutorialnya.. sangat mantab..

http://obattraditional.com/obat-tradisional-insomnia/

This comment has been removed by a blog administrator.
This comment has been removed by a blog administrator.

Thanks Infonya (Y) ijin praktek
http://goo.gl/HdBHSy

Terimakasih gan, :)

  • Berkomentarlah dengan baik, sopan dan sesuai dengan isi konten serta tidak [SPAM].
  • Untuk menyisipkan kode dalam komentar harap di [Konversi] terlebih dahulu.
  • Jika ingin bertanya di luar judul artikel "Cara Membuat CSS3 Drop Down Menu". Harap menggunakan tombol [OOT].

Forum DiskusiOut Off Topic (OOT)Formulir KontakArsip Blog
-->