一、原理:

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

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

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

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

二、代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>只用css3实现menu的toggle效果</title>

    <style>

        .wrap{

            width:400px;

            margin:50px auto 0;

        }

        label {

            cursor: pointer;

            font-size: 14px;

            padding:10px;

            border:1px solid #00A000;

        }

        #menu-toggle {

            display: none; /* hide the checkbox */

        }

        #menu {

            display: none;

            list-style: none;

            width:200px;

            border:1px solid #00a0e9;

        }

        #menu li{

            margin: 10px 0;

        }

        #menu li a{

            text-decoration: none;

        }

        #menu li a:active{

            color:#00a5e0;

        }

        /*这句最关键*/

        #menu-toggle:checked + #menu {

            display: block;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <label for="menu-toggle">

            点击显示隐藏菜单

        </label>

        <input type="checkbox" id="menu-toggle"/>

        <ul id="menu">

            <li><a href="http://www.baidu.com">First link</a></li>

            <li><a href="#">Second link</a></li>

            <li><a href="#">Third link</a></li>

        </ul>

    </div>

    <p>适用于Chrome,FF,IE9+浏览器</p>

</body>

</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. UVA 12905 Volume of Revolution （几何，微积分）

    题意:分段用椎台面积近似计算体积,然后计算出近似值和真实值的相对误差 微积分加数学. 平头椎台的体积计算公式: V = 1/3*h*(S1+S2*sqrt(S1*S2) 一个更快的计算多项式值的方法: ...

  2. CAD控件的鼠标事件（网页版）

    _DMxDrawXEvents::MouseEvent CAD控件中的鼠标事件. 参数 说明 LONG lType 事件类型,1鼠标移动,2是鼠标左键按下,3是鼠标右键按下,4是鼠标左键双击 5是鼠标 ...

  3. stixel world论文总结

    1.The Stixel World - A Compact Medium Level Representation of the 3D-World:http://pdfs.semanticschol ...

  4. Java替换手机号掩码

    String tel = "18304072984"; // 括号表示组,被替换的部分$n表示第n组的内容 tel = tel.replaceAll("(\\d{3})\ ...

  5. 用C#(ASP.Net)在Exchange Server环境下发送邮件

    普通的邮件, 用System.Net.Mail 类 或 System.Web.Mail 类 处理即可, 但是Exchange Server 环境下, 这两个类起不了作用-------至少目前我看到的情 ...

  6. Bootstrap历练实例：默认的Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  7. vmware虚拟机安装Windows 7后虚拟机自动挂起

    vmware虚拟机安装windows7后在一段时间中没有操作,虚拟机会自动挂起,是因为windows7中的设置的自动睡眠,打开[控制面板]=>[电源选项]=>[选择关闭显示器时间]将下面两 ...

  8. MySQL写delete语句时不支持表别名

    今天写代码时发现了下面一个比较奇怪的问题: 有下面的删除数据的SQL ; 这个sql本来没有问题,但是在MySQL中执行时会报错 ; 原因是 MySQL写delete语句时不支持表别名,困扰了我一会儿 ...

  9. 局域网映射到公网-natapp实现

    在开发时可能会有这样的需求: 需要将自己开发的机器上的应用提供到公网上进行访问,但是并不想通过注册域名.搭建服务器等等一系列繁琐的操作来实现. 例如:微信公众号的开发调试就需要用到域名访问本机项目. ...

  10. yagmail 邮箱的使用

    文章来源:GITHub:https://github.com/kootenpv/yagmail 安装 pip3 install yagmail pip3 install keyring 简单例子 im ...