面包屑导航的实现

这两天在项目中用到了面包屑导航栏；所以我自己又重新写了一个纯CSS实现的，当然绑定事件还是要靠js嘛。

上图是未点击状态下的导航栏

上面这些图是点击后的导航栏。

代码实例如下：

 有一个问题暂时没有想到什么好的方法解决，就是在未点击状态下的三角框不明显，基本看不到。不知道该怎么解决这个，让它看起来明显一些。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>面包屑导航</title>
		<style type="text/css">
			.navList{
				display:flex;
				list-style: none;
				
			}
			.navList li{
				    border: 1px solid #DDDDDD;
				    padding: 10px 20px;
				    position: relative;
			}
			.navList li:before,.navList li:after{
				    content: '';
				    position: absolute;
				    top: 0;
				    left: 100%;
				    z-index: 1;
				    display: block;				  
				    border-top: 18px solid transparent;
				    border-bottom: 18px solid transparent;
				    border-left: 18px solid #aaa;
			}
			.icon{
				display: inline-block;
				position: absolute;
			    top: 0;
			    left: 100%;
			    z-index: 1;
			    display: block;				  
			    border-top: 18px solid transparent;
			    border-bottom: 18px solid transparent;
			    border-left: 18px solid #FFFFFF !important;
			   
			}
			.iconActive{
				display: inline-block;
				position: absolute;
			    top: 0;
			    left: 100%;
			    z-index: 1000;
			    display: block;				  
			    border-top: 18px solid transparent;
			    border-bottom: 18px solid transparent;
				border-left: 18px solid #00BFFF !important;
				
			}
			.navList li:after{
				border-left: 18px solid #fff;				
			}
			.navList li:first-child:after{
				z-index: 102;
				
			}
			.navList li:nth-child(2):after{
				z-index:62;
			}
			.navList li:nth-child(3):after{
				z-index:52;
			}
			.navList li:nth-child(4):after{
				z-index:32;
			}
			
			.active{
				background: #00BFFF;
			}
			.navList li a{
				text-decoration: none;
				color:#000;
				position: relative;
			}
			
			
		</style>
	</head>
	<body >
		 <div class="nav">
		 	<ul class="navList">
		 		<li class="navList-item" style="z-index:100" >
		 			<a href="javascript:;" class="breadcrumb">第一页</a>
		 			<i class="icon"></i>
		 		</li>
		 		<li class="navList-item" style="z-index: 60;" >
		 			<a href="javascript:;" class="breadcrumb">第二页</a>
		 			<i class="icon"></i>
		 			
		 		</li>
		 		<li class="navList-item" style="z-index:50" >
		 			<a href="javascript:;" class="breadcrumb">第三页</a>
		 			<i class="icon"></i>
		 			
		 		</li>
		 		<li class="navList-item" style="z-index: 30;" >
		 			<a href="javascript:;" class="breadcrumb">第四页</a>
		 			<i class="icon"></i>
		 			
		 	</ul>
		 </div>
		 
		 <script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
		 <script type="text/javascript">
		 	$('.navList').on('click','li',function () {
		 		 var index = $(this).index();
		 		 $(this).addClass('active').siblings().removeClass('active');
		 		 
		 		 $(this).children('.icon').addClass('iconActive').parent().siblings().children('.icon').removeClass('iconActive')
		 	})
		 	
		 </script>
	</body>
</html>

　　

posted @ 2018-03-30 07:43  前端加油站  阅读(563)  评论(0)  编辑  收藏  举报