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实例演示,也可以下载源码直接用于您的项目中。
相关文章
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧,希望文章对各位有帮助。 为了更好的了解redis协议,我们用php来实现...2016-11-25
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15- 翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟...2015-10-21
SQLMAP结合Meterpreter实现注入渗透返回shell
sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等,下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25- 这篇文章主要介绍了解决vant-UI库修改样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03
- 这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14
- 复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04
elementui的el-popover修改样式不生效的解决
在使用element-ui的时候,有一个常用的组件,那就是el-popover,本文就介绍一下elementui的el-popover修改样式不生效的解决方法,感兴趣的可以了解一下...2021-07-01- js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/100(兼容FF和GG)。 先来看看设置透明度的兼容性代码: 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07
- 这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-04
- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-27
- 这篇文章主要介绍了基于leaflet.js实现修改地图主题样式的流程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-16
- 这篇文章主要介绍了vue-router为激活的路由设置样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
- 本文我们需要解决的问题是如何实现Http请求来实现通信,解决Android 2.3 版本以后无法使用Http请求问题,下面请看正文。 Android开发中使用HttpClient来开发Http程序...2016-09-20
- 这篇文章主要介绍了jQuery实现的导航下拉菜单效果,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-07-06
- 这篇文章主要介绍了基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载,需要的朋友参考下...2016-01-08