Question

我试图让我的侧边栏以任何可能的方式左右滑动。我还需要它有一个手柄，以便人们可以点击它，它会滑出然后关闭它时完全消失。这是我到目前为止的HTML和我的CSS，如果这有所作为。我刚刚开始担任设计师，所以我不确定如何处理这个问题。我在网上看了很多，但找不到插件，所以如果有人可以推荐一个插件或者帮我处理那些很棒的代码。

<div class="s-b-menu">
  <ul>
    <li class="s-b-border"><a href="#"><i class="icon-calendar"></i> Syncro</a></li>
    <li class="s-b-border"><a href="#"><i class="icon-file"></i> BoM</a></li>
    <li><a href="#"><i class="icon-hdd"></i> Override</a></li>
  </ul>
</div>


.s-b-menu ul {
  position: absolute;
  padding: 8px;
  margin-left: 0;
  background-color: rgba(182, 182, 182, 0.71);
  line-height: 20px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

.s-b-menu ul li {
  padding: 4px;
}

.s-b-border {
  border-bottom: dotted 1px;
}

.s-b-menu ul li a {
  text-decoration: none;
  color: #FFF;
  display: block;
}

.s-b-menu ul li a:hover {
  background: rgba(16, 0, 225, 0.74);
}

.s-b-menu ul li#active {
  background: #0ff;
}

Answer 1

DEMO：http://jsfiddle.net/abc123/MgcDU/5482/

修复了CSS，因此菜单文本不会跳转。

HTML：

<div class="s-b-menu-hidden">
    Menu <i class="icon-arrow-right"></i>
</div>
<div class="s-b-menu">
  <ul>
      <li id="menu-close">Menu <i class="icon-arrow-left"></i></li>
    <li class="s-b-border"><a href="#"><i class="icon-calendar"></i> Syncro</a></li>
    <li class="s-b-border"><a href="#"><i class="icon-file"></i> BoM</a></li>
    <li><a href="#"><i class="icon-hdd"></i> Override</a></li>
  </ul>
</div>

JS：

$(".s-b-menu-hidden, #menu-close").click(function(){
    $(".s-b-menu-hidden").toggle();
    $(".s-b-menu").toggle();
});

CSS：

.s-b-menu-hidden {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    background-color: rgba(182, 182, 182, 0.71);
    position: absolute;
    padding: 12px;
    margin-left: 0;
}

.s-b-menu-hidden:hover {
    background-color: rgba(200, 184, 184, 0.71);
}

.s-b-menu {
    display: none;
}

.s-b-menu:hover {
    display: block;
}

.s-b-menu ul {
  position: absolute;
  padding: 8px;
  margin-left: 0;
  background-color: rgba(182, 182, 182, 0.71);
  line-height: 20px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

.s-b-menu ul li {
  padding: 4px;
}

.s-b-border {
  border-bottom: dotted 1px;
}
.s-b-menu ul li a {
  text-decoration: none;
  color: #FFF;
  display: block;
}

.s-b-menu ul li a:hover {
  background: rgba(16, 0, 225, 0.74);
}

.s-b-menu ul li#active {
  background: #0ff;
}

Answer 2

here is a jsfiddle describing the basics我采用的一种方法是利用javascript库“jQuery”

其他答案可能是“切换”你的元素的显示但我没有看到你正在寻找的动画所以我把它放在一起 - 通过这种方法，我们实际上是使用这个特定动画侧边栏元素的扩展和收缩动画一套jquery：

$('#toggle').click(function(){
    $('.s-b-menu ul').animate({width: 'toggle'});
});

它是id为#toggle的元素的onclick事件 - 它使用参数width toggle调用jquery“animate”调用。因此，在点击时，动画侧边栏可以水平打开和关闭。享受，如果您有任何问题，请发表评论

编辑：回复评论

在你的问题中，你说你想要一个“句柄”的人可以点击操作在你的侧边栏。定义你的handle元素并用它的选择器

替换我的“#toggle”

从左到右滑动一个Div

2 个答案: