css實現漂亮的垂直導航樣式

投影片滑動切換的時候，需要做個切換的導航條，甚至很多的頁面或者組件都用到導航條，本文結合執行個體將簡單介紹使用CSS實現的垂直投影片導航樣式效果。
漂亮的垂直導航樣式

 

本文執行個體中收集了多種不同的導航樣式，我們知道，滑動的投影片或者其他需要導航引導的組件，它們需要導航指示所在的當前滑塊。本文執行個體中有多種非常有趣和來自不同靈感的導航樣式，都是基於垂直投影片效果的，當然你也可以修改樣式應用到你的項目中去。

這是我們執行個體中的一小段html結構：
<section class="section section--nav" id="Xusni">
    <span class="link-copy"></span>
    <nav class="nav nav--xusni">
        <button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Incipient</span></button>
        <button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Halcyon</span></button>
        <button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Surreptitious</span></button>
        <button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Evanescent</span></button>
        <button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Vestigial</span></button>
        <button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Scintilla</span></button>
        <button class="nav__item" aria-label="Item 7"><span class="nav__item-title">Nemesis</span></button>
        <button class="nav__item" aria-label="Item 8"><span class="nav__item-title">Mondegreen</span></button>
    </nav>
    <!-- Mockup slider for decorative purpose only -->
    <div class="mockup-slider">
        <img src="img/1.jpg" alt="img01" />
        <h3 class="mockup-slider__title">Xusni</h3>
    </div>
</section>

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;
}

xusni風格樣式中，為虛線添加:after為元素，當懸停時，虛線變得越來越暗，一旦點擊，標題出現，虛線收縮。
更多效果請看demo執行個體示範，也可以下載源碼直接用於您的項目中。