<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<style type="text/css">

ul,li{list-style: none;}

*{padding: 0; margin: 0;}

.nav-con{display: none;}

.nav-box{display: none;}

.nav-con:checked ~ .nav-box{display: block;}

.nav-btn{padding: 10px 15px;background:red;}

</style>

<body>

<label for="control" class="nav-btn">菜单</label>

<div>

    <input type="checkbox" name="" id="control" class="nav-con">

    <ul class="nav-box">

        <li><a href="#">首页</a></li>

        <li><a href="#">联系我们</a></li>

        <li><a href="#">产品</a></li>

        <li><a href="#">新闻</a></li>

    </ul>

</div>

</body>

</html>

css---点击显示和隐藏的更多相关文章

  1. js如何实现点击显示和隐藏表格

    js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...

  2. CSS元素的显示与隐藏

    CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...

  3. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. [CSS]元素的显示与隐藏

    摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...

  5. CSS——元素的显示与隐藏

    元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的是让一个元素在页面中消失,但是不在文档 ...

  6. css中实现显示和隐藏（转）

    CSS中的display和visibility      在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...

  7. JQuery采纳CSS实现DOM显示和隐藏要素

    今天参加了Code Review活动.阅读编写代码的同事,感到满足当前功能的实现,但是从长远来看,,无论角度还是从代码重用是来看显然不佳维修点. 有什么需要看的权利.通过选择不同的选项下拉框需求,为了 ...

  8. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  9. vueJS简单的点击显示与隐藏的效果

    目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性, ...

  10. 一款js点击显示和隐藏的例子（pc，移动端通用）

    html部分: <div id="box"> <div id="box_title">标题</div> <div id ...

随机推荐

  1. Miscellaneos：ISV

    ylbtech-Miscellaneos:ISV ISV英文全称是Independent Software Vendors ,意为“独立软件开发商”,特指专门从事软件的开发.生产.销售和服务的企业,如 ...

  2. vscode下调试caffe源码

    caffe目录: ├── build -> .build_release // make生成目录,生成各种可执行bin文件,直接调用入口: ├── cmake ├── CMakeLists.tx ...

  3. 【VSCode】Windows下VSCode便携式c/c++环境

    http://blog.csdn.net/c_duoduo/article/details/52083494 Ver 1.1 完整版(修复mingw环境变量错误)下载: http://pan.baid ...

  4. ui-router 1.0 002 未登录跳转到login

    ui-router transitionhooks 统一控制路由跳转, 前台控制如果没有登录就跳转到登录页面, 当然也可以在后台控制, 如果没有登录就返回对应的错误码, 然后在response中直接跳 ...

  5. Bullet物理引擎的安装与使用

    图形赋予游戏一种视觉的吸引力,但是能够让游戏的世界鲜活起来的还应该是内部的物理引擎.物理引擎是游戏引擎中的子模块,是一种软件组件,可仿真物理系统.它根据牛顿力学定律,计算游戏中物体的合理的物理位置,并 ...

  6. 【C#】C#中的属性与字段

    目录结构: contents structure [+] 属性和字段的区别 无参属性 自动实现的属性 对象和集合初始化器 匿名类型 System.Tuple类型 有参属性 属性的可访问性 在这篇文章中 ...

  7. Swift Defer 延迟调用

    1.Defer 在一些语言中,有 try/finally 这样的控制语句,比如 Java.这种语句可以让我们在 finally 代码块中执行必须要执行的代码,不管之前怎样的兴风作浪.在 Swift 2 ...

  8. logstash数据处理示例

    #test {"time":1504752032399,"date":"2017-09-08 12:00:00","str&quo ...

  9. ASP.NET Web API(MVC API)

    ASP.NET Web API是​​一个框架,可以很容易构建达成了广泛的HTTP服务客户端,包括浏览器和移动设备.是构建RESTful应用程序的理想平台的.NET框架. 上面是微软对Web API给出 ...

  10. SNFAutoupdater通用自动升级组件V2.0

    1.组件介绍 C/S构的特点是能充分发挥客户端的处理能力,很多工作可以由客户端处理后再提交给服务器,对应的优点就是客户端响应速度快模式客户端以其强大的功能,丰富的表现力受到相当大部分用户的青睐,但是客 ...