前提:很多时候、我们的网页都需要一个垂直的导航栏、可以分类、有分类、自然就有展开、关闭的功能、你还在使用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. [Practical Git] Show who changed a line last with git blame

    When working on a file, we often want to know who made certain changes last; we can use git blame to ...

  2. firefly的rpc。。

    firefly使用了twisted的pb 来实现rpc: http://twistedmatrix.com/documents/current/core/howto/pb-usage.html 服务端 ...

  3. js 数组排序要注意的问题,返回的值最好为 -1, 0, 1之间的值

    var test10Elements = [7, 6, 5, 4, 3, 2, 1, 0, 8, 9]; var comparefn = function (x, y) { return x - y; ...

  4. DOS 命令 attrib:修改文件属性

    有时候系统中病毒之后会把自己的所有文件的属性改为隐藏只读格式,如果手动修改的话太麻烦并且浪费时间,不如用 Attrib 命令试试. 步骤: 1:开始->运行,在里面输入 cmd,打开命令行界面: ...

  5. windows7怎么共享文件夹

    http://jingyan.baidu.com/article/d45ad148f06fef69552b80e6.html

  6. AT-Fragment

    关于Fragment的粗略翻译 英文版api地址:Fragment(自备梯子) Fragment    类概述(Class Overview):        Fragment是一种可以替换Activ ...

  7. PHP代码实现MySQL读写分离

    关于MySQL的读写分离有几种方法:中间件,Mysql驱动层,代码控制 关于中间件和Mysql驱动层实现Mysql读写分离的方法,今天暂不做研究, 这里主要写一点简单的代码来实现由PHP代码控制MyS ...

  8. table tr分离并加圆角和阴影

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. hadoop的相关资料链接

    hadoop的资料整理博客 http://www.itpub.net/thread-1588509-1-1.html

  10. struts2的action从request获取参数值的几种方式

    使用jquery框架的ajax能够方便的向后台传递参数,以$.post为例,参数有2种方式字符串和键值对:$.post(url, "name=aty&age=25")和$. ...