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;