css实现漂亮的垂直导航样式

作者：袖梨 2022-06-25

幻灯片滑动切换的时候，需要做个切换的导航条，甚至很多的页面或者组件都用到导航条，本文结合实例将简单介绍使用CSS实现的垂直幻灯片导航样式效果。
漂亮的垂直导航样式

本文实例中收集了多种不同的导航样式，我们知道，滑动的幻灯片或者其他需要导航引导的组件，它们需要导航指示所在的当前滑块。本文实例中有多种非常有趣和来自不同灵感的导航样式，都是基于垂直幻灯片效果的，当然你也可以修改样式应用到你的项目中去。

这是我们实例中的一小段html结构：

Xusni

CSS

这是基于所有垂直导航的通用样式。
.nav {
    position: relative;
    width: 8em;
    margin: 0 0 0 3em;
}

.nav__item {
    line-height: 1;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    color: currentColor;
    border: 0;
    background: none;
}

.nav__item:focus {
    outline: none;
}
为专门的实例添加样式：
/*** Xusni ***/

.nav--xusni .nav__item {
    width: 3em;
    height: 1.25em;
    margin: 0.5em 0;
}

.nav--xusni .nav__item::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    height: 30%;
    background: #3c4a9a;
    transform-origin: 0 0;
    transition: transform 0.5s, background-color 0.5s;
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.nav--xusni .nav__item:not(.nav__item--current):hover::after,
.nav--xusni .nav__item:not(.nav__item--current):focus::after {
    background: #212956;
    transition: background-color 0.3s;
}

.nav--xusni .nav__item--current::after {
    background: #212956;
    transform: scale3d(0.2,1,1);
}

.nav--xusni .nav__item-title {
    margin: 0 0 0 1em;
    opacity: 0;
    display: block;
    transform: translate3d(2em,0,0);
    transition: opacity 0.5s, transform 0.5s;
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.nav--xusni .nav__item--current .nav__item-title {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition-delay: 0.1s;
}