Pada artikel sebelumnya tentang cara membuat custom menu navigasi, ternyata saya melewatkan sebuah panduan yaitu bagaimana kalau menu-nya bersusun alias ada sub menu. Mengingat ruang navigasi yang ada cuma cukup untuk 1 baris menu saja, maka kita perlu mengakalinya dengan membuat drop down.
Bagaimanakah caranya?
Mudah saja kok. Kita cuma perlu main-main sedikit dengan CSS-nya. Dan inilah kode CSS yang harus anda masukkan di file style.css
#menu {
display: block;
float: left;
width: 100%;
}
#menu .menu-header,
div.menu {
width: 100%;
}
#menu .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#menu .menu-header li,
div.menu li {
float: left;
position: relative;
}
#menu a {
color: #aaa;
display: block;
line-height: 25px;
padding: 0 10px;
text-decoration: none;
}
#menu ul ul {
display: none;
position: absolute;
top: 25px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#menu ul ul li {
min-width: 180px;
}
#menu ul ul ul {
left: 30px;
top: 35px;
}
#menu ul ul a {
background: #000000;
line-height: 1em;
padding: 10px;
width: 180px;
height: auto;
}
#menu li:hover > a,
#menu ul ul :hover > a {
background: #000000;
color: #fff;
}
#menu ul li:hover > ul {
display: block;
}
Anda bisa meletakkannya di baris paling bawah. Dan sekarang cobalah membuat menu bersusun di menu Appearance – Menus.
Untuk membuat bersusun, geser sub menunya agak menjorok, nanti akan muncul box pembantunya sehingga bisa anda letakkan dengan mudah.
36 replies on “Membuat Drop Down Menu”
wah, ternyata artikel ini keluar juga, makasi ya mas, keren keren
Keren.
Untuk theme seperti ini bisa juga dong mas? kenapa tak membuatnya??
Theme seperti apa? Theme yang diajarin disini? Emang itu untuk theme yang diajarin disini kok 🙂 Kalau Twentyten, tidak perlu lagi, karena sudah bisa dropdown-nya
Mas Admin, cara menampilkan form search di menu gimana ya? serta merubah tampilan tombolnya gimana ya?
thanks b4
Bos terimakasih. dropdown menunya mau saya coba. kalau ada yg baru info lagi ya ……thanks
Terima kasih untuk artikelnya mas, samai di sini aku bisa ikutiin cuma ada sedikit kendala dalam percobaannya, ko tampilan menunya malah berantakan yah.. mohon kasih penerangan dong mas..
Sebelumnay terima kasih untuk artikel tanggapannya.
Oh iya lupa ini hasil pelajaran yang saya ikuti di artikel yang mas buat.
http://hatomi.web.id/nitnit/
Sepertinya anda melewatkan bagian pelajaran yang ini:
http://wordpress.or.id/buat-theme-wordpress-blog-header.html
Terima kasih banyak untuk jawabannya, sekarang sudah ada kemajuan menunya sudah bisa tampil berjejer. tapi kalo ada sub menunya tetep ga jadi drop down mas. malah dia mucul terus namun posisinya dibawah menu induk seperi sekarang ini http://hatomi.web.id/nitnit. mohon maaf bagi yang lain kalo yang baca komentar ini kurang berkenan tapi mau gimana saya belum bisa. kan saya juga ga mau ketinggalan pelajarannya 🙂
Iya, yang CSS yang di pelajaran header memang sudah anda pasang, tapi yang di drop down justru anda hilangkan. Gimana sih? mau ngelawak ya? 😀
Terima kasih banyak untuk tanggapannya mas,
bukan mau ngelucu mas tapi karena dari kemaren saya utak atik lom berhasil jadinya saya coba-coba deh hdan hasilnya seperti itu yang terlihat buat mas admin seperti mau ngelucu. maaf mas admin tanya lagi yang pelajaran header cssnya udah saya pasang. terus untuk yang drop doown ini tinggal kita pasang di bawah pelajaran header apa yang pelajaran header di gantikan css yang ddrop down ini.
maaf juga kalo merepotkan mas admin ini.
Iya bener.
Dicoba lagi mas admin, terima kasih banyak mas admin nih. dah sabar dlm ngasih pelajarannya pada pembaca seperti saya ini 🙂
Terima kasih atas petunjuknya gan sudah saya coba dan sukses. Yang menjadi pertanyaan saya berarti di file CSS ada dua #header setelah tambahan kode di atas, apakah #header yang sebelumnya dihapus saja biar tidak double.
isinya beda kalau ndak salah. Jadi jangan dihapus 🙂
thank sob tas imponya..lamsung praktekin kebetulan sih newbie banget nich
coba di terapkan lagi…
Mas, setelah saya bikin dropdown menu kok tampilan theme saya jadi acak-acakan ya?
mas menu saya kok jadi hilang ya gara2 style dropdown ini apa benar step saya
#menu {
margin-top:10px;
padding:0;
background:#000;
height:30px;
}
#menu ul {
margin: 0;
padding: 5px 0 0 15px;
list-style: none;
display: block;
}
#menu li , #menu li a{
float: left;
position: relative;
margin-right:10px;
color:#ffffff;
text-decoration: none;
}
diganti dengan ini ya
#menu {
display: block;
float: left;
width: 100%;
}
#menu .menu-header,
div.menu {
width: 100%;
}
#menu .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#menu .menu-header li,
div.menu li {
float: left;
position: relative;
}
#menu a {
color: #aaa;
display: block;
line-height: 25px;
padding: 0 10px;
text-decoration: none;
}
#menu ul ul {
display: none;
position: absolute;
top: 25px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#menu ul ul li {
min-width: 180px;
}
#menu ul ul ul {
left: 30px;
top: 35px;
}
#menu ul ul a {
background: #000000;
line-height: 1em;
padding: 10px;
width: 180px;
height: auto;
}
#menu li:hover > a,
#menu ul ul :hover > a {
background: #000000;
color: #fff;
}
#menu ul li:hover > ul {
display: block;
}
Klo itu bukan diganti om tapi ditambahkan, makanya jadi hilang menu-menunya.
Great! Dapet juga step by Step bikin theme dw. Bikin Drop Down ini yang sedang ditunggu-tunggu.
kalo tema ComFy Magazine bisa ga mas.?
aduh.. udah ngikutin dari awal, disini yang ga sukses. gimana ya??
kok tahap yang ini saya gak berhasil ya..??
mas mo nanya ko setelah
di tambahin menu di atas ke css nya menu
daftar menu nya jadi ilang ..
ni style css say amas maksih sbelum nya..
/*
Theme Name: themefosil
Theme URI: http://wordpress.or.id/
Description: Theme Pertama yang Gue Buat untuk Bangsa Indonesia Tercinta
Author: Irfan Fadhillah
Author URI: http://lutviavandi.com/
Version: 1.0
*/
body {
background:url(images/kayy.jpg);
background-repeat:inherit;
}
.body { margin:0px; }
#wrap {
width:1000px;
height:auto;
}
#header {
background:url(images/theme_01.png);
width:1000px;
height:180px;
margin-top:-30px;
}
#isi {
background:url(images/theme_02.png);
width:697px;
height:auto;
float:left;
}
#conten {
background:url(images/theme_03.png);
width:303px;
height:auto;
float:left;
}
#footer {
background:url(images/theme_04.png);
height:85px;
width:1000px;
float:left;
}
#wrap_conten {
width:292x;
height:auto;
float:inherit;
}
#header_coneten {
background:url(images/conten_01.png);
width:290px;
height:97px;
float:left;
}
#isi_conten {
background:url(images/conten_02.png);
height:auto;
width:290px;
float:left;
}
#footer_conten {
background:url(images/conten_03.png);
width:290px;
height:69px;
float:left;
}
.post-text { background: url(‘images/judul_post.png’) no-repeat;
}
.blogtitle {
font-size:30px;
padding:30px 0 0 30px;
margin:0;
}
.description {
font-size:14px;
padding-left: 30px;
margin:0;
}
#menu {
display: block;
float: left;
width: 100%;
}
#menu .menu-header,
div.menu {
width: 100%;
}
#menu .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#menu .menu-header li,
div.menu li {
float: left;
position: relative;
}
#menu a {
color: #aaa;
display: block;
line-height: 25px;
padding: 0 10px;
text-decoration: none;
}
#menu ul ul {
display: none;
position: absolute;
top: 25px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#menu ul ul li {
min-width: 180px;
}
#menu ul ul ul {
left: 30px;
top: 35px;
}
#menu ul ul a {
background: #000000;
line-height: 1em;
padding: 10px;
width: 180px;
height: auto;
}
#menu li:hover > a,
#menu ul ul :hover > a {
background: #000000;
color: #fff;
}
#menu ul li:hover > ul {
display: block;
}
#postmeta {
font-size:10px;
background:#FFFF66;
padding:10px;
}
#slidearea{
height: 170px;
overflow: hidden;
margin:10px 0px 0px 0px;
padding:10px;
position: relative;
width:560px;
border:solid 1px #cccccc;
background: #ededed;
}
#gallerycover{
overflow: hidden;
margin:0px 20px 0px 0px;
}
.mygallery{
overflow: hidden;
position:relative;
}
.mytext img{
float:left;
}
.mytext{
position:relative;
margin:0px 5px 0px 5px;
height: 240px;
display:inline;
float:left;
color:#c4c4c4;
}
.mytext h2 {
padding:0px;
margin:0px;
font-size: 18px ;
font-weight:bold;
font-style:italic;
}
.mytext h2 a:link,.mytext h2 a:visited{
color:#006b97;
text-decoration:none;
}
.mytext p{
padding:0px 0px;
color:#555;
font-size: 14px ;
line-height:20px;
font-style:italic;
text-shadow:1px 1px 0px #f6f6f6;
}
.nextb {
float:rightright:
}
.prevb {
float:left;
}
#post_h { background:url(images/post_01.png) ;
width:650px;
height:67px;
float:left;
}
#post { background:url(images/post_02.png);
width:650px;
height:auto;
float:left;
}
#postt { background:url(images/post_03.png) ;
width:650px;
height:auto;
float:left;
}
#post_f { background:url(images/post_04.png) ;
width:650px;
height:79px;
float:left;
}
.text_j {
text-decoration:none;
color:#000000;
font-size:40px;
}
#read {
background:url(images/readmore.png);
width:106px;
height:40px;
float:right;
}
.text {text-decoration:none; }
.list {list-style:url(images/list.png); }
mas mu nanya nihh …
knpa ya mas pas sya copas code css di atas ko mnu malah jadi gak tampill ya…??
minta pencerahan nya dong mas … pliiss…,
sangat bgus tpi Lbih bgus Lgi jika bsrta Gmbar tutoonya,./././//// agar Lbih Lngkap
makasih infonya mas, sangat bermanfaat bagi pemula seperti saya
thanks mas infonya sangat bermanfaat, oiya gan saya mau tanya kalo cara ngilangin “You may use these HTML tags and attributes” di bawah kotak komentar gimana gan???
ane cari cara-caranya belum ketemu sampe saat ini, akhirnya gw hapus aja kotak komennya.. -)
I just want to say I am just new to weblog and actually loved this web page. Likely I’m going to bookmark your site . You surely come with really good well written articles. Bless you for sharing with us your web site.
Pretty section of content. I just stumbled upon your web site and in accession capital to assert that I get in fact enjoyed account your blog posts. Anyway I will be subscribing to your feeds and even I achievement you access consistently fast.
You want to balance out advertising up-dates with level of quality transmit so that you can to sustain your “enthusiast”
Wow, amazing! thanks so a large amount for the effort in reorganization this.
I am really impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it’s rare to see a nice blog like this one nowadays..
You ought to take part in a contest for one of the best websites online. I most certainly will highly recommend this blog!
hello there and thank you for your information – I’ve certainly picked up anything new from right here. I did however expertise several technical points using this site, since I experienced to reload the website lots of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I’m complaining, but slow loading instances times will very frequently affect your placement in google and could damage your high-quality score if advertising and marketing with Adwords. Anyway I am adding this RSS to my e-mail and could look out for much more of your respective intriguing content. Ensure that you update this again very soon..