ini animationnya mengunakan javascript.
oh ya nambah efeknya bisa di ganti2 kalau
Di bagian ini kalian ganti
'effect' : 'fx4'
Coba
-fx1,fx2,fx3,fx4 = dr tengah ke kanan dan kiri -fx5,fx6,fx7,fx8 = dr kanan dan kiri ke tengah -fx9,fx10,fx11,fx12 = dr kiri ke kanan -fx,13,fx14,fx15, fx 16 = dr kanan ke kiridan lihat efeknya kukuk
SS
HTML
<!DOCTYPE">
<!-- from url=(0027)http://www.internialux.com/ -->
<html>
<head>
<!--Css-->
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/globals1.css" rel="stylesheet" type="text/css">
<!--Javascript-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lhpTwoColorButton.min.js"></script>
<script type="text/javascript" src="js/jquery.lhpMenuTwoColorButton.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var sampleMenuStt, topBttStt, customizeMeStt, sampleMenuWithBttStt, sampleMenuWithBttSttOneActive, sampleFormStt;
//init main menu
sampleMenuStt = {
'effect' : 'fx4',
'particleWidth' : '15',
'particleHeight' : '15',
'labelActiveColor' : '#454545',
'labelInactiveColor' : '#ccc', //warna font
'particleColorOne' : '#99bf08', //warna animatioin hover
'particleColorTwo' : '#bdd57d', //warna animation kotak
'background-color' : '#454545', //#454545
'oneButtonAlwaysActive' : true,
'buttonSelected' : $('ul#myMenu a[title="active"]'), //jQuery selector or button index (example '0')
'width' : '150', //lebar button menu
'height' : '40' //tinggi button menu
};
$('ul#myMenu a').lhpTwoColorButton(sampleMenuStt);
$('ul#myMenu a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 100);
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="wrapperp">
<div id="wrapper">
<!--Start Navigation-->
<div id="navigation">
<ul id="myMenu">
<li><a class="mbut" href="#HOME">Home</a></li>
<li><a class="mbut" href="#HOME">General</a></li>
<li><a class="mbut" href="#HOME">Computer</a></li>
<li><a class="mbut" href="#HOME">Multimedia</a></li>
<li><a class="mbut" href="#HOME">Business</a></li>
<li><a class="mbut" href="#HOME">Lounge</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
/* PROJECT: Internialux */
/* AUTHOR: Francisco Bueno */
/* GROUP GLOBAL */
body {
color: #454545;
margin: 0px;
padding: 0px;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 62.5%;
}
/* general */
#wrapperp {
width: 980px;
margin-top:70px;
margin-bottom:10px;
margin-left: auto;
margin-right: auto;
border-left: 10px solid #f6f6f6;
border-right: 10px solid #f6f6f6; }
#wrapper {
width: 960px;
background: #fff; box-shadow: 0px 0px 25px #C4C4BF;box-shadow: 0px 0px 25px #C4C4BF;
-webkit-box-shadow: 0px 0px 25px #C4C4BF; -moz-box-shadow: 0px 0px 25px #C4C4BF;
margin-left: auto;
margin-right: auto;
margin-right: auto;
border-left: 10px solid #e9e9e9;
border-right: 10px solid #e9e9e9;
border-top: 15px solid #f6f6f6;
border-bottom:15px solid #f6f6f6;}
/* navigation */
#navigation{ height: 0px; position: relative; width: 100%; z-index:1000; left:0px; top:-40px;background: #FFF;}
#navigation ul{ width: 952px; /*background: #656;*/ margin-left: auto; margin-right: auto;}
#navigation ul li{ float: left; font-size: 13px; margin-right:4px;}
#navigation ul li a{ color: #86a618; text-decoration: none;; display: block; font-weight: bold; background: #454545; }
#navigation ul li a.last { padding-right: 25px;}
#navigation ul li a:hover{ background: #ffffff; text-shadow: 1px 1px 0px #454545; }
#navigation ul li a.active{ background: #ffffff; color: #86a618; text-shadow: none;}
.mbut {
border-radius: 8px;
border: 1px solid #666;
box-shadow: 0 0 10px #333;
}
JShttp://pizzatimes94.com/iframe/menutimes/doc/index.html
Postingan
