CSS & JS Effect – Breadcrumb Navigation 面包屑
介绍
Breadcrumb 长这样
主要就是让用户清楚自己在哪个 page, 然后可以轻松返回上一页.
Step by Step
HTML
<div class="container"> <ol> <li><a href="/">Home</a></li> <li><a href="/tourist-attractions">Tourist Attractions</a></li> <li><span>A 2-Starex JB Day Trip!</span></li> </ol> </div>
Semantic HTML 一般上会用 ol > li 的方式表达 Breadcrumb
效果
红框是 container 之后会用来限制 width, 现在不重要.
li 是 block element 所以它是一行一行的. 这不是我们要的.
Simple Styling
ol { // reset CSS list-style: none; a { text-decoration: inherit; color: inherit; } display: flex; }
reset 游览器默认样式, 添加 flex
效果
有个形了. 现在做 seperator
Seperator
有 2 种做法, 第一种是用 HTML, 一种是用 CSS
HTML 方式
添加 seperator 进 HTML
<ol> <li><a href="/">Home</a></li> <li><span class="separator"> / </span></li> <li><a href="/tourist-attractions">Tourist Attractions</a></li> <li><span class="separator"> / </span></li> <li><span>A 2-Starex JB Day Trip!</span></li> </ol>
然后 styling
.separator {
display: inline;
margin-inline: 1rem;
}
效果
CSS 方式
li:not(:first-child) { ::before { content: '/'; display: inline-block; margin-inline: 1rem; } }
在 li 添加 ::before 做出 seperator
2 种方法的区别
HTML 方式比较麻烦, 还要写 HTML, 而且多了一个 seperator 结构好像怪怪的.
CSS 方式的缺点是在 container 小的时候, 效果会和 HTML 方式差很多. 需要特别处理.
当 container 小的时候, 体验一
CSS 方式虽然简单, 但在 container 小的时候, 其效果和 HTML 方式是不一样的. .
明显, CSS 方式好像跑位了. 原因是 flex container 小的时候, li 会被缩小.
HTML 方式中 seperator 和 anchor 是独立的 li, 而 CSS 方式中 seperator 和 anchor 却在同一个 li 里面, 所以就出现了上面这种结果.
要解决它不是很容易, 需要把 seperator 做成 absolute 定位, 然后 left + translateX 把它移出去, 同时空间需要有 ol gap 负责
ol { display: flex; gap: 2rem; // 由 ol 负责空间 li { position: relative; &:not(:first-child) { ::before { content: '/'; display: inline-block; position: absolute; left: -1rem; transform: translateX(-50%); } } } }
效果
如果要 vertical 居中也是同样的操作, 靠定位, 对比, HTML 方式就简单的多, 直接用 flex align-items: center 就可以了.
即便如此, 它们还是有一点点的不同,
HTML 方式的 seperator 是 flex-item 它也会被缩小.
而 CSS 方式中, seperator 依赖 ol 的 gap 做完 spacing, gap 是不会缩小的.
当 container 小的时候, 体验二
上面的体验是 flex shrink. 每一个 li 都变小, 然后字往下掉. 还有另一种方式可能更好, 那就是用 wrap
在 ol 加上 flex-wrap: wrap; 就可以了
HTML 方式效果:
CSS 方式效果 (不需要搞定位了)
CSS 方式中, 由于 seperator 在 li 里面, 所以 li 掉下去的一定是完整的 seperator 和 anchor 一定是一起掉的.
HTML 方式则不太一样.
总结
不管是体验一还是二, HTML 方式还是 CSS 方式都各有优缺点.
关键是理解 Flex, 为什么出来的效果是那样, 然后再想你要怎样的体验和怎样的管理.
我个人会选体验二, 用 CSS 方式实现.
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
ol { // reset CSS list-style: none; a { text-decoration: inherit; color: inherit; } li { &:not(:first-child) { &::before { content: '/'; display: inline-block; margin-right: 1rem; } } &:not(:last-child) { margin-right: 1rem; } } line-height: 1.5; display: flex; flex-wrap: wrap; }
效果
注: 我把第二行前面的空格给弄掉了. 这样比较好看. 做法是修改了 margin 的操作, 一半由前面 li 负责, 后一半则由后面的 li 负责.
相关文章
- 在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验
- js中的 || ,&&,!运算符
- Java多线程之生产者消费者问题<一>:使用synchronized keyword解决生产者消费者问题
- dmesg&printk的工作原理
- Charles & TCPDump & Fiddler 抓包三兄弟七夕联手,还抓不到你的心?
- 模块"XX"可能与您正在运行的Windows版本不兼容。检查该模块是否与regsvr32.exe的x86或x64版
- Nginx: error_log & access_log & rewrite_log
- Maven & Nexus
- 【前端学习之HTML&CSS进阶篇】-- CSS第三篇 -- 基本布局概念
- 【前端学习之HTML&CSS】-- CSS第九篇 -- 多种多样的选择器
- 【前端学习之HTML&CSS】-- CSS第三篇 -- 选择器(上)
- 《树莓派Python编程入门与实战》——2.5 Q&A
- 【企鹅电竞直播源】浏览器抓取真实直播源地址(纯前端JS & PHP解析源码)
- 【Bilibili直播源】浏览器抓取真实直播源地址(纯前端JS & PHP解析源码)
- JS修改当前控件样式&为控件追加事件
- rsa && sha1 js code
- 【Redis入门笔记 05】Jedis 简介 & SpringBoot 集成
- JS魔法堂:再识Bitwise Operation & Bitwise Shift
- js 对象转&拼接
- [Servlet&JSP] 标准标签
- Dynamices CRM JS 类库 神器 XrmServiceToolkit - A Microsoft Dynamics CRM 2011 & CRM 2013 JavaScript Library