大家好,另一个有趣的,
我正在构建一个将滑过页面整个宽度(宽度:100%;)的菜单,需要一些帮助。我有一个 float 在页面右侧的箭头按钮,单击它会触发菜单栏滑出。我希望箭头按钮在它前面滑出,一旦完全滑过,将箭头图像更改为相反的文件。
最大的问题是它们的宽度和高度需要灵活以允许变化的内容。我试图让它发挥作用,但我知道我在这里遗漏了很多因素。我的代码甚至没有触及移动箭头按钮和其他按钮。这并不是因为不努力!
有什么帮助吗?谢谢!
HTML:
<div id="main">
<div class="trans" id="trigger">
<img class="arrow_small" src="images/left_small.png" alt="slide out menu" />
</div>
<div id="slider">
<div class="trans" id="overlay"></div>
<div id="content">
<p>this is the content</p>
</div>
</div>
</div>
CSS:
#main {
width:100%;
height:306px;
top:50%;
margin-top:-153px;
position:absolute;
}
#trigger {
width:30px;
height:100%;
float:right;
background-color:#000;
position:relative;
z-index:3;
}
.arrow_small {
position:absolute;
left:50%;
top:50%;
margin-left:-6px;
margin-top:-12px;
}
#overlay {
width:100%;
height:100%;
position:absolute;
}
#content {
width:100%;
height:100%;
position:absolute;
z-index:2;
Javascript:
$(document).ready(function(){
//hide functions
$('#slider').css('display', 'none');
//menu slide out
$('#trigger').click(function (){
var bar = $('#slider');
bar.show(function(){
this.animate({'marginRight':'100%'},1000);
});
});
});
最佳答案
这是您要找的吗?在浏览器中试试这个:
HTML:
<div id="main">
<div id="slider">
<div id="image">
<p>Image would go here</p>
</div>
<div id="content">
<p>content...</p>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
#slider {
width: 6%;
height: 350px;
top: 33%;
background-color: black;
position: absolute;
right: 0;
}
.arrow_small {
position:absolute;
left:50%;
top:50%;
margin-left:-6px;
margin-top:-12px;
}
#image {
width: 75px;
background-color: black;
position:relative;
color: white;
float: left;
}
#content {
position: relative;
overflow: hidden;
left: 100px;
color: white;
}
js:
$(function() {
$('#image').toggle(function (){
$("#slider").animate({"width":"100%"}, 1000);
}, function() {
$("#slider").animate({"width":"6%"}, 1000);
});
});
我删除了你的图片,因为我没有它,想用文本在本地测试它。希望这对您有所帮助!
关于jQuery 动画在页面上水平滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5048260/