Chào Mừng Các Bạn Ghé Thăm Forum Chia Sẻ Online
Trang Chính![[Codes] Menu dạng ngăn xếp (stack) Empty](https://2img.net/i/empty.gif)
- Demo : http://www.c3zone.net/html-h26.htm
![[Codes] Menu dạng ngăn xếp (stack) 92240234](https://2img.net/r/ihimizer/img15/8292/92240234.jpg)
- Download: http://dl.dropbox.com/u/8039292/c3z_stack.rar
-
- Code:
<script type="text/javascript">
$(function () {
// Stack initialize
var openspeed = 300;
var closespeed = 300;
$('.stack>img').toggle(function(){
var vertical = 0;
var horizontal = 0;
var $el=$(this);
$el.next().children().each(function(){
$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
vertical = vertical + 55;
horizontal = (horizontal+.75)*2;
});
$el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
.find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
$el.animate({paddingTop: '0'});
}, function(){
//reverse above
var $el=$(this);
$el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
$el.animate({paddingTop: '35px'});
});
// Stacks additional animation
$('.stack li a').hover(function(){
$("img",this).animate({width: '56px'}, 100);
$("span",this).animate({marginRight: '30px'});
},function(){
$("img",this).animate({width: '50px'}, 100);
$("span",this).animate({marginRight: '0'});
});
});
</script>
<style>
.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; right:-40px; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; white-space:nowrap}
.stack .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
right:60px;
line-height: 14px;
border: 0;
background-color:#000;
padding: 3px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #fcfcfc; font-size:10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
opacity: .85;
filter: alpha(opacity = 85);
}
/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }</style>
<div class="stack">
<img style="padding-top: 35px;" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/23gxp2p.png" alt="stack">
<ul class="" style="top: -50px; left: 10px;" id="stack">
<li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Trang chủ</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/apertures.png" alt="Trang chủ"></a></li>
<li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Phần mềm</span><img style="width: 79px; display: inline; margin-left: 0px;"src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/photoshopy.png" alt="Photoshop"></a></li>
<li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Lướt web</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/safariw.png" alt="Safari"></a></li>
<li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Ảnh lớp</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/codaz.png" alt="Coda"></a></li>
<li style="top: 55px; left: -10px;"><a href="http://www.c3zone.net/"><span style="margin-right: 0px;">Dragon Ball</span><img style="width: 50px; display: inline; margin-left: 0px;" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/db.png" alt="Finder"></a></li>
</ul>
</div>
newbie
Code bên trên nằm ở góc bên phải, dưới này là code nằm ở góc trái :
- Code:
<script type="text/javascript">
$(function () {
// Stack initialize
var openspeed = 300;
var closespeed = 300;
$('.stack>img').toggle(function(){
var vertical = 0;
var horizontal = 0;
var $el=$(this);
$el.next().children().each(function(){
$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
vertical = vertical + 55;
horizontal = (horizontal+.75)*2;
});
$el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
.find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
$el.animate({paddingTop: '0'});
}, function(){
//reverse above
var $el=$(this);
$el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
$el.animate({paddingTop: '35px'});
});
// Stacks additional animation
$('.stack li a').hover(function(){
$("img",this).animate({width: '56px'}, 100);
$("span",this).animate({marginLeft: '30px'});
},function(){
$("img",this).animate({width: '50px'}, 100);
$("span",this).animate({marginLeft: '0'});
});
});
</script>
<style>
.stack { position: fixed; bottom: 28px; left: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; left:-40px; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; white-space:nowrap}
.stack .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
left:60px;
line-height: 14px;
border: 0;
background-color:#000;
padding: 3px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #fcfcfc; font-size:10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
opacity: .85;
filter: alpha(opacity = 85);
}
/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *left:5px; }</style>
<div class="stack">
<img style="padding-top: 35px;" ilo-full-src="http://i50.tinypic.com/23gxp2p.png" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/23gxp2p.png" alt="stack">
<ul class="" style="top: -50px; right: 10px;" id="stack">
<li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Trang chủ</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/apertures.png" alt="Trang chủ"></a></li>
<li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Phần mềm</span><img style="width: 79px; display: inline; margin-left: 0px;"src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/photoshopy.png" alt="Photoshop"></a></li>
<li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Lướt web</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/safariw.png" alt="Safari"></a></li>
<li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Ảnh lớp</span><img style="width: 79px; display: inline; margin-left: 0px;" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/codaz.png" alt="Coda"></a></li>
<li style="top: 55px; right: -10px;"><a href="http://www.c3zone.net/"><span style="margin-left: 0px;">Dragon Ball</span><img style="width: 50px; display: inline; margin-left: 0px;" src="http://i810.photobucket.com/albums/zz28/c3zteam/htmlpage/stack/db.png" alt="Finder"></a></li>
</ul>
</div>
