[英]slide content when click in the menu
我只想在左侧单击链接中的一个内容时向左滑动一个简单的网站菜单。
在这里工作
html
<div class="contentLeft">
<ul>
<li><a class="selectBox" href="#">sample</a></li>
<li><a class="selectBox" href="#">sample1</a></li>
<li><a class="selectBox" href="#">sample2</a></li>
</ul>
</div>
<div class="contentRight">
<div class="selectBoxContent">its</div>
<div class="selectBoxContent">my</div>
<div class="selectBoxContent">way</div>
</div>
jQuery的
$(function() {
$('.selectBox').click(function() {
$('.selectBoxContent').slideLeft('fast');
return false;
});
});
的CSS
.contentLeft {
border:1px solid green;
width:30%;
float:left;
}
.contentRight {
border:1px solid red;
width:64%;
float:right;
height:400px;
}
.selectBoxContent {
width:100%;
height:400px;
display:none;
}
您可以使用.animate而不是幻灯片。 所以像
jQuery查询
$(function() {
$('.selectBox').click(function() {
$('.selectBoxContent').fadeIn().animate({
right: "0"
}, 1000);
return false;
});
});
的CSS
.contentRight {
border:1px solid red;
width:64%;
float:right;
height:400px;
overflow: hidden;
position: relative;
}
.selectBoxContent {
width:100%;
height:400px;
display:none;
right: -100%;
position: relative;
}
通过使用jQuery UI-Slide Effect,我们可以实现这一目标。
jQuery的 :
$('.selectBoxContent').toggle( "slide" );
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.