html 切换按钮菜单

Posted 2021-05-11

#toggle
  display: none
  width: 35px
  height: 21px
  padding: 9px 0
  margin: 0
  z-index: 102
  position: relative
  float: right
  span
    position: relative
    display: block
    width: 100%
    height: 3px
    background-color: #ffd800
    -webkit-transition: all 0.3s
    transition: all 0.3s
    -webkit-backface-visibility: hidden
    backface-visibility: hidden
    -webkit-border-radius: 2px
    border-radius: 2px
    &:after, &:before
      content: ""
      position: absolute
      left: 0
      top: -9px
    &:after
      top: 9px
      width: 100%
      height: 3px
      background-color: #ffd800
      -webkit-transition: all 0.3s
      transition: all 0.3s
      -webkit-backface-visibility: hidden
      backface-visibility: hidden
      -webkit-border-radius: 2px
      border-radius: 2px
    &:before
      width: 100%
      height: 3px
      background-color: #ffd800
      -webkit-transition: all 0.3s
      transition: all 0.3s
      -webkit-backface-visibility: hidden
      backface-visibility: hidden
      -webkit-border-radius: 2px
      border-radius: 2px
  &.on
    span
      background-color: transparent
      &:before
        background-color: #fff
        -webkit-transform: rotate(45deg) translate(6px, 6px)
        -ms-transform: rotate(45deg) translate(6px, 6px)
        transform: rotate(45deg) translate(6px, 6px)
      &:after
        background-color: #fff
        -webkit-transform: rotate(-45deg) translate(6px, -7px)
        -ms-transform: rotate(-45deg) translate(6px, -7px)
        transform: rotate(-45deg) translate(6px, -7px)
    + #menu
      opacity: 1
      visibility: visible
      -webkit-transition: opacity .4s
      transition: opacity .4s
      z-index: 101

/* on activation */

@media only screen and (max-width: 992px)
  #toggle
    display: block
  #menu
    position: fixed
    width: 100vw
    min-height: 100vh
    top: 0
    bottom: 0
    left: 0
    right: 0
    text-align: center
    background-color: rgba(44, 45, 54, 0.85)
    opacity: 0
    visibility: hidden
    -webkit-transition: opacity .4s
    transition: opacity .4s
    z-index: -1
    display: -webkit-box
    display: -webkit-flex
    display: -ms-flexbox
    display: flex
    -webkit-box-orient: vertical
    -webkit-box-direction: normal
    -webkit-flex-direction: column
    -ms-flex-direction: column
    flex-direction: column
    -webkit-box-pack: center
    -webkit-justify-content: center
    -ms-flex-pack: center
    justify-content: center
    -webkit-align-content: center
    -ms-flex-line-pack: center
    align-content: center
    -webkit-box-align: center
    -webkit-align-items: center
    -ms-flex-align: center
    align-items: center
    text-align: center

#toggle {
	display: none;
	width: 35px;
	height: 21px;
	padding: 9px 0;
	margin: 0;
	z-index: 102;
	position: relative;
	float: right;
}
#toggle span {
	position: relative;
	display: block;
	width: 100%;
	height: 3px;
	background-color: #ffd800;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
#toggle span:after,
#toggle span:before {
	content: "";
	position: absolute;
	left: 0;
	top: -9px;
}
#toggle span:after {
	top: 9px;
	width: 100%;
	height: 3px;
	background-color: #ffd800;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
#toggle span:before {
	width: 100%;
	height: 3px;
	background-color: #ffd800;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

/* on activation */
#toggle.on span {
	background-color: transparent;
}
#toggle.on span:before {
	background-color: #fff;
	-webkit-transform: rotate(45deg) translate(6px, 6px);
	-ms-transform: rotate(45deg) translate(6px, 6px);
	transform: rotate(45deg) translate(6px, 6px);
}
#toggle.on span:after {
	background-color: #fff;
	-webkit-transform: rotate(-45deg) translate(6px, -7px);
	-ms-transform: rotate(-45deg) translate(6px, -7px);
	transform: rotate(-45deg) translate(6px, -7px);
}

#toggle.on + #menu {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity .4s;
	transition: opacity .4s;
	z-index: 101;
}
@media only screen and (max-width: 992px) {
	#toggle {
		display: block;
	}
	#menu {
		position: fixed;
		width: 100vw;
		min-height: 100vh;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		background-color: rgba(44, 45, 54, 0.85);
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity .4s;
		transition: opacity .4s;
		z-index: -1;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-content: center;
		-ms-flex-line-pack: center;
		align-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		text-align: center;
	}
}

$(document).ready(function($) {
	$(".toggle").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("on");
	});
});

<a href="#menu" id="toggle" class="toggle"><span></span></a>
<nav id="menu" class="menu">
	<ul>
		<li><a href="/">Menu item 1</a></li>
		<li><a href="/">Menu item 2</a></li>
		<li><a href="/">Menu item 3</a></li>
	</ul>
</nav>