切换CSS实现伸展菜单效果

最新推荐文章于 2024-04-17 17:17:27 发布

羽筠

最新推荐文章于 2024-04-17 17:17:27 发布

阅读量1.7k

点赞数

分类专栏： HTML + CSS + JS HTML5

本文链接：https://blog.csdn.net/qq_16494241/article/details/50630645

版权

HTML5 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

HTML + CSS + JS

40 篇文章 2 订阅

订阅专栏

切换CSS实现伸展菜单效果

效果截图

资源

CSS样式

@charset "utf-8";
@media screen and (min-width:320px) and (max-width:359px){html{font-size:12px;}body{ font-size:1.2rem;}}
@media screen and (min-width:360px) and (max-width:374px){html{font-size:13.5px;}}
@media screen and (min-width:375px) and (max-width:383px){html{font-size:14.07px;}}
@media screen and (min-width:384px) and (max-width:392px){html{font-size:14.38px;}}
@media screen and (min-width:393px) and (max-width:410px){html{font-size:14.75px;}}
@media screen and (min-width:411px) and (max-width:413px){html{font-size:15.41px;}}
@media screen and (min-width:414px) and (max-width:479px){html{font-size:15.52px;}}
@media screen and (min-width:480px) and (max-width:511px){html{font-size:18px;}}
@media screen and (min-width:512px) and (max-width:639px){html{font-size:19.19px;}}
@media screen and (min-width:640px){html{font-size:24px;}}
*{ margin:0px; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ min-width:320px; max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; color:#666; line-height:2rem;}
/*菜单*/
.shop_add_menu{ width:3.6rem; height:3.6rem; border-radius:50%; cursor:pointer; position:fixed; right:2.2rem; bottom:2rem;}
/*菜单项*/
.shop_add_menu_index ,
.shop_add_menu_quan ,
.shop_add_menu_user ,
.shop_add_menu_top{ display:block; width:3rem; height:3rem; line-height:2.6rem; text-align:center; border-radius:50%; box-sizing:border-box; border:#2693FE solid 2px; background-color:#fff; position:absolute;
					-webkit-box-shadow:1px 6px 15px rgba(0,0,0,.15);
					box-shadow:1px 6px 15px rgba(0,0,0,.15);
}
.shop_add_menu_index ,
.shop_add_menu_quan ,
.shop_add_menu_user{ left:50%; margin-left:-1.5rem; top:50%; margin-top:-1.5rem;
					-webkit-transition:all .3s ease-in-out;
					transition:all .3s ease-in-out;
}
.shop_add_menu_top{ width:3.6rem; height:3.6rem; line-height:3.2rem; left:0; top:0;}
.shop_add_menu_index_transition{ -webkit-transform:translateY(-370%); transform:translateY(-370%);}
.shop_add_menu_quan_transition{ -webkit-transform:translateY(-250%); transform:translateY(-250%);}
.shop_add_menu_user_transition{ -webkit-transform:translateY(-130%); transform:translateY(-130%);}
/*提醒指示*/
.shop_add_menu_msg{ width:0.66rem; height:0.66rem; border-radius:50%; background-color:#FF1414; position:absolute; top:0; right:-0.66rem; display:none;}
.shop_add_menu_quan span{ display:block; width:1rem; height:1rem; line-height:1rem; font-size:0.6rem; color:#fff; border-radius:50%; background-color:#FF1414; position:absolute; right:-0.4rem; top:0; display:none;}
/*菜单图标*/
.shop_add_menu_index:before ,
.shop_add_menu_quan:before ,
.shop_add_menu_user:before ,
.shop_add_menu_top:before{ content:""; display: inline-block; width:2rem; height:2rem; vertical-align:middle; background:url(../images/shop_add_menu.png) no-repeat; background-size:8rem;}
.shop_add_menu_index:before{ background-position:0 0;}
.shop_add_menu_quan:before{ background-position:-2rem 0;}
.shop_add_menu_user:before{ background-position:-4rem 0;}
.shop_add_menu_top:before{ background-position:-6rem 0;}

HTML代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<title>伸展菜单</title>
<link rel="stylesheet" href="public/css/css.css" type="text/css" />
<script type="text/javascript" src="public/js/jquery2.1.js"></script>
</head>

<body>


<div class="shop_add_menu">
	<a href="#" class="shop_add_menu_index"></a>
	<a href="#" class="shop_add_menu_quan"><span>1</span></a>
	<a href="#" class="shop_add_menu_user"></a>
	<div class="shop_add_menu_top"></div>
    <span class="shop_add_menu_msg"></span>
</div>




<script type="text/javascript">
	var shop_add_menu_msg =  parseInt($('.shop_add_menu_quan span').html());
	if(shop_add_menu_msg){
		$('.shop_add_menu_msg').show();
	}
	$('.shop_add_menu').click(function(){
		$('.shop_add_menu_index').toggleClass('shop_add_menu_index_transition');
		$('.shop_add_menu_quan').toggleClass('shop_add_menu_quan_transition');
		$('.shop_add_menu_user').toggleClass('shop_add_menu_user_transition');
		if(shop_add_menu_msg){
			$('.shop_add_menu_msg , .shop_add_menu_quan span').toggle();
		}
	});
</script>
</body>
</html>