CSS to achieve beautiful vertical navigation style

Slide sliding switch, you need to make a switch to the navigation bar, or even a lot of pages or components are used to navigate the bar, this article combined with the example will be a simple introduction to the use of CSS vertical slide navigation style effect.
Nice vertical navigation style

There are a number of different navigational styles that are collected in this article example, and we know that slides or other components that need navigation guidance, they need navigation to indicate the current slider. There are a variety of very interesting and inspired navigation styles in this article that are based on vertical slide effects, and you can also modify the styles to apply to your project.

This is a small section of the HTML structure in our example:
<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" >

</div>
</section>

Css

This is a common style based on all vertical navigation.
. 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;
}
To add a style to a specific instance:
/*** 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 style, to add to the dash: After the element, when hovering, the dash becomes darker, once clicked, the title appears, short horizontal contraction.
See demo demo For more results, or download source code directly for your project.