Tutorial Tab Menu (lava lamp)

السلام عليكم و رحمة الله و بركاته

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:

Unknown said...

Alhamdulilah yunk...jijah guna tutorial ni..menjadi! terima kasih bnyak2..kalau sudi boleh tengok jijah guna.

ika said...

@Cik AzizahSame2..huhu..ok nnti eka singgah..:)..tq sbb sudi dtg blog eka..

Hana said...

DAH try wat tapi kalu nak tkar warna yang bergerak2 n bolder 2 cmna ek..

ika said...

@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));

NAJIHA :) said...

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 :)

ika said...

@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

NAJIHA :) said...

@Nur Iman
wah ! manjadi la :D
terime kaseh :)

ika said...

@NAJIHA :)
same2..:)

Unknown said...

bkpo dop jd tab hop y gerak2 tuu??
kaler dy un xde..

cecane2... heee

ika said...

@mujahidah solehah
aikk..gner bleh jdi g2?

AnA SaLiDa said...

alhamdullilah dah mnjadi...dah lama nak wat tuto nie...syukran ya atas tuto nie...^_^

ika said...

@AnA SaLiDa
:)..afwan

Unknown said...

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 :)

Cik Cahaya said...

Cantiknya blog.. Bleh ikot tutorial..hehehe~~

ika said...

@Cik Cahaya
bleh2..:)

2011-2018 Copyright© All Rights Reserved Designed by : nur atikah