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这个概念的 ...
随机推荐
- SQLite中的日期基础
SQLite包含了如下时间/日期函数: datetime().......................产生日期和时间 date()...........................产生日期 t ...
- WPF 验证
WPF中TextBox的自动验证: 演示 : 用以下两个TextBox分别显示验证IP和非空值验证,先看效果: IP自动验证效果: 非空值自动验证效果: 第一步:定义TextBox验证的样式: < ...
- xmlns与targetNamespace
xmlns与targetNamespace xmlns与targetNamespacehttp://blog.sina.com.cn/weatry在使用XML Schema生成XML文件时,我们常常会 ...
- win7/8下VirtualBox虚拟Ubuntu共享文件夹设置
实验环境: 主机:win8.1 虚拟机软件:VirtualBox4.3 虚拟的主机:centos6.5 final 亲测可用! 1. 安装增强功能包(VBoxGuestAdditions) 打开虚拟 ...
- asp.net MVC3 + JQuery 的ajax简单使用
一直都没有使用过JQuery,更没使用过JQuery的ajax支持带来的方便,今天试了一下,真是减少了很多工作量,使用方法也比较简单 这里先记下来,以后使用时可以再拿着用. 本应用中,本来是准备使用长 ...
- 在iptables防火墙下开启vsftpd的端口
在开启vsftpd端口后发现用客户端工具能登陆,但无法浏览文件和新建文件.此时看了一下ftp的协议,发现ftp有主动模式和被动模式.在服务端开21端口是让客户端进来,并没有出去的端口,还在服务端开启出 ...
- 简单的说说jsonp
jsonp和json有什么区别?json是一种文件格式,而jsonp是一种技术方法. jsonp会被人认为是一种新的跨域技术,其实本质上和利用带有src属性的标签进行js跨域本质没什么区别. 区别就是 ...
- POJ 2591 1338 2545 2247（数列递归衍生问题，思路挺妙）
四道题的难度: 2591<1338<2545<2247 POJ 2591 Set Definition: 这是从discuss里看来的,写的挺好,直接copy,根据我的代码稍有改动( ...
- 在linux服务器上装svn版本管理，自动部署代码到项目
在linux服务器上装svn版本管理,自动部署代码到项目 http://bbs.aliyun.com/read/9715.html?spm=5176.7114037.1996646101.1.W3zw ...
- Python 爬虫过程中的中文乱码问题
python+mongodb 在爬虫的过程中,抓到一个中文字段,encode和decode都无法正确显示 注:以下print均是在mongodb中截图显示的,在pythonshell中可能会有所不同 ...