从左到右滑动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;
}
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替换它一样。 –
你有没有尝试过学习jQuery的一些?尝试jQuery库中的'animate' – Chanckjh
正如他所说,jQuery将成为一条走向。你可以尝试用CSS3 Transiitions做些事情,但它不会兼容。 – jakecraige
我回答了类似的问题[这里](http://*.com/questions/8085423/slideout-from-right-to-left-on-div-with-a--variable-width/8085756#8085756)。在我的回答中查看jsFiddle,看到一个动画'div'的例子。 – rossipedia