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 是不会缩小的.

补上一个加强版

HTML

<div class="container">
  <h1>Title</h1>
  <ol>
    <li><span>Home</span></li>
    <li><span>Category Name</span></li>
    <li><span>Product Name Lorem Lorem, ipsum.</span></li>
  </ol>
</div>

CSS

.container {
  @mixin ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @mixin clear-ellipsis {
    white-space: unset;
    overflow: unset;
    text-overflow: unset;
  }

  padding-inline: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  max-width: 100%;

  ol {
    list-style: none;
    display: flex;
    align-items: center;
    --gap: 16px;
    gap: var(--gap);

    > :not(:last-child) {
      flex-shrink: 0;
    }
    li {
      &:not(:first-child) {
        display: flex;
        align-items: center;
        gap: var(--gap);
        &::before {
          content: '/';
        }
      }
      overflow: hidden;
      span {
        @include ellipsis;
      }
      &.opened span {
        @include clear-ellipsis;
      }
    }
  }
}

JS

document
  .querySelectorAll('li')
  .forEach(li => li.addEventListener('click', () => li.classList.add('opened')));

当 container 小的时候, 体验二

上面的体验是 flex shrink. 每一个 li 都变小, 然后字往下掉. 还有另一种方式可能更好, 那就是用 wrap

在 ol 加上 flex-wrap: wrap; 就可以了

HTML 方式效果:

CSS 方式效果 (不需要搞定位了)

CSS 方式中, 由于 seperator 在 li 里面, 所以 li 掉下去的一定是完整的 seperator 和 anchor 一定是一起掉的.

HTML 方式则不太一样.

总结

不管是体验一还是二, HTML 方式还是 CSS 方式都各有优缺点.

关键是理解 Flex, 为什么出来的效果是那样, 然后再想你要怎样的体验和怎样的管理.

我个人会选体验二, 用 CSS 方式实现.

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 负责.