Cara membuat menu bar (jquery-lava lamp)
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>
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!!
23 marshmallow komen