CSS之可折叠导航
简述
下面我们来讲述如何仅仅用CSS来实现一个可折叠的导航。
<nav>标签
定义和用法
<nav>标签定义导航链接的部分。
HTML4.01与HTML5之间的差异
<nav>标签是HTML5中的新标签。
<summary>标签
定义和用法
<summary>标签包含details元素的标题，”details”元素用于描述有关文档或文档片段的详细信息。
HTML4.01与HTML5之间的差异
<summary>是HTML5中的新标签。
提示和注释
提示：请与<details>标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。
注释：”summary”元素应该是”details”元素的第一个子元素。
效果
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可折叠导航</title>
<style type='text/css'>
nav a {
display: block;
}
summary {
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
</style>
</head>
<body>
<details>
<summary>Heading 这是一个可折叠的导航</summary>
<nav>
<a href="http://www.googto.com/">Googto</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="http://blog.csdn.net/liang19890820">一去丶二三里</a>
</nav>
</details>
</body>
</html>解释
display: block
可以将导航中的链接设置为块级元素，元素前后会带有换行符。
cursor: pointer
则可以将光标呈现为指示链接的指针（一只手）。
为小三角添加CSS样式
原本在标题前面会显示一个可折叠的三角，这里我们没有显示，这个小三角符号可以添加样式吗？Webkit内核的浏览器使用伪元素来解决这个问题：::-webkit-details-marker。
通过这个伪元素，我们可以定制小三角的前景色，背景色和尺寸大小：
summary::-webkit-details-marker {
color: #fff;
background-color: #000;
} 但是，直接通过::-webkit-details-marker伪元素来修改小三角的样式是行不通的。目前，我们只能通过::before和::after伪元素来替换它们。
summary:before {
content: "\2605"; /* 新图标 */
color: #696f7c;
margin-right: 5px;
}其中2605属于常用的HTML特殊字符大全(css3 content)。
CSS之可折叠导航的更多相关文章
- 【温故而知新-CSS】使用CSS设计网站导航栏
body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...
- 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- 纯css实现京东导航菜单
纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三 通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
- CSS3学习-用CSS制作立体导航栏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
随机推荐
- atan atan2的区别！
atan与atan2的使用=范围不一样! 今天调一一下午的BUG!终于发现了是ATAN的错! atan()函数: atan(y/x); 带一个参数!注意X不能为0,否则…………, 还有求出的角度为-p ...
- 141029 V7 异步通知测试，15分钟循环代码重构，同步更新payInfo测试，支付成功timer测试成功说明
支付成功之后的1分钟定时任务:测试成功. 2014-10-29 17:16:06,892 DEBUG [http-bio-8086-exec-1] org.springframework.web.se ...
- Javascript全局变量的使用方法
1.demo例子说明 <script type="text/javascript"> var gDivId; //js全局变量 function geocoder(la ...
- 压测2.0：云压测 + APM = 端到端压测解决方案
从压力测试说起 压力测试是确立系统稳定性的一种测试方法,通常在系统正常运作范围之外进行,以考察其功能极限和隐患.与功能测试不同,压测是以软件响应速度为测试目标的,尤其是针对在较短时间内大量并发用户的访 ...
- 谈JavaScript组合拼接字符串的效率 --转载
JavaScript组合拼接字符串的效率.在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出.比如写脚本控件时控制整个控件的外观的HTML标签输出,比如AJAX里得到服务器端的回传值 ...
- robotframework 测试工具添加PDF文件内容匹配插件
robotframework 这个需要了解的请度娘.本文实现的是一个小功能.大体分为如下几个步骤 1)给定一个pdf文件. 2)读取pdf文件内容,并解析为文本内容. 3)通过给定的内容,比对pdf ...
- 【C语言】二维数组做形参
二维数组有两种形式: ①在栈上: int a[4][4] = {...}; ②在堆堆上: int ** a = new int *[4]; for ...
- CSS 的overflow:hidden 属性详细解释
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...
- 14个Xcode中常用的快捷键操作
在Xcode 6中有许多快捷键的设定可以使得你的编程工作更为高效,对于在代码文件中快速导航.定位Bug以及新增应用特性都是极有效的. 当然,你戳进这篇文章的目的也在于想要快速的对代码文件进行操作,或者 ...
- 基础DOM和CSS操作(二)
元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...