纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:

实现原理利用CSS伪类:target

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>纯CSS实现点击事件展现隐藏div菜单列表</title>
 6     <style>
 7         /*样式预设,可根据自身情况设定增删*/
 8         .l-btn{
 9             position: relative;
10             width: 1.875rem;
11             height: 1.875rem;
12         }
13         .l-btn>a:first-child,.l-btn>a:first-child+a{
14             width: 1.875rem;
15             height: 1.875rem;
16             line-height: 1.875rem;
17             text-align: center;
18             cursor: pointer;
19             text-decoration: none;
20         }
21         .l-btn>a:first-child+a+*{
22             position: absolute;
23             width: 20rem;
24             display: none;/*这个样式可以设置透明度、高度等进行变换,配合CSS3过渡,达到更美观的效果,这里仅做功能*/
25         }
26         
27         /*单独*/
28         .l-btn>a:first-child{
29             display: block;
30         }
31         .l-btn>a:first-child+a{
32             display: none;
33         }
34         /*-----为了方便理解,这里单独拿出来写,实际应用时可进行CSS分组合并----*/
35         .l-btn>a:first-child:target{
36             display: none;
37         }
38         .l-btn>a:first-child:target+a{
39             display: block;
40         }
41         .l-btn>a:first-child:target+a+*{
42             display: block;/*这里需要与上面设置的属性匹配*/
43         }
44     </style>
45 </head>
46 
47 <body>
48     <div class="l-btn">
49         <a href="#l-btn-a" id="l-btn-a"></a>
50         <a href="#l-btn-b" id="l-btn-b">X</a>
51         <div>我是菜单列表</div>
52     </div>
53 </body>
54 </html>

可以配合CSS3过渡做出很多不同的效果,具体不做详细演示

效果没有JS那么完美,毕竟地址栏会出现你的锚点信息,当然这是比较小的瑕疵,好处应该是轻量吧。。

另外使用:first-child(CSS2)作为选择器仅为了兼容更低版本的IE

猜你喜欢

转载自www.cnblogs.com/vanwee/p/10374606.html
0条评论
添加一条新回复