水平滑动横幅设计＆amp;功能

Question

我需要显示垂直横幅，一旦用户点击打开按钮/ 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>

更新：

我设法通过包装横幅和＆amp ;;另一个div内的按钮。

.wrapper{
  float:right;
  position:absolute;
  right:0;
}

示例：http://codepen.io/anon/pen/aOzyxo

仍然需要对其进行改进，以便按钮也可以使用横幅滑动以获得流畅的外观

Answer 1

你要改变你的CSS

例如：

/* float */
float:right;

/* absolute position */
position:absolute;

你需要这样：

http://codepen.io/anon/pen/mJyMgW

或者我是否想念你的问题？

Answer 2

也许你想要这样的东西。我认为这是一个好的开始。

＆＃13;

＆＃13;

$(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");
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用CSS转换和jQuery中的简单toggleClass可以更清晰，更简单：

$('#button').on('click', function(){
    $('#banner').toggleClass('unfolded');
});

演示：http://codepen.io/mbrillaud/pen/NqPvZM

Answer 4

使用JQ切换类

$('#slider').toggleClass('sliderthing');

加上CSS给它看起来和东西应该运作良好

Answer 5

我设法通过包装横幅和＆amp;另一个包装内的按钮。

以下是更新后的示例：http://codepen.io/anon/pen/aOzyxo

我添加了一些精确的动画，以便在点击事件后立即隐藏/显示红色按钮，并带有一些流畅的动画。

.wrapper{
  float:right;
  position:absolute;
  right:0;
  z-index:100000;
}