欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

移动端页面顶部菜单图标(3条横线)点击旋转

程序员文章站 2024-03-24 23:10:22
...

HTML中:

<button class="nav-mobile-button">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</button>

CSS中:

.nav-mobile-button{
	float: right; 
	padding: 9px 10px; 
	margin-top: 8px; 
	margin-right: 15px; 
	background-color: transparent; 
	border: 1px solid transparent; 
	outline: none;
}
.nav-mobile-button .icon-bar{
	display: block; 
	margin-top: 4px; 
	width: 22px; 
	height: 3px; 
	background: #f65d3f; 
	border-radius: 1px;
}
.rotate{
	transform-origin:center center; /*旋转中心要是正中间才行*/
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transition: transform 0.2s; 	/*过度时间 可调*/
	-webkit-transition: -webkit-transform 0.2s; 
	-moz-transition: -moz-transform 0.2s; 
	-ms-transition: -ms-transform 0.2s;
	-o-transition: -o-transform 0.2s; 
}
.rotate1{
	transform-origin:center center;
	transform: rotate(0deg);		/*返回原点*/
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transition: transform 0.2s; 
	-webkit-transition: -webkit-transform 0.2s; 
	-moz-transition: -moz-transform 0.2s; 
	-ms-transition: -ms-transform 0.2s; 
	-o-transition: -o-transform 0.2s; 
}

jQuery中:

<script>
    $(function(){
        //点击顶部菜单图标旋转90°效果
        $('.nav-mobile-button').click(function(){
            if($('#left').is(':visible')){                  //若左侧菜单栏可见,则
                $(this).removeClass('rotate');
                $(this).addClass('rotate1');
                $('#left').css("display", "none");
            }else{
                $(this).removeClass('rotate1');
                $(this).addClass('rotate');
                $('#left').css("display", "block");
            }
        });
    });
</script>
相关标签: transform