OZY-W On Facebook

Selasa, 29 Maret 2011

Membuat Menu Horizontal With Drop Down Support All Browser

Mungkin sobat blogger masih ingat postingan saya yang sebelumnya yaitu Cara Membuat Menu Horizontal Dengan Sub Menu Vertikal bagi yang belum melihat silahkan lihat disini. postingan ini di-request Oleh seorang sobat blogger Klik Marva~>www.klikmarva.blogspot.com.

Screenshot :


Untuk Langkah-langkah-nya :
Masuk ke Dasbor
Rancangan
Edit HTML
Beri tanda centang Expand Widget Templates
Copy kode dibawah ini dan pastekan di atas kode ]]></b:skin>

.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}


.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #151515;
color: #2d2b2b;
text-decoration: none;}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}

.jqueryslidemenu ul li a:hover{
background: #DF0101; /*tab link background during hover state*/
color: white;}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}

/* CSS classes applied to down and right arrow images */

.downarrowclass{
position: absolute; top: 12px; right: 7px;}

.rightarrowclass{
position: absolute; top: 6px; right: 5px;}

Copy kode berikut dan pastekan di atas kode </head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

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

Copy kode di bawah ini kemudian pastekan di atas atau di bawah kode <body>

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a>
<ul>
<li><a href='#'>Sub Menu4</a></li>
<li><a href='#'> Sub Menu4</a></li>
<li><a href='#'> Sub Menu4</a></li>
</ul>
</li>
<li><a href='#'>Menu5</a>
<ul>
<li><a href='#'>Sub Menu5</a></li>
<li><a href='#'>Sub Menu5</a>
<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a>
<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
</ul>
</li>
<li><a href='#'>4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu6</a></li>
<li><a href='#'>Menu7</a></li>
<li><a href='#'>Menu8</a></li>
<li><a href='#'>Menu9</a></li>
<li><a href='#'>Menu10</a></li>
<li><a href='#'>Menu11</a></li>
</ul>
<br style="clear: left" />
</div>

Gantilah kata/kode yang harus diganti
Langkah terakhir adalah menekan tombol save template.

Tolong juga ninggalin komentar (untuk motivasi bagi saya) dan klik juga iklannya ya! terima kasih

.: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,,,

Artikel Terkait:

9 komentar:

  1. ini dia yang saya cari-cari sebelumnya tapi tidak ketemu.. akhirnya jumpa disini.. nice info..

    BalasHapus
  2. pake jquery?

    atau cuma namanya aja yg 'jquery' heheheee

    BalasHapus
  3. Thankzzz Banget Infonya yah gan......

    Terus update yah :)

    aku cari dmn2 ngga ada yg suport all browser tapi akhirnya nemu di blog ini...

    Maanntafffff gann....

    utk iklan sip udah di klik :p

    BalasHapus
  4. Waduh thnaks deh sob...

    BalasHapus
  5. kok ga bisa ya mas??
    sudah aku pasang cuma bentuknya seperti Blog Archive ... jadi ga kayak yang di gambar ...
    gimana ni solusinya??
    makasih :(

    BalasHapus
  6. udah dicoba pada template lain

    BalasHapus
  7. udah mas ...
    hasilnya tetep ...
    :(

    BalasHapus
  8. saya udah nyoba buktiin dan 200% berhasil n sama persis sekali!!!

    BalasHapus
  9. keren banged..
    dimana2 banyak postingan kaya gini tapi gak berhasil..
    share terus ilmunya ya kawan :D

    BalasHapus

Saya percaya esok sudah tidak boleh mengubah apa yang berlaku hari ini, tetapi hari ini masih boleh mengubah apa yang akan terjadi pada hari esok

Walaupun kita tidak saling kenal, tetapi tiada salahnya kita berbagi sapa atau hanya tulisan " Hai " pada kolom komentar di bawah ini.
.:Terimakasih atas komentar Anda :.

OZY-W
© 2011 copyright OZY-W is proudly powered by Blogger.com
Free Download Software Full | Tips n Trik | Free Security Tool