前提:很多时候、我们的网页都需要一个垂直的导航栏、可以分类、有分类、自然就有展开、关闭的功能、你还在使用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/

巧妙使用checkbox制作纯css动态导航栏的更多相关文章

  1. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

  3. 动态导航栏和JavaScript箭头函数

    动态导航栏和JavaScript箭头函数 今天我们来写一下动态的导航栏,并且学一下JavaScript的箭头函数等相关问题. 样式如下所示: html中执行代码如下所示: <!DOCTYPE h ...

  4. 使用checkbox实现纯CSS下拉框

    在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...

  5. less可以做什么?less详解!(less嵌套选择器实现纯CSS二级导航)

    前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言 ...

  6. CSS实现导航栏底部动态滚动条效果

    预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...

  7. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

  8. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

  9. android布局学习-使用FrameLayout和LinearLayout制作QQ空间底部导航栏

    [声明:本博客通过学习“J灬叶小超 ”博客而写,链接:http://www.cnblogs.com/yc-755909659/p/4288260.html] --------------------- ...

随机推荐

  1. MmSystem播放Wav格式声音

    //MmSystem播放Wav格式声音 //MmSystem 支持 *.wav声音格式 snd ->SoundRecorderuses MmSystem; //引用MmSystem//播放系统声 ...

  2. Ledongli

    Ledongli.rar

  3. sphinx中过滤的简单介绍

    1.过滤字符串为空的一些记录的话,可以在sql_query中直接加上where来限制,如: sql_query  = \  SELECT a.location_id as id,a.location_ ...

  4. UpdatePanel的用法

    UpdatePanel控件也是Ajax里用得最多的控件之中的一个,UpdatePanel控件是用来局部更新网页上的内容,网页上要局部更新的内容必须放在UpdatePanel控件里,他必须和上一次说的S ...

  5. 进程关系之tcgetpgrp、tcsetpgrp和tcgetsid函数

    需要有一种方法来通知内核哪一个进程组是前台进程组,这样,终端设备驱动程序就能了解将终端输入和终端产生的信号送到何处. #include <unistd.h> pid_t tcgetpgrp ...

  6. Android_AutoCompleteTextView,MultiAutoCompleteTextView

    XML布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:an ...

  7. 关于git的打patch的功能

    UNIX世界的软件开发大多都是协作式的,因此,Patch(补丁)是一个相当重要的东西,因为几乎所有的大型UNIX项目的普通贡献者,都是通过 Patch来提交代码的.作为最重要的开源项目之一,Linux ...

  8. Flash cs6 帧上的菱形原来是关键帧

    假如需要删除这个关键帧,选中它,然后右键,"清除关键帧",相应的类型即可. 因为之前学了一点点Flash,没见过帧上面这个菱形图标,才知道是关键帧.

  9. C#根据WSDL文件生成WebService服务端代码

    转自:http://www.cnblogs.com/liyi93/archive/2012/01/30/2332320.html 虽然现在已经进入了.NET FrameWork 4.0的时代,WebS ...

  10. Hadoop MapReduceV2(Yarn) 框架简介

    http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-yarn/ 对于业界的大数据存储及分布式处理系统来说,Hadoop 是耳熟能详 ...