<!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. Spring Boot中CrudRepository与JpaRepository Dao中JpaRepository和JpaSpecificationExecutor查询

    原文地址  https://blog.csdn.net/xuemengrui12/article/details/80525227?utm_source=blogxgwz0 https://www.i ...

  2. C# System.Collections.SortedList

    using System; using System.Collections; public class SamplesSortedList { public static void Main() { ...

  3. MySql之游标的使用

    一:游标的使用场合 游标只能用于存储过程和函数中. 游标存储了检索语句的结果集,然后在存储过程和函数中可以通过游标来迭代访问结果集中的记录. 二:创建游标 CREATE PROCEDURE 存储过程名 ...

  4. pandas基础用法——索引

    # -*- coding: utf-8 -*- # Time : 2016/11/28 15:14 # Author : XiaoDeng # version : python3.5 # Softwa ...

  5. ASP.NET MVC 一款可预览、裁剪头像上传组件

    今天介绍一款Web上常用的头像上传组件,常用于头像上传时对用户上传的图片进行裁剪并实时预览,最终效果如下: 源代码结构: Github地址: https://github.com/FrankFan/A ...

  6. 深入理解Fsync

    1 介绍 数据库系统从诞生那天开始,就面对一个很棘手的问题,fsync的性能问题.组提交(group commit)就是为了解决fsync的问题.最近,遇到一个业务反映MySQL创建分区表很慢,仔细分 ...

  7. ④NuPlayer播放框架之Renderer源码分析

    [时间:2016-11] [状态:Open] [关键词:android,nuplayer,开源播放器,播放框架,渲染器,render] 0 导读 之前我们分析了NuPlayer的实现代码,本文将重点聚 ...

  8. windows_硬盘上设置虚拟内存

    1)在桌面上的“计算机”或“我的电脑”上右键->属性->高级->性能->设置->高级->虚拟内存->更改. 2)在虚拟内存更改页面,先选择在哪个磁盘上设置虚拟 ...

  9. 【30集iCore3_ADP出厂源代码(ARM部分)讲解视频】30-7底层驱动之滴嗒定时器

    视频简介:该视频介绍iCore3应用开发平台中的配置方法,以及在应用开发平台中的应用. 源视频包下载地址:链接:http://pan.baidu.com/s/1o7UuUwi 密码:14cx 银杏科技 ...

  10. 【Python】socket模块应用

    [Socket] 本文记录了一些socket模块的简单应用,对于具体原理还没来得及深究. ■ 利用socket模块进行端口连接验证和扫描 在linux中常用nc命令来进行远端端口是否开放的验证.但是这 ...