纯html+css制作菜单折叠按钮
作者：秋了秋 发表时间：2015年09月12日
传统的菜单折叠按钮往往是用图片做的，然而我发现其实这种简单的图片是可以用代码绘制的，加上css3的效果可以达到跟图片一模一样，而且也不会很复杂，非常简单。跟着我的思路来做吧，把网站上的菜单折叠按钮通通换掉。 html代码如下：
<span class="buttonsl"><b>-</b><b>-</b><b>-</b></span>
css代码如下：
.buttonsl {
position: absolute;/*绝对定位根据自己的喜好设置，包括后面的left和top*/
left: -40px;
top: 40px;
background: rgb(255, 204, 0);
padding: 10px 10px;
width: 20px;
font-size: 22px;
line-height: 6px;
text-align: center;
color: rgb(255, 255, 255);
border-radius: 3px;
cursor: pointer;
}
.buttonsl b {/*css3进行横向和纵向放大*/
transform: scale(2,3);
-webkit-transform: scale(2,3);
display: block;
}
效果演示：
如果效果相差较大，可以调节css，因为不同网页可能会有标签冲突，调调就可以了。
扩展：另外附上菜单按钮点击折叠，再次点击展开的简洁jq代码如下：
$('.buttonsl').toggle(function(){
$(this).parent().animate({"right":"-270px"});
},function(){
$(this).parent().animate({"right":"0px"});
})
逻辑是，点击这个按钮，让这个按钮的父级向右移动它的宽度大小单位的距离，从而达到隐藏目的，再次点击显示，以此循环。要看你的菜单是位于左侧还是右侧，位于左侧的话，把right改成left，其它的自己调调就好了。
18
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/387.html