简述

下面我们来讲述如何仅仅用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之可折叠导航的更多相关文章

  1. 【温故而知新-CSS】使用CSS设计网站导航栏

    body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...

  2. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  3. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

  4. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  5. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  6. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  7. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  8. CSS3学习-用CSS制作立体导航栏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

随机推荐

  1. 提高Asp.Net应用程序性能的十大方法(译感)

    译完了提高Asp.Net应用程序的十大方法这篇文章,仔细想其中提到的每一条,在这里结合我的项目来谈谈.第一条:返回多个结果集因为我的项目中所有对数据库的访问的sql语句都是通过调用存储过程实现的,所以 ...

  2. 【转】Sublime text 3 中文文件名显示方框怎么解决

    引用自:http://www.zhihu.com/question/24029280 如图,中文文件名打开全是乱码,内容倒是装了converttoutf8没什么太大的问题. 这个是sublime te ...

  3. Sublime Text 编辑器

    1.从http://www.sublimetext.com/2 下载Sublime Text 2编辑器. 2.安装Package Control 管理器,用于管理和安装插件包. 下载地址:https: ...

  4. POJ 1273 Drainage Ditches（网络流dinic算法模板）

    POJ 1273给出M条边,N个点,求源点1到汇点N的最大流量. 本文主要就是附上dinic的模板,供以后参考. #include <iostream> #include <stdi ...

  5. POJ 1151 Atlantis（经典的线段树扫描线，求矩阵面积并）

    求矩阵的面积并 采用的是区间更新 #include <iostream> #include <stdio.h> #include <string.h> #inclu ...

  6. POJ 2000

    #include<iostream> #include<cstdio> #define MAXN 10009 using namespace std; ]; int main( ...

  7. sql 语句的各种连接

    数据表: 1.两种连接表现方式一样 其中 where 条件语句可以省略,当时join 的on 语句不可省略 2.左连接,右连接 左连接:返回左表的所有数据,并根据条件返回左右表的连接结果,如果未匹配到 ...

  8. 传说中的WCF（5）：数据协定（a）

    在第4篇中,咱们了解了发送/接收SOAP头,从本篇开头,我们不妨更深入地去探求一下有关WCF中的消息到底是啥玩意儿.WCF庞大而复杂,而从 MSDN文档中,你会看到许多很专业很抽象的东西,你不禁会问, ...

  9. android真机自动化测试

    appium执行用例时报错问题: 问题解析: 一般该种情况都是因为来连接了多个设备,验证办法:cmd->执行adb devices  看结果是否是多个devices ,如果是这个问题,停掉多余设 ...

  10. C#打开得到路径

    FolderBrowserDialog path = new FolderBrowserDialog(); path.ShowDialog(); MessageBox.Show(path.Select ...