从左到右滑动Divider

问题描述：

我试图让我的边栏以任何可能的方式从左到右滑动。我还需要它有一个句柄，以便人们可以点击它，它会滑出，然后在关闭它时完全消失。这是我目前使用的HTML和我的CSS，如果这有所作为。我刚开始做设计师，所以我不太清楚如何处理这个问题。我在网上看了很多，但找不到插件，所以如果有人可以建议一个插件或帮助我的代码将是伟大的。从左到右滑动Divider

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

你有没有尝试过学习jQuery的一些？尝试jQuery库中的'animate' – Chanckjh

正如他所说，jQuery将成为一条走向。你可以尝试用CSS3 Transiitions做些事情，但它不会兼容。 – jakecraige

我回答了类似的问题[这里]（http://stackoverflow.com/questions/8085423/slideout-from-right-to-left-on-div-with-a--variable-width/8085756#8085756）。在我的回答中查看jsFiddle，看到一个动画'div'的例子。 – rossipedia

答

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

这几乎正是我需要的，但它需要点击，因为它可以在平板电脑上使用。这是一个简单的修复？ –

绝对，我会更新提琴手http://jsfiddle.net/abc123/3fwMG/1/请注意，我给他们的地方点击打开的菜单，因为它会做，当他们点击链接也关闭。 – abc123

你会如何做到这一点，所以可点击标签仍然在旁边？这样就很明显你如何关闭它。这只是我说话的设计师。：P –

答

here is a jsfiddle describing the basics我已经采取利用JavaScript库 “jQuery”

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

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

它是用于与ID #toggle元件onClick事件 - 它调用的jquery“动画”与参数宽度切换呼叫。从而点击将横向打开和关闭动画。享受，如果你有任何问题发表评论

编辑：回复评论

在你的问题你说你想要一个“处理”就可以点击进行运算 EN侧边栏。定义你的句柄元素，并用它的选择器替换我的“#toggle”

那么我需要添加id =“toggle”到我的代码？ –

如果你看看我的代码 - ive添加了一个“div”，其ID为“切换”，你可能或可能不想使用这种确切的方法 - 在你的问题中，你说你想要一个“处理”人们可以点击打开你的侧边栏。定义你的句柄元素，并用它的选择器 – Joe

替换我的“#toggle”，就像我可以用图像url替换它一样。 –

从左到右滑动Divider

相关推荐