漂亮的垂直导航样式

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

幻灯片滑动切换的时候,需要做个切换的导航条,甚至很多的页面或者组件都用到导航条,本文结合实例将简单介绍使用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实例演示,也可以下载源码直接用于您的项目中。

未登录用户
全部评论0
到底啦