巧妙使用checkbox制作纯css动态导航栏

最新推荐文章于 2021-06-03 09:11:28 发布

转载最新推荐文章于 2021-06-03 09:11:28 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Miss-mickey/p/5751343.html

文章标签：

#javascript #git #ViewUI

本文介绍了一种不依赖jQuery的导航栏制作方法，利用CSS3的特性通过checkbox的checked属性实现导航栏的展开与关闭功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：很多时候、我们的网页都需要一个垂直的导航栏、可以分类、有分类、自然就有展开、关闭的功能、你还在使用jquery操作dom来制作吗？那你就out了！

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

结果：

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

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

<div class="nav-child">
     <input type="checkbox" id="nav01"/>
         <label for="nav01">
             <svg>图标</svg>
              交通出行
              <span class="choice-box">
　　　　　　　　　　　　<svg>图标</svg>
              </span>
         </label>
          <div class="nav-item">
               <ul>
                  <li>动车</li>
                  <li>违章</li>
                  <li>机票</li>
                  </ul>
          </div>
</div>

接下来我选用 less

.nav-child{
      input[type='checkbox']:checked{
        +label{
          .choice-box{
            svg{
              transform: rotate(-90deg);
              transition: all 0.3s;
            }
          }
        }
        ~.nav-item{
          display: none;
        }
      }
    }

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

说明：

css3选择器：

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

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

有兴趣的可以看我的源码查看完整代码~ 洗洗睡睡敷面膜啦

转载请注明出处 http://www.cnblogs.com/Miss-mickey/

转载于:https://www.cnblogs.com/Miss-mickey/p/5751343.html