Mau seperti ini?
Click aja disini---> Menuju Blog Tutorials

Membuat menu Tab horizontal

Membuat Menu Horizontal dengan Sub Menu Vertikal
Thursday, April 29, 2010
Membuat Menu Horizontal dengan Sub Menu Vertikal
Hmm... akhirnya selesai juga neh pesanan bung bayu lebond dengan alamat di http://bayulebond.blogspot.com/ atas permintaan postingan cara membuat menu horizontal dengan sub menu vertikal-nya, Maaf ya bung baru aku post hari ini artikelnya ! saya ucapkan semoga bisa anda pergunakan tutorial ini. Bagi yang belum tahu gambarannya seperti apa maksud menu horizontal ini berikut dibawah ini screenshot-nya, apabila ingin memperbesar gambarnya klik pada gambar tersebut ya !


untuk langkah-langkah membuat menu horizontal with drop down perhatikan berikut dibawah ini :
Masuk ke dashboard ► LAYOUT ► EDIT HTML ► centang Expand Widget Templates dan temukan bagian kode berikut (tekan ctrl+F) : ]]> kemudian simpan kode berikut diatas kode]]>

.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #F2F2F2;
width: 100%;
background: #151515
repeat-x;
padding: 4px 0;
margin: 0;
text-align: left;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #F2F2F2;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #F2F2F2;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: #DF0101
repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #6E6E6E;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #151515;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #848484;
}


Simpan kode berikut dibawah kode ]]>




Simpan kode berikut diatas kode

atau dibawah kode




Langkah terakhir lakukan dengan menelan tombol save template. Terima kasih atas atas perhatiannya dan semoga trik membuat menu horizontal ini bermanfaat dan jika ingin memasang menu horizontal dengan drop down

sumber : http://www.mastergomaster.com/2010/04/membuat-menu-horizontal-dengan-sub-menu.html

Bookmark and Share

 
SMP NEGERI 2 KWADUNGAN | Template Ireng Manis © 2010 Free Template Ajah. Distribution by Dhe Template. Supported by Cash Money Today and Forex Broker Info