一、原理:

使用label与input来实现，label和复选框是有关联的,label的for属性对应的是input的id,所以点击label时,它就会勾选或取消复选框。

如果我们需要让菜单默认显示,只需要将input的checked属性设为true即可。

因为用到了css3的：checked属性，因此只适用于IE9+浏览器。

label可以设置为display：block，从而可以实现在里面实现换行等块级元素的需求。

二、代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>只用css3实现menu的toggle效果</title>
  6.     <style>
  7.         .wrap{
  8.             width:400px;
  9.             margin:50px auto 0;
  10.         }
  11.         label {
  12.             cursor: pointer;
  13.             font-size: 14px;
  14.             padding:10px;
  15.             border:1px solid #00A000;
  16.         }
  17.         #menu-toggle {
  18.             display: none; /* hide the checkbox */
  19.         }
  20.         #menu {
  21.             display: none;
  22.             list-style: none;
  23.             width:200px;
  24.             border:1px solid #00a0e9;
  25.         }
  26.         #menu li{
  27.             margin: 10px 0;
  28.         }
  29.         #menu li a{
  30.             text-decoration: none;
  31.         }
  32.         #menu li a:active{
  33.             color:#00a5e0;
  34.         }
  35.         /*这句最关键*/
  36.         #menu-toggle:checked + #menu {
  37.             display: block;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="wrap">
  43.         <label for="menu-toggle">
  44.             点击显示隐藏菜单
  45.         </label>
  46.         <input type="checkbox" id="menu-toggle"/>
  47.         <ul id="menu">
  48.             <li><a href="http://www.baidu.com">First link</a></li>
  49.             <li><a href="#">Second link</a></li>
  50.             <li><a href="#">Third link</a></li>
  51.         </ul>
  52.     </div>
  53.     <p>适用于Chrome,FF,IE9+浏览器</p>
  54. </body>
  55. </html>

本文参考http://www.outofscope.com/css-only-menu-toggle-no-javascript-required/

只用css3实现菜单的toggle效果的更多相关文章

  1. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  2. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  3. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  4. 8款超酷实用的CSS3 Tab菜单集合

    1.CSS3华丽的Tab菜单 带小图标动画 之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活.今天我们要再来分享一款基于CSS3的 ...

  5. 大饱眼福 7款类型各异的CSS3实用菜单

    1.清新小图标的HTML5/CSS3侧边栏菜单 前我们分享过几款CSS3侧边栏菜单,像CSS3侧边栏菜单 带可爱的小图标菜单和CSS3侧边栏手风琴菜单,都非常不错.今天我们要分享的这款CSS3侧边栏菜 ...

  6. 简易版CSS3 Tab菜单 实用的Tab切换

    今天我们要来分享一款非常简易而又实用的CSS3 Tab菜单,Tab菜单没有非常华丽的动画,但是代码非常简洁易懂,也可以在大部分场合使用,因此也非常实用,如果你需要加入动画效果,也可以自己方便地修改这款 ...

  7. 简易CSS3 Tab菜单 Tab切换滑块动画

    今天要分享一款简易的CSS3 Tab菜单,这款Tab菜单在切换的时候内容块出现飞入飞出的动画效果,尽管看起来非常简单,但是你完全可以在上面定制自己喜欢的Tab菜单.前面也分享过一些Tab菜单,像CSS ...

  8. 打造简易可扩展的jQuery/CSS3 Tab菜单

    原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...

  9. 一款非常棒的纯CSS3 3D菜单演示及制作教程

    原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...

随机推荐

  1. 认识CoreData—初识CoreData

    http://www.cocoachina.com/ios/20160729/17245.html 这段时间公司一直比较忙,和组里小伙伴一起把公司项目按照之前逻辑重写了一下.由于项目比较大,还要兼顾之 ...

  2. js 获取当前年月日时分秒星期

    $("#aa").click(function () { var date = new Date(); this.year = date.getFullYear(); this.m ...

  3. ES6中const的用法

    const声明一个只读的常量.一旦声明,常量的值就不能改变.且const一旦声明变量,就必须立即初始化,不能留到以后赋值. const的作用域与let命令相同:只在声明所在的块级作用域内有效. con ...

  4. Silverlight日记：字符串装换成Path对象

    一,需要动态绑定Path <UserControl x:Class="Secom.Emx2.SL.Common.Controls.EleSafe.Ele.Line" xmln ...

  5. Python语言编写脚本时，对日期控件的处理方式

    对日期控件,日期控件的输入控一般是不能手动输入的:把readonly属性去掉就好 其实很简单,我们不去搞时间日期空间,我们把它当成一个普通的input框处理就好了! 但是,很多此类型input框都是禁 ...

  6. python-下拉框处理

    在自动化中python对下拉框的处理网上相对实例比较少,其它前辈写的教程中对下拉也仅仅是相对与教程来说的,比如下面: m=driver.find_element_by_id("Shippin ...

  7. kvm笔记

    1 virt-manager安装虚拟机无法使用键盘解决 今天远程用VNC登录服务器安装虚拟机,结果使用virt-manager安装虚拟机后在初始阶段无法使用键盘设置,这不雪崩了,后来来回试,找到了原因 ...

  8. 【启发式拆分】bzoj5200: [NWERC2017]Factor-Free Tree

    和bzoj4059: [Cerc2012]Non-boring sequences非常相似 Description 一棵Factor-Free Tree是指一棵有根二叉树,每个点包含一个正整数权值,且 ...

  9. python--以1-31的数字作为结尾的列表？论英文好的重要性!

    一.python基础教程第2板(修订版)[代码清单2-1]中有一段要求打印‘以1-31的数字作为结尾的列表’ 截取代码示例:endings =['st','nd','rd'] +17*['th'] + ...

  10. classpath、WEB-INF

    classpath是指 WEB-INF文件夹下的classes目录(war包),对于springboot项目打包出来的jar包,里面的就是BOOT-INF: 这个demo的源码结构如下: 可见,jav ...