css3 实现汉堡包式菜单

---

title: css 实现汉堡包式菜单
tags: css
time: 2018/12/01

---

CSS3 实现汉堡包式菜单

.html

<div class="container">
  <button id="data-menu-toggle" class="data-menu-toggle">
    <span class="menu-bar bar"></span>
  </button>
</div>

.css

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center; 
}
.data-menu-toggle {
  position: relative;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 30px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}
/* 初始化样式 */
.data-menu-toggle .menu-bar,
.data-menu-toggle .menu-bar:before,
.data-menu-toggle .menu-bar:after{
  display: block;
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: black;
  transition: all ease-in-out .3s;
}
.data-menu-toggle .menu-bar.bar {
  top: 12px;
}
.data-menu-toggle .menu-bar.bar:before {
  content: "";
  top: -12px;
}
.data-menu-toggle .menu-bar.bar:after {
  content: "";
  top: 12px;
}
/* 激活样式 */
.data-menu-toggle.active .bar {
  background-color: transparent;
}
.data-menu-toggle.active .bar:before {
  top: 0px;
  transform: rotate(45deg);
}
.data-menu-toggle.active .bar:after {
  top: 0px;
  transform: rotate(-45deg);
}

.js

const element = document.getElementById('data-menu-toggle');

element.onclick = function() {
  this.classList.toggle('active');
}

演示效果

demon.gif

缺陷

高度和宽度不够灵活，建议使用预编译语言。如：scss。