当前位置: 秋叶网络博客 前端编程 ◊ 纯html+css制作菜单折叠按钮

纯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,其它的自己调调就好了。

6
文章作者: 秋叶网络博客,本站鼓励原创。
转载请注明本文地址:https://www.mizuiren.com/387.html
目录:前端编程 | 标签:折叠菜单 | 10626次阅读