css怎么实现动态导航栏

本篇内容介绍了“css怎么实现动态导航栏 ”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

方案：使用checkbox 的 checked 属性、巧妙地制作导航栏

结果：

我们主要制作成这样这样的的导航栏：

首先、我们写出相对的html  由于时间问题、svg没有处理到类中、所以这里给出svg的空标签、大家如果想看效果、可以到我的git里面fork一份

CSS Code复制内容到剪贴板

1. <div class="nav-child">   

2.      <input type="checkbox" id="nav01"/>   

3.          <label for="nav01">             <svg>图标</svg>   

4.               交通出行   

5.               <span class="choice-box">　　　　　　　　　　　　<svg>图标</svg>   

6.               </span>   

7.          </label>   

8.           <div class="nav-item">   

9.                <ul>   

10.                   <li>动车</li>   

11.                   <li>违章</li>   

12.                   <li>机票</li>   

13.                   </ul>   

14.           </div>   

15. </div>   

接下来我选用 less

CSS Code复制内容到剪贴板

1. .nav-child{   

2.       input[type='checkbox']:checked{   

3.         +label{   

4.           .choice-box{   

5.             svg{   

6.               transform: rotate(-90deg);   

7.               transition: all 0.3s;   

8.             }   

9.           }   

10.         }   

11.         ~.nav-item{   

12.           display: none;   

13.         }   

14.       }   

15.     }   

编译之后生成css 就大功告成啦！！！

说明：

css3选择器：

+ 代表选择元素紧邻的元素

~ 代表选择元素同级的元素

“css怎么实现动态导航栏 ”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！