Ijin share jQuery sederhana...
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Agoes jQuery Plugin Menu</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="agoestri-textslide.js" type="text/javascript"></script>
</head>
<body>
<div id="containermenu">
<div>
<img src="images/icon1.gif" />
<a href="#" >Keterangan</a>
</div>
<div>
<img src="images/icon2.gif" />
<a href="#" >Keterangan</a>
</div>
<div>
<img src="images/icon3.gif" />
<a href="#" >Keterangan</a>
</div>
<div>
<img src="images/icon4.gif" />
<a href="#" >Keterangan</a>
</div>
<div>
<img src="images/icon5.gif" />
<a href="#" >Keterangan</a>
</div>
<div>
<img src="images/icon6.gif" />
<a href="#" >Keterangan</a>
</div>
<div>
<img src="images/icon7.gif" />
<a href="#" >Keterangan</a>
</div>
<div>
<img src="images/icon1.gif" />
<a href="#" >Keterangan</a>
</div>
</div>
</div>
</body>
</html>
- Code: Select all
(function($){
$.fn.agoestri_textslide = function(options){
var s = {
mode : 'horizontal'
, menuWidth : '30px'
, childwidth : '50'
, childheight : '50'
};
s = $.extend(options, s);
var current = 1;
return this.each(function(){
$this=$(this);
$this.css({
'position' : 'relative'
});
$this.addClass('parentct').css({
'position' : 'relative'
});
$this.find('div').each(function(i){
$(this).addClass('innercontent').css({
'width' : s.childwidth+'px'
, 'height' : s.childheight+'px'
, 'float' : 'left'
, 'overflow' : 'hidden'
, 'margin' : '0px 5px 0px 5px'
, 'cursor' : 'pointer'
, 'position' : 'absolute'
, 'left' : (i*((s.childwidth*1)+5))+'px'
});
});
$('.innercontent').wrapInner("<div></div>");
$this.find('img').wrap("<div class='wrapimage'></div>");
$this.find('a').wrap("<div class='wrapa'></div>");
$('.wrapimage, .wrapa').css({
'height' : (s.childheight-10)+'px'
, 'float' : 'left'
});
$('.wrapimage').css({
'-moz-border-radius' : '10px'
, '-webkit-border-radius' : '10px'
, 'background-color' : '#242021'
, 'padding' : '5px'
, 'width' : (s.childwidth-10)+'px'
});
$('.wrapa').css({
'font-size' : '16px'
, 'text-decoration' : 'none'
, 'font-family' : 'arial'
, 'color' : '#ffffff'
, '-moz-border-radius' : '10px'
, '-webkit-border-radius' : '10px'
, 'padding' : '10px'
, 'min-width' : '10px'
, 'overflow' : 'auto'
});
$('.wrapa a').css({
'font-size' : '24px'
, 'text-decoration' : 'none'
, 'font-family' : 'arial'
, 'color' : '#ffffff'
});
$('.wrapa a').hover(function(){
$(this).css({
'color' : '#CC6600'
});
}, function(){
$(this).css({
'color' : '#ffffff'
});
});
$('.innercontent').each(function(i){
$(this).hover(function(){
$(this).css({
'z-index':1000
, '-moz-border-radius' : '10px'
, '-webkit-border-radius' : '10px'
, 'background-color' : 'rgba(67, 67, 67, 0.8)'
});
var n = $(".innercontent").length;
$(this).animate({
'width' : (n*((s.childwidth*1)+5))+'px'
, 'left' : '0px'
}, 200);
},function(){
$(this).css({
'z-index':0
, 'background-color' : ''
});
$(this).animate({
'width' : s.childwidth+'px'
, 'left' : (i*((s.childwidth*1)+5))+'px'
}, 200);
});
});
});
};
})(jQuery);
$(function(){
$("div#containermenu").agoestri_textslide();
}
);
News
Site map
SitemapIndex
RSS Feed