纯css制作的一个可折叠的(accordion )菜单
时间:2016-07-30
可折叠菜单在WEB网站开发中经常要使用到,折叠菜单可以使用JS来实现,也可以使用纯css来实现,本文章向大家介绍纯css如何制作手风琴菜单,需要的朋友可以参考一下。
纯css折叠的菜单源代码如下:
<!DOCTYPE html>
<html>
<title>http://www.manongjc.com/article/1274.html </title>
<head>
<style type='text/css'>
nav a {
display: block;
}
summary {
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
</style>
</head>
<body>
<details>
<summary>Heading #1</summary>
<nav>
<a href="#">Link A</a> <a href="#">Link B</a> <a href="#">Link C</a>
</nav>
</details>
</body>
</html>
- 预处理素数(个人模版)
- Cnm%(个人模版)
- Selenium2+python自动化33-文件上传(send_keys)
- hive的partition的作用和使用方法
- 线段树,最大值查询位子(个人模版)
- set使用实例1+lower_bound(val)(个人模版)
- Selenium2+python自动化29-js处理多窗口
- 谷歌「机弦」有何玄机?
- 01字典树贪心查询+建立+删除(个人模版)
- 优先队列(个人模版)
- Numpy教程第2部分 - 数据分析的重要功能
- 最小表示法(个人模版)
- 基于Python-ChatterBot搭建不同adapter的聊天机器人(使用NB进行场景分类)
- 并查集(个人模版)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- @EnableDiscoveryClient 注解如何实现服务注册与发现
- idea连接docker实现一键部署
- redis的过期策略和内存淘汰机制
- Redis主从复制原理总结
- redis cluster 的核心原理分析:gossip 通信、jedis smart 定位、主备切换
- SpringBoot自动装配原理解析
- 什么是CICD?
- Zabbix 5.0 LTS新功能一览
- 获取电脑真实的IP地址,忽略虚拟机等IP地址的干扰
- K8S系列之K8S集群之Master节点部署
- Kafka集群搭建
- Kafka的实现细节
- CentOS7下安装Elasticsearch-7.3.2和Elasticsearch-head
- spring boot oauth2 取消认证
- 日志级别记录规范