Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal

Minggu, 27 Maret 2011

Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal

Lagi tutorial blogger sob. tapi apa boleh buat cuma itu yang ada dipikiran saya, kalau mau bantu saya silahkan request.

Srceenshot :

Langkah-langkah Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal :

Masuk ke Dasbor
Rancangan
Edit HTML
Centang Expend Template Widget
Copy Srcipt di bawah ini dan Paste-kan di atas kode ]]></b:skin>

.chromestyle{
width: 90%;
font-weight: regular;
}

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

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

.chromestyle ul li{
display: inline;
}

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

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

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #000000;
border-bottom-width: 0;
font:regular 11px Trebuchet;
line-height:18px;
z-index:100;
background-color: black;
width: 200px;
visibility: hidden;
filter: color=#7CFC00
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #000000;
padding: 5px 0;
text-decoration: none;
text-align: left;
font-weight: regular;
color: Lawngreen;
}

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

Copy Srcipt di bawah ini dan Paste-kan di bawah kode ]]></b:skin>

<script src='http://emoticmastergomaster.googlecode.com/files/chrome.js' type='text/javascript'>
</script>

Copy Srcipt di bawah ini dan Paste-kan di bawah kode <body>

<div class='chromestyle' id='chromemenu'>

<ul>
<li><a href='/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>Menu1</a></li>
<li><a href='#' rel='dropmenu2'>Menu2</a></li>
<li><a href='#' rel='dropmenu3'>Menu3</a></li>
<li><a href='#' rel='dropmenu4'>Menu4</a></li>
<li><a href='#' rel='dropmenu5'>Menu5</a></li>
<li><a href='#' rel='dropmenu6'>Menu6</a></li>
<li><a href='#' rel='dropmenu7'>Menu7</a></li>
<li><a href='#' rel='dropmenu8'>Menu8</a></li>
</ul>
</div>


<div class='dropmenudiv' id='dropmenu1'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>


<div class='dropmenudiv' id='dropmenu2'>
<a href='URL sub menu1'>Sub Menu1</a>
<a href='URL sub menu2'>Sub Menu2</a>
<a href='URL sub menu3'>Sub Menu3</a>
</div>

<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

Tambahan : Jangan lupa untuk mengganti kode yang seharusnya di ganti

Langkah terakhir lakukan adalah menekan tombol save template. Terima kasih atas atas perhatiannya dan semoga tips membuat menu horizontal ini bermanfaat.

.:Selamat mencoba:.

Buat yang ingin copy paste harap baca aturannya di sini
Cara download di bolg OZY-W di sini

Buat sobat blogger yang suka dengan artikel saya, silahkan anda share/post di mana saja anda suka (Blogger, WordPress, facebook, twitter, dll). Namun, diwajibkan untuk mencantumkan link sumber dari artikel yang sobat blogger share/post (copy/paste). Terima kasih,,,