汉堡按钮的实现

最新推荐文章于 2024-06-03 16:12:08 发布

aizhe1517

最新推荐文章于 2024-06-03 16:12:08 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/olafff/p/5162690.html

汉堡按钮的实现思想是：button内包含一个span，设置span为绝对定位，并设置背景颜色，使之成为汉堡按钮的夹心，
同理，再用span:before、span:after，创造一上一下两片面包，具体实现如下：

<body>

<button class="hamburger">
      <span>menu</span>
</button>

</body>
　　



.hamburger{
    display: block;
    position: relative;
    font-size: 0;
    width: 48px;
    height: 48px;
    border: none;
    cursor: pointer;

}

.hamburger:focus{
    outline: none;
}

.hamburger span{
    display: block;
    position: absolute;
    height: 4px;
    top: 22px;
    left: 8px;
    right: 8px;
    background-color: #fff;
}

.hamburger span:before,
.hamburger span:after{
    content:"";
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background: #fff;

}
.hamburger span:before{
    top: -10px;
}
.hamburger span:after{
    bottom: -10px;
}

转载于:https://www.cnblogs.com/olafff/p/5162690.html