Wednesday, May 11, 2011

Bagaimana cara membuat Menu Horizontal multi level dengan JQuery

Bagaimana cara membuat Menu Horizontal multi level dengan JQuery

langkah pertama yaitu 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;

}


Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.



Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah 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>






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'>

<b:section class='footheader' id='footheader' preferred='yes'>

</b:section>

</div>






Kalau sudah SAVE



Pekerjaan kita belum selesai, langkah selanjutnya yaitu 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://sangmerak.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://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>

</ul>

<br style="clear: left" />

</div>




Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan.


Kalau sudah silahkan di SAVE deh.

No comments:

Post a Comment

Category

17 + (27) Ada - ada aja (8) Ada ada aja (1) Adidas (1) Adsense (7) Affiliate (1) Aktris (1) Alam kita (3) Alexa (2) Alexandra (1) Alias (1) Amazon (2) Anak (12) Anastasya (1) Andika (1) Android (2) Anggota (1) Angle Tattoos (1) Antivirus (8) Antivirus Terbaru (8) Apple (2) Apps untuk pelajar/mahasiswa (1) Ariel Peterpan (1) Arifinto (2) Artikel Menarik (21) Artis (1) Artis Indonesia (3) Artis manca (1) Astronomi (1) Auliani (1) Avatar berbicara (1) Bajak Laut (1) Bandung (1) BB++ (3) Belanja (1) berita (1) Berita Aneh (6) Berita Artis (6) Berita Astronomi (2) Berita Dalam negri (2) Berita Dunia (4) Berita Hewan (15) Berita Internasional (2) Berita Kesehatan (7) Berita Makanan Minuman (14) Berita Olahraga (8) Berita Panas (1) Berita Pendidikan (1) Berita Pengetahuan (2) Berita Renungan (5) Berita Sejarah (6) Berita Selebriti (1) Berita Teknologi (2) Berita Tentang Musik (2) Berita Tumbuhan (1) Berita unik (4) Berita Utama (2) Bieber (1) Bintang (1) Biografi (1) Bisnis (2) BlackBerry (7) Blog (49) Blogger (23) Brondong (1) Browser (1) Buah Unik (3) Budaya Aneh (1) Bugil (1) Cantik (1) Cara Bisnis Online (2) Cara daftar Facebook (1) Cara Recovery Data (2) Cara Self Test Printer (5) Cara Service Komputer (25) Cara Service Laptop (8) Cara Service Monitor (34) Cara Service Ponsel (3) Cara Service Printer (63) Cara Service TV (5) Cara Service UPS (1) Cari $ (16) Celebrity (3) Chrome (2) Clicksor (3) Contoh (1) Coppas Animal (1) Coppas Berita (5) Coppas Extreme (3) Coppas Foto Hot (3) Coppas Lucu (1) Coppas Mistery (1) Coppas Sejarah (1) Coppas Style (2) Coppas Unik (1) Cukur (1) Cute (5) Definisi dan Sejarah Tattoo (3) Dicukur (1) Dipanggil (1) disappear (1) Domain-Hosting (2) Download (4) Download MP3 Gratis (1) Download Software (21) Downloader (1) Dugaan (1) Dugem (1) Dunia (1) Dunia Alam (6) Dunia aneh (5) Dunia Arkeologi (1) Dunia Arkeologi dan Sejarah (1) Dunia Design (3) Dunia Ekonomi (3) Dunia Extream (3) Dunia informasi (6) Dunia Kriminal (2) Dunia Kuliner (3) Dunia Medis (4) Dunia Militer (2) Dunia Misteri (1) Dunia Pendidikan (1) Dunia Rohani (1) Dunia Sejarah (1) Dunia Sosial (7) Dunia Teknologi (6) Dunia Tips Dan Trick (1) Dunia Wanita (2) e-learning (1) Elizabeth (1) email (3) Excel (11) Facebook (8) Fakta Aneh (16) Fakta Dunia (8) Fakta Indonesia (13) Fakta Unik (68) Feed (1) Fenomena unik (1) Firefox (4) Flash (2) Football (1) Foto (2) Foto Hot (7) Freeware (24) Friendster (1) Funny (1) Funny Pics (15) Gadget (1) Gadget dan Hanphone (2) Gambar Aneh (1) Gambar Extream (4) Gambar Lucu (1) Gambar Unik (4) Game (1) Games (6) Gathan (1) Genit (4) Githa (1) Gmail (1) Google (28) Gosip (2) Gossip Celeb (4) Gratis (1) Gumilang (1) Handphone (3) hardisk (1) Health (3) Hilabi (1) Hollywood (1) Honda (1) Hot (2) Hot Girls (1) Hot News (25) Hot Pics (11) HP (1) HTC (5) html (3) Indonesia (2) info (11) Info Harga (1) Info Menarik (24) Internasional (1) Internet (19) IP Address (1) iPone (1) Istilah Komputer (1) Jadwal Piala Dunia 2010 (2) Jadwal Puasa (1) Jadwal Sholat (1) Japan (1) Jelita (1) Jennifer (1) Jepang (1) Joanne (1) Justin (1) Karena (1) Karier dan Gaya Hidup (1) kartu Natal (1) Katanya ... (5) Kate Middleton (2) Keajaiban Alam (3) Kebesaran Allah (1) Kecantikan (1) Kecantikan Dan Kesehatan (3) Kejadian Aneh (3) Kekayaan (1) Keramas (1) Keren (7) Kesehatan (5) Kisah Mistis (1) Koleksi (1) Komputer (12) Komputer dan Internet (5) Kontes Aneh (3) Kreatifitas (6) Kuliner (1) Kurniawan (1) Lady Gaga (1) Lain-Lain (2) Legenda (1) Lenovo (1) LG (2) Lifestyle (3) link (4) Link Friends (1) Lintas Indonesia (3) Lirik Lagu (1) Lorenza (1) Makan (1) Malinda (3) Maling (1) Maling ATM (2) Marcia (1) Meninggal (1) meta tag (2) Miliar (1) Military (1) Misteri (10) Misteri - Misteri Di Dunia (3) Miyabi (1) Mobil (30) Model (13) Modem ADSL (1) Monetize (16) Motivasi Dan Inspirasi (1) Motorola (1) mp3 (1) Musik (2) Nadine (1) Nafeeza (1) Nakal (4) Narkoba (1) Netbook (2) News (54) Nokia (1) Nonton (1) office 2010 (1) Oktaviany (1) Olahraga (1) Online (1) online ticket (1) Operasi (1) Otomotif (2) Paid Survey (2) paidreview (2) Panas (1) Panduan Service Monitor I (10) Panduan Service Monitor II (13) Parse (1) Payment (1) Paypal (1) PDF (4) Pengetahuan (4) Pengetahuan Umum (4) Pengingat Sholat (1) Pengolah Gambar (1) Photo (1) Piala Dunia 2010 (2) Ping (1) Plastik (1) Plug-in Wordpress (13) Polisi (1) Ponsel (10) Porno (1) Portable (2) POS UNAS SD-SMP-SMA 2010 (1) Powerpoint (2) Prediksi 2010 (1) Presenter (1) Pria (1) Printer (1) Produk (1) Produk Unik (10) Profil Artis (7) Profil Tokoh (5) Profile (1) Psikotes (1) Putri (1) Rahmat (1) Read more (1) Rehab (1) Rekor Dunia (30) related post. tips (3) Resetter Canon (26) Resetter Epson (18) Resetter HP (5) RSS (2) Sains Dan Antariksa (4) Salley (1) Samsung (9) Science (1) Sebagai (1) Sebelum (1) Sedang (1) Sejarah (3) Sejarah Dunia (1) Sekedar Share (11) sekilas info (2) Seksi (1) Seksiologi (2) Selebritis (1) Selesai (1) Seni Dan Budaya (1) Senjata (1) SEO (14) Sepeda (1) Sesudah (1) Setelah (1) Sexsualitas (1) Sexy (10) Shaleh (1) Sheila (1) Sistem Tools (1) sms lebaran (2) Software (22) Software HP (5) Softwere (8) Speedy (1) Sport (1) Statistik (1) Suami (2) Sulityo (1) Suster (1) Syahrini (1) Tahukah anda? (60) Tatto Bahu (1) Tattoo Badan (4) Tattoo China (1) Tattoo Dolphin (1) Tattoo Hewan (2) Tattoo Ikan Koi (1) Tattoo Jepang (1) Tattoo Kanji (1) Tattoo Lebah (1) Tattoo Lengan (2) Tattoo Malaikat (1) Tattoo Serangga (1) Tattoo Tengkorak (1) Tattoo Tribal (2) Tattoo Wanita (2) Taylor (1) Teknologi (2) Telanjang (1) Telkom Promo (1) Template (3) Tempo Dulu (1) Tercantik (1) Terima (1) Tip Trik Internet (8) Tip Trik Windows (7) tips (166) Tips and Trik (10) Tips Blog (1) Tips Cinta (1) Tips Dan Info (6) Tips Dan trick (5) Tips Dan Trik (3) Tips Diet (1) Tips Kecantikan (1) Tips Kesehatan (9) Tips Suami Istri (5) Tools (8) Topless (1) Tragedi (1) Translator (4) Tribal Tattoos (3) Tsunami (1) Tukang (1) Tumbuhan (1) Twiter (3) Uncategorized (2) Unik (4) Unik Dan Aneh (7) Update Antivirus (8) Upskrit (1) Usaha (1) Utility (1) Video (1) Video Extream (1) Video mesum (4) virus (3) Wakaka (2) Wanita (1) Warta Terkini (9) Warteg (1) Widget (2) windows (26) windows 7 (3) WP (1) Ziddu (7) ZTE (1)