scss SCSS - 移动菜单

Posted 2021-05-18

/* Mobile Menu */

$spanheight: 4px;
$margin: 5px;
$spans: 3;
$font: 'bignoodle';


.mobile-menu-icon { 
	span {
	    background: #fff;
	    display: block;
	    opacity:1;
	    transition:all 0.2s linear;
	    -webkit-transition:all 0.2s linear;
	    margin-bottom: $margin;
	    position:relative;
	    width: 100%;
	    height: $spanheight;
	    background: #fff;
	    &:hover {
		    background:#ddd;
	    }
		.span2 {
			transition:all 0.05s linear;
			-webkit-transition:all 0.05s linear;
		}
	}    
}

.show-mobile-menu .mobile-menu-icon {
	margin-right: 5px;
	width: 40px;
	float: right;
}

.mobile-menu-icon.fixed {
	span:first-child {
	    transform: rotate(45deg) ;
	    -webkit-transform: rotate(45deg) ;
	    -moz-transform: rotate(45deg) ;
	    -o-transform: rotate(45deg) ;
	    -ms-transform: rotate(45deg) ;
	    opacity:1;
	    top:$spanheight + $margin;
		span {
			opacity:0;
		}
	}
	span:last-child {
		transform: rotate(-45deg) ;
		-webkit-transform:rotate(-45deg);
		-moz-transform: rotate(-45deg) ;
		-o-transform: rotate(-45deg) ;
		-ms-transform: rotate(-45deg) ;
		opacity:1;
		bottom:($spanheight + $margin) * ($spans - 2);
	}
}

.mobile-menu {
	position: fixed;
	top: -100%;
	width: 100%;
	height: 100%;
	background: #545454;
	z-index: 2;
	transition: .5s all;
	-webkit-transition: .5s all;
	overflow-y: scroll;
	ul {
		margin: 70px 0 0 0;
		padding: 0;
			li:first-of-type {
				display:none;
				visibility: hidden;
			}
			li {
			list-style: none;
			list-style-type: none;
			text-align: center;
			font-size: 100%;
			text-transform: uppercase;
			a {
				color:#fff;
				font-family: $font;
			}
		}
	}
}
.mobile-menu.active {
	top: 0%;
}