水平幻灯片横幅设计和功能答案

【问题标题】：Horizontal slide banner design & functionality水平幻灯片横幅设计和功能
【发布时间】：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

仍然需要改进它，以便按钮也可以与横幅一起滑动，以获得平滑的外观

【问题讨论】：

看起来它工作得很好
我需要修复设计，以便按钮也可以移动，如图所示，按钮的文本也从 < 更改为 >...
我已更新 fiddle 以更改按钮内的文本，需要修复设计以便按钮显示在横幅左侧。
这里需要看的是将按钮放在蓝色容器内，并将其设置为绝对位置，将容器设置为相对位置。希望这会有所帮助。

标签： javascript jquery html css

【解决方案1】：

你必须改变你的CSS

例如：

/* float */
float:right;

/* absolute position */
position:absolute;

你需要这样的：

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

还是我误解了你的问题？

【讨论】：

您的代码已将按钮定位在横幅的左侧，但是当横幅关闭时它不会将红色按钮移动到右侧，它还应该将红色按钮移动到屏幕的八个位置，如我发布的图片所示问题。
我也设法做到了codepen.io/anon/pen/aOzyxo。但它仍然需要微调..

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以使用 CSS 过渡和 jQuery 中的简单 toggleClass 来更简洁：

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

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

【讨论】：

【解决方案4】：

使用 JQ 切换类

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

加上CSS让它看起来和东西应该很好用

【讨论】：

【解决方案5】：

我设法通过将横幅和按钮包装在另一个包装器中来做到这一点。

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

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

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

【讨论】：