横向箭头菜单

最新推荐文章于 2019-12-27 14:10:25 发布

dongsdh

最新推荐文章于 2019-12-27 14:10:25 发布

阅读量553

点赞数

分类专栏： html css 微码

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

版权

css 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

微码

17 篇文章 0 订阅

订阅专栏

前言：横向箭头菜单

<!DOCTYPE HTML>  
<html lang="en-US">  
<head>  
    <meta charset="UTF-8">  
    <title>menu</title>  
    <style type="text/css">  
    	*{margin: 0;padding: 0;}
    	i{font-style: normal;}
        html, body, div{  
            margin: 0;  
            padding: 0;  
        }  
        .menus{  
        	margin: 20px;
        	font-size: 0;
            border-left:1px solid #1A65FF;
        }  
        .menus p{  
            display: inline-block; 
            height: 32px;  
            margin: 0 -15px 0 0;
            padding: 0 15px 0 0;
            background: url(menus2.png) no-repeat right 0;  
            background-size: auto 100%;
            color: #1A65FF;  
            font-size: 12px;  
            line-height: 32px;  
            text-decoration: none;  
            box-sizing: border-box;
            cursor: pointer;
            
        }  
        .menus p span{  
               display: inline-block;
			    padding: 0 8px 0 20px;
			    border-top: 1px solid #1A65FF;
			    border-bottom: 1px solid #1A65FF;
			    height: 32px;
			    line-height: 32px;
			    box-sizing: border-box;
        }
        .menus p.home span{
        	padding-left: 10px;
        }  
        .menus p span i{
        	display: inline-block;
		    width: 20px;
		    height: 20px;
		    line-height: 20px;
		    background: #fff;
		    border-radius: 50%;
		    text-align: center;
        }
        .menus p span b{
        }
        .menus p.act{
        	background: url(menus1.png) no-repeat 100% 0;  
        	background-size: auto 100%;
            color: #fff;  
        }
         .menus p.act span{
         	background: #1A65FF url(menus2.png) no-repeat left 0;
    		background-size: auto 100%;
         }
          .menus p.act b{
          	color: #fff;
          	margin-left:4px;
          }
         .menus p.act span i{
         	color:#1A65FF;
         }
          .menus p.act2 span{
          	background: #1A65FF;  
          }
    </style>  
</head>  
<body>  
    <div class="menus">  
        <p val="1" class="home" href="#"><span><i>1</i><b>预规划</b></span></p>  
        <p href="#"><span><i>2</i><b>预规划</b></span></p>  
        <p href="#"><span><i>3</i><b>预规划</b></span></p>  
    </div>  
    <script src="jquery.min.js"></script>
    <script>
    	$(".menus").on("click","p",function(e){
    		e.preventDefault(); 
    		console.log(11);
    		var val = $(this).attr('val')
    		if(val == 1){
    			$(this).addClass('act').siblings().removeClass("act");
    			$(this).addClass('act2').siblings().removeClass("act2");
    		}else{
    			$(this).siblings().removeClass("act2");
    			$(this).addClass('act').siblings().removeClass("act");
    		}
    	})
    </script>
</body>  
</html>

默认效果与选中效果的切换要主要第一项选中时多了个act2，是为了让这个选中项背景色铺满

是否选中效果

dongsdh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
横向箭头菜单

前言：横向箭头菜单<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>menu</title> <style type="text/css"> *{margi...
复制链接

扫一扫