Cara Membuat Menu Horizontal Jquery

undefinedCara Membuat Menu Horizontal Jquery. dahulu saya sudah membahas tentang cara membuat menu melayang dan menu navigasi. namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang tutorial yang dahulu. Menu Horizontal Jquery yakni menu yang biasa di pakai oleh blog-blog yang sudah pro bukan pemula seperti saya. tetapi, ada baikknya sobat dirumah menggunakan menu ini, selain lebih bisa menghemat tempat juga lebih indah dibanding menu lainnya. hasil dari menu ini bisa sobat lihat pada gambar di kiri. 

langkah pertama :

  • masuk pada bagian Design lalu Edit HTML
  • Masukkan code dibawah ini dibawah 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://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

  • Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}


.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: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
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:#B30000; /*tab link background during hover state*/
color: white;
}


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


/*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;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Catatan :
Code diatas bisa diganti sesuai tema dari template blog sobat

  •  apabila sudah, kemudian cari kode yang mirip seperti di bawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis di Internet (Header)' type='Header'/>   </b:section>
</div>
Keterangan :
Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template
  •  lalu taruh code dibawah ini dibawah code yang diatas tadi
<div id='footheader'><div id='header-wrapper'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>
  • Kalau sudah SAVE
Langkah Kedua :

  • menuju menu "Page Elements"
  • Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://newscheat.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</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>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://newscheat.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>
  • Kalau sudah silahkan di SAVE deh.
Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan. baca juga Cara Membuat Kota Info Profil di Akhir Posting.
Dapatkan update artikel terbaru kami langsung ke email anda

4 Responses to "Cara Membuat Menu Horizontal Jquery"

Goek Info said...

:a: Nice Info

http://adie-konoe.blogspot.com/

mazdinegara said...

:v:

Panduan JSS-Tripler said...

makasih gan.. aq coba dulu

Anonymous said...

bang bro sy uda cari kode html yg " header-wrapper'> " kok ga ada yah? tlg di bantu yah.trims

Post a Comment

pasang iklan murah