横向箭头菜单

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,是为了让这个选中项背景色铺满


是否选中效果

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值