纯css的梯形菜单

最新推荐文章于 2024-08-12 11:42:27 发布

dongsdh

最新推荐文章于 2024-08-12 11:42:27 发布

阅读量347

点赞数

分类专栏：菜单

本文链接：https://blog.csdn.net/dongsdh/article/details/86222186

版权

菜单专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：

选中后的z-index添加!important;设置成最高权限，覆盖生成的内联样式

<html>

	<head>
		<meta charset="utf-8">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.barbox{
				margin: 20px;
				position: relative;
				height: 22px;
			}
			.barbox p{
				position: absolute;
				top: 0;
				left: 0;
				display: inline-block;
				border: 1px solid red;
				width: 65px;
				transform:  perspective(.8em) rotateX(4deg);
				border-bottom: 0;
				padding: 0px 10px;
				text-align: center;
				background: #fff;
				cursor: pointer;
				    border-radius: 3px 3px 0 0;
			}
			.barbox p.act{
				border-color: #0000FF;
				color: #0000FF;
				z-index: 20 !important;
			}
			/*导航3-当宽度变化的时候*/
			.barbox3 p{
				width: 46px;
			}
		</style>
	</head>

	<body>
		<div class="barbox showbar1">
			<p class="act">语文</p><p>数学</p><p>语文自习</p><p>体育</p>
		</div>
		<div class="barbox showbar2">
			<p class="act">语文</p><p>数学</p><p>数学</p><p>语文自习</p><p>体育</p>
		</div>
		<div class="barbox barbox3  showbar3">
			<p class="act">语文</p><p>数学</p><p>数学</p><p>语文</p><p>体育</p>
		</div>
		
		<script src="jquery.min.js"></script>
		<script>
			function SDHmenuinit(_this){
				var objlen=$(_this).length;
				$(_this).each(function(){
					var i=$(this).index(),w=$(this).width();
					var left=i*(w+22);
					var z=objlen--;
					$(this).css({'left':left,'z-index':z})
				})
			}
			
			SDHmenuinit($(".showbar1 p"));
			SDHmenuinit($(".showbar2 p"));
			SDHmenuinit($(".showbar3 p"));
			$(".barbox").on("click","p",function(){
			  $(this).addClass("act").siblings().removeClass("act");
			})
		</script>
	</body>

</html>

效果：