漂亮的垂直导航样式

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

查看演示 下载源码

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

HTML

这是我们实例中的一小段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实例演示，也可以下载源码直接用于您的项目中。