用纯css3写导航目录

       一般导航会有二级目录，二级目录的展开或者隐藏需要用到鼠标点击事件的监听，所以一般我们会用js写，但如果你还在写html css js或者是jQuery这种三合一的又大又长的项目，那么css能做到的就尽量不要用js写，�这能大大的优化代码

所以今天要教大家一个css的导航目录

先放一个效果图

1.png

然后发一下html

2.png

这里需要用到css3的input：checked

首先要用opacity：0让input隐藏并且设置宽高使input充满li，不然不能�触发checked


3.png

当然li下面的ul也要隐藏掉


4.png

然后是input得checked属性以及css3动画

5.png

最后还有一个hover的变换颜色

6.png

好了，大功告成，这样一个css的导航便做出来了,最后告诫大家一句：能用css写的就不要用js写！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1赞 92
  • Github_web_1
    一:在制作一个Web应用或Web站点的过程中，你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 4,997评论 0赞 1
  • 前端面试题及答案汇总
    请参看我github中的wiki，不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 12,063评论 2赞 19
  • 前端面试总结
    前端开发面试知识点大纲： HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：...
    秀才JaneBook阅读 7,462评论 0赞 25
  • 青春
    爱对了是爱情，爱错了是青春 十七八岁的年纪，趁着青春，伴随着荷尔蒙，总有那么些邂逅与错过。求而不得...
    欲语鱼阅读 2,047评论 0赞 1