水平滑动横幅设计与功能
水平滑动横幅设计与功能
提问于 2015-04-27 12:12:04
我需要显示垂直横幅，它将从屏幕的右边水平滑动，一旦用户点击打开按钮/div，应该能够关闭同样的。基础设计如下图所示
我为同一个http://codepen.io/anon/pen/oXgePX做了小提琴
<div class="horizontal-slide" id="other-menu"><<</div>
<div class="menu-other slide-right slide-opened" id="other-menu-content">
horizontal on right slide div
</div>更新
我通过在另一个div中包装横幅和按钮来做到这一点。
.wrapper{
float:right;
position:absolute;
right:0;
}示例：http://codepen.io/anon/pen/aOzyxo
仍然需要对其进行改进，这样按钮也可以用横幅滑行以保持流畅的外观。
回答 5
Stack Overflow用户
发布于 2015-04-27 12:34:19
你必须改变你的css
例如：
/* float */
float:right;
/* absolute position */
position:absolute;你需要这样做：
http://codepen.io/anon/pen/mJyMgW
还是我能回答你的问题？
Stack Overflow用户
发布于 2015-04-27 14:07:50
也许你想要这样的东西。我觉得这是个好的开始。
$(function() {
//slideout-menu-toggle
$(".banner-slide").click(function(event) {
var _slideMenu = $("#right-banner");
if (_slideMenu.hasClass("slide-opened")) {
$( "#right-banner" ).animate({ "right": "-190px" }, "slow" );
$( "#hbanner" ).html("<<");
//alert('a')
} else {
$( "#right-banner" ).animate({ "right": "0" }, "slow" );
$( "#hbanner" ).html(">>");
}
_slideMenu.toggleClass("slide-opened");
});
});#right-banner {
position:absolute;
right:0;
top: 0;
width: 210px;
}
.right-banner {
width: 150px;
height: 200px;
background-color: green;
padding: 20px;
float: right;
background-color: blue;
}
#hbanner {
float: left;
background-color: red;
cursor:pointer;
}
.wrapper {
float: right;
position: absolute;
right: 0;
z-index: 100000;
}
.content {
width: calc(100% - 210px);
background-color: magenta;
height: 200px;
float: left;
text-align: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
This is sample text</div>
<div class="wrapper">
<div id="right-banner" class="slide-opened">
<div class="banner-slide" id="hbanner">
>>
</div>
<div class="right-banner" id="hbanner-wrapper">
horizontal on right slide div
</div>
</div>
</div>
Stack Overflow用户
发布于 2015-04-27 12:39:52
您可以使用CSS转换和jQuery中的一个简单的jQuery实现它：
$('#button').on('click', function(){
$('#banner').toggleClass('unfolded');
});演示：http://codepen.io/mbrillaud/pen/NqPvZM
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29895399
复制相关文章
相似问题
腾讯云开发者
