06 November 2009

Cara Membuat Navbar Horizonal Multi Level

Wah lama neh sob ga buat postingan. Jadi inget neh ada proyek buat kumpulan tutorial bloger. Langsung aja kali ini saya akan ngasih tau caranya buat navigasi horizontal multi level. Biasanya pada setiap templete udah ada menu seperti ini, tetapi kadang ada yang kurang lengkap karena tidak multi level. Eiiitss bukan MLM lho.. Bagi sobat yang udah mahir mungkin postingan kali ini bisa buat koleksi aja.
Langsunga aja ke TKP..seperti biasanya sobat Login ke bloger dan sebagainya langsung masuk ke Edit HTML. Jangan lupa download templete dulu, buat jaga jaga.


Langsung saja langkahnya sebagai berikut :

Cari kode </b:skin>
Copy paste kode dibawah ini sebelum  kode </b:skin>



.jqueryslidemenu{

font: bold 12px Verdana;

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 #778;

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: black; /*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;

}




Cari code </head>
Copy paste code dibawah ini sebelum code </head>




<!--[if lte IE 7]>

<style type="text/css">

html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/

</style>

<![endif]-->



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script src=' http://h1.ripway.com/anshul555/slidemenu_horiz.js ' type='text/javascript'/>



Cari code seperti ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/>

</b:section>

</div>

Copy paste code dibawah ini tepat di bawah code tersebut di atas.


<div class='jqueryslidemenu' id='myslidemenu'>

<ul>

<li><a href='http:marchsya.blogspot.com'>Home</a></li>

<li><a href='#'>Daftar Isi</a></li>

<li><a href='#'>Tutorial Blog</a>

<ul>

<li><a href='#'>Sub Item 1.1</a></li>

<li><a href='#'>Sub Item 1.2</a></li>

<li><a href='#'>Sub Item 1.3</a></li>

<li><a href='#'>Sub Item 1.4</a></li>

</ul>

</li>

<li><a href='#'>Islam</a></li>

<li><a href='#'>Folder 2</a>

<ul>

<li><a href='#'>Sub Item 2.1</a></li>

<li><a href='#'>Folder 2.1</a>

<ul>

<li><a href='#'>Sub Item 2.1.1</a></li>

<li><a href='#'>Sub Item 2.1.2</a></li>

<li><a href='#'>Folder 3.1.1</a>

<ul>

<li><a href='#'>Sub Item 3.1.1.1</a></li>

<li><a href='#'>Sub Item 3.1.1.2</a></li>

<li><a href='#'>Sub Item 3.1.1.3</a></li>

<li><a href='#'>Sub Item 3.1.1.4</a></li>

<li><a href='#'>Sub Item 3.1.1.5</a></li>

</ul>

</li>

<li><a href='#'>Sub Item 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href='http://marchsya.blogspot.com'>Tukar Link</a></li>

</ul>

<br style='clear: left'/>

</div>

Terus di SAVE
Dan coba deh....moga berhasil dan bermanfaat....jika sobat ada yang mau menambahkan silahkan aja..


13 komentar:

Bahauddin Amyasi on 6 November 2009 23.55 mengatakan...

Asyik tuh, menu navigasinya..
Salam kenal, sobat...

Berry Devanda on 8 November 2009 20.23 mengatakan...

wa..saya udah lama cari caranya ne mas...
salam...
niceost...

Bang Del on 13 November 2009 17.16 mengatakan...

Boleh juga neh dicoba. Makasih dhizzoft yang telah berbaik hati membuat tutorial ini.

dhizzoft on 14 November 2009 11.11 mengatakan...

@ Bahaudin : salam kenal juga..sukses selalu

dhizzoft on 14 November 2009 11.13 mengatakan...

@ Berry : Ya semoga bermanfaat..

dhizzoft on 14 November 2009 11.16 mengatakan...

@ Bang Del : sama sama Bang..tapi kayaknya dhizoft yang harus berguru ma Bang Del..

Munir Ardi on 19 November 2009 10.47 mengatakan...

nambah ilmu deh saya hari ini

Munir Ardi on 26 November 2009 19.07 mengatakan...

berkunjung untuk berteduh

samuel adinugraha on 17 Januari 2010 19.09 mengatakan...

thanks infonya sob :)
Music
Inspirasi Samuel

rofiuddin on 17 Januari 2010 21.10 mengatakan...

hai sob aku dah follow d blog ini, jgn lupa follow d blog aku ya :)

abangjo on 18 Januari 2010 11.34 mengatakan...

info bagus nich....follow balik ya

大蛇丸 on 27 Maret 2010 08.11 mengatakan...

kk wktu saya coba emang berhasil tapi kok berada di bawah Header

arif dager mahendra on 4 September 2011 06.41 mengatakan...

merusak blog saya aja gan


Posting Komentar

 

Gabung Yuk