1

我试图让我的侧边栏以任何可能的方式从左向右滑动。我还需要它有一个把手，这样人们可以点击它，它会滑出，然后在他们关闭它时完全消失。这是我目前拥有的 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;
}
4

2 回答 2

0

演示：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;
}
于 2013-06-25T20:02:29.150 回答
0

这是一个 jsfiddle，描述了我利用 javascript 库“ jQuery ”

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

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

它是 ID 为 #toggle 的元素的 onclick 事件 - 它使用参数宽度切换调用 jquery“动画”调用。因此，单击时将动画侧边栏水平打开和关闭。享受，如果您有任何问题，请发表评论

编辑：回复评论

在您的问题中，您说您想要一个“句柄”，人们可以单击以打开您的侧边栏。定义你的句柄元素并用它的选择器替换我的“#toggle”

于 2013-06-25T20:22:01.580 回答