السلام عليكم و رحمة الله و بركاته
Jom blaja buat jquery lava lamp tab menu.. contoh mcm gmbar bawah ni..
ikut step bawah ni..
1.macam biase la.Design>Page Element>Add A gadget>HTML/JAVASCRIPT
2.Copy code bawah ni..jangan save dlu..edit cikit yer
<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}
ul, li {
margin: 0; padding: 0;
}
#blob {
border-right: 1px solid #FF75C4;
border-left: 1px solid #FF75C4;
position: absolute;
top: 0;
z-index : 1;
background: #A9D0F5;
background: -moz-linear-gradient(top, #FA5858, #FA5858);
background: -webkit-gradient(linear, left top, left bottom, from(#FA5858), to(#FA5858));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}
#lava-lamp {
background:#FFFFFF;
float: left;
border: 2px solid #FA5858;
margin: 0px 0px 15px;
padding: 8px 3px 10px 0px;
}
#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}
#lava-lamp li a {
color: #000000;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>
<div id="container">
<ul id="lava-lamp">
<li id="selected"><a href="URL">Home</a></li>
<li><a href="URL">profile</a></li>
<li><a href="URL">About </a></li>
<li><a href="URL">Award</a></li>
<li><a href="URL">contact</a></li>
<li><a href="URL">more</a></li>
</ul></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" 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>
*NOTE:
Warna button:background: -moz-linear-gradient(top, #FA5858, #FA5858);
background: -webkit-gradient(linear, left top, left bottom, from(#FA5858), to(#FA5858));
Link Tab: URL
Tajuk Link: Home,profile,about,award,contact,more
Warna background:background:#FFFFFF;
Korang bleh tukar background 2..gantikan code ni
background:#FFFFFF;
dengan code ni
background: url(URL GAMBAR) repeat;
15 comments:
Alhamdulilah yunk...jijah guna tutorial ni..menjadi! terima kasih bnyak2..kalau sudi boleh tengok jijah guna.
@Cik AzizahSame2..huhu..ok nnti eka singgah..:)..tq sbb sudi dtg blog eka..
DAH try wat tapi kalu nak tkar warna yang bergerak2 n bolder 2 cmna ek..
@Onitsuka_hana
yg ni..code color 2 jer..
background: -moz-linear-gradient(top, #FA5858, #FA5858);
background: -webkit-gradient(linear, left top, left bottom, from(#FA5858), to(#FA5858));
assalamualaikum ,
terjumpe blog ni ,
nice tutorial ,
nak tanye ,
kite kene ltk url untk target kan die kan ,
mcm mane nak buat page untk yg kite target tu ,
mean , saya ade page home je , mcm mane nak buat page yg laen :D
terime kaseh :)
@NAJIHA :)
wslm..
huhu..
kene add page..pg kat posting..add a new page..pas2.tlis la nk tlis tjuk ap..pas2 publish..amik url dye
@Nur Iman
wah ! manjadi la :D
terime kaseh :)
@NAJIHA :)
same2..:)
bkpo dop jd tab hop y gerak2 tuu??
kaler dy un xde..
cecane2... heee
@mujahidah solehah
aikk..gner bleh jdi g2?
alhamdullilah dah mnjadi...dah lama nak wat tuto nie...syukran ya atas tuto nie...^_^
@AnA SaLiDa
:)..afwan
Assalamualaikum tuan blog , boleh tak terangkan lagi jwpn untuk soalan najiha . sebab saya pon mcm dye . ade satu page iaitu home sja . Nak link kan entry kite pade page yg kite nak mcm mne ? Then , nak tukar wrne cmne dan size cmne ? sbb blog sye wrne oren . Sory kalau bnyk tnye :)
Cantiknya blog.. Bleh ikot tutorial..hehehe~~
@Cik Cahaya
bleh2..:)
Post a Comment