Cara membuat menu bar (jquery-lava lamp)

11:25 PG

Asalamualaikum guys..Alhamdullilah, akhirnya Miss D'ya berjaya nak buat tutorial ini padahal sebenarnya tak pandai pon nak mengajar..Bajek pandai je aku ni..Hehe..Harap2 tutorial ni membantu u allz..Okeh, kita nak membuat fungsi menu bar ini..Senang je caranya..Miss D'ya lupe Miss D'ya belajar dari mana..Tahu tak apa menu bar tuh?? Lihat gambar di bawah..





Dah tahu dah apa itu menu bar..Korang leh tgok kat blog Miss D'ya dekat bawah header ada menu bar..So, kalau u all berminat nak buat fungsi ni, ikut je langkah2nya...



(1) Login Dashboard>Design>Page Elements>Add Gadget>Pilih HTML/javascript


(2) Korang copy code di bawah ni..Paste kat HTML/javascript



<style>



# Container {



width: 970px;



margin: 0px 0px;



padding: 0px 0px 0px 0px;



}



ul, li {



margin: 0; padding: 0;



}



# {Blob



border-right: 1px solid # 0059ec;



border-left: 1px solid # 0059ec;



position: absolute;



top: 0;



z-index: 1;



background: # AE0000;



background:-moz-linear-gradient (top, # AE0000, # C30000);



background:-webkit-gradient (linear, left top, left bottom, from (# AE0000), to (# C30000));



-Moz-border-radius: 4px;



-Webkit-border-radius: 4px;



-Moz-box-shadow: 3px 5px 2px # 011331;



-Webkit-box-shadow: 3px 5px 2px # 011331;



}



# {Lava-lamp



background: # E4E2E2;



background:-moz-linear-gradient (top, # E4E2E2, # FAFAFA);



background:-webkit-gradient (linear, left top, left bottom, from (# E4E2E2), to (# FAFAFA));



float: left;



border: 1px solid # BDBCBA;



margin: 0px 0px 0px;



padding: 8px 0px 0px 10px;



width: 970px;



}



# Li {lava-lamp



float: left;



list-style: none;



border-right: 1px solid # 4a4a4a;



border-left: 0px solid # 4a4a4a;



}



# Lava-lamp li a {



color: # 202020;



text-shadow: 0 0px 0px # 202020;



position: relative;



z-index: 2;



float: left;



font-size: 13px;



font-family: arial, sans-serif;



font-weight: normal;



text-decoration: none;



padding: 0px 20px;



}



</ Style>



<div id="container">



<ul id="lava-lamp">



<li id="selected"> href href='http://miss-dya.blogspot.com'> <b> HOME </ b> </ a> </ li>



<li> href href='http://miss-dya.blogspot.com/'> <b> MENU NAME </ b> </ a> </ li>



<li> href href='http://miss-dya.blogspot.com/> <b> MENU NAME </ b> </ a> </ li>



<li> href href='http://miss-dya.blogspot.com/> <b> MENU NAME </ b> </ a> </ li>



</ Ul>



</ Div>

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



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"> </ script>



<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"> </ script>



<script type="text/javascript">



$ ('# Lava-lamp'). SpasticNav ();



</ Script>






(3) Before that, pastikan kod ini diletak DI BAWAH HEADER okay..Korang boleh tukar n adjust la apa yang patut..Untuk menukar warna tab menu cari kod ini #AE0000; , Untuk menukar warna background menu cari kod ni #E4E2E2; .
Untuk menukar width menu, jika size menu terlalu besar @ pendek, cari kod ni width : 970px;,  Tukar href(link) kepada link untuk menu tersebut dan tukar NAMA MENU kepada nama pilihan anda sendiri. Tukarkan warna hijau dengan URL anda sndiri..



Okay,kalau tak paham ,komen okay...Selamat mencuba!!






Photobucket

You Might Also Like

23 marshmallow komen