请选择 进入手机版 | 继续访问电脑版

网络科技

    今日:864| 主题:272066
收藏本版
互联网、科技极客的综合动态。

[其他] 漂亮的垂直导航样式

[复制链接]
時間結束所有 发表于 16-10-7 15:42:58
148 10

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

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

漂亮的垂直导航样式

漂亮的垂直导航样式-1-网络科技-button,幻灯片,漂亮,项目

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

   这是我们实例中的一小段html结构:
  
  1. <section class="section section--nav" id="Xusni">
  2.         <span class="link-copy"></span>
  3.         <nav class="nav nav--xusni">
  4.                 <button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Incipient</span></button>
  5.                 <button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Halcyon</span></button>
  6.                 <button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Surreptitious</span></button>
  7.                 <button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Evanescent</span></button>
  8.                 <button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Vestigial</span></button>
  9.                 <button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Scintilla</span></button>
  10.                 <button class="nav__item" aria-label="Item 7"><span class="nav__item-title">Nemesis</span></button>
  11.                 <button class="nav__item" aria-label="Item 8"><span class="nav__item-title">Mondegreen</span></button>
  12.         </nav>
  13.         <!-- Mockup slider for decorative purpose only -->
  14.         <div class="mockup-slider">
  15.                 <img src="img/1.jpg" alt="img01" />
  16.                 <h3 class="mockup-slider__title">Xusni</h3>
  17.         </div>
  18. </section>
复制代码
  CSS

   这是基于所有垂直导航的通用样式。
  
  1. .nav {
  2.         position: relative;
  3.         width: 8em;
  4.         margin: 0 0 0 3em;
  5. }

  6. .nav__item {
  7.         line-height: 1;
  8.         position: relative;
  9.         display: block;
  10.         margin: 0;
  11.         padding: 0;
  12.         letter-spacing: 0;
  13.         color: currentColor;
  14.         border: 0;
  15.         background: none;
  16. }

  17. .nav__item:focus {
  18.         outline: none;
  19. }
复制代码
  为专门的实例添加样式:
  
  1. /*** Xusni ***/

  2. .nav--xusni .nav__item {
  3.         width: 3em;
  4.         height: 1.25em;
  5.         margin: 0.5em 0;
  6. }

  7. .nav--xusni .nav__item::after {
  8.         content: '';
  9.         position: absolute;
  10.         top: 35%;
  11.         left: 0;
  12.         width: 100%;
  13.         height: 30%;
  14.         background: #3c4a9a;
  15.         transform-origin: 0 0;
  16.         transition: transform 0.5s, background-color 0.5s;
  17.         transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  18. }

  19. .nav--xusni .nav__item:not(.nav__item--current):hover::after,
  20. .nav--xusni .nav__item:not(.nav__item--current):focus::after {
  21.         background: #212956;
  22.         transition: background-color 0.3s;
  23. }

  24. .nav--xusni .nav__item--current::after {
  25.         background: #212956;
  26.         transform: scale3d(0.2,1,1);
  27. }

  28. .nav--xusni .nav__item-title {
  29.         margin: 0 0 0 1em;
  30.         opacity: 0;
  31.         display: block;
  32.         transform: translate3d(2em,0,0);
  33.         transition: opacity 0.5s, transform 0.5s;
  34.         transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  35. }

  36. .nav--xusni .nav__item--current .nav__item-title {
  37.         opacity: 1;
  38.         transform: translate3d(0,0,0);
  39.         transition-delay: 0.1s;
  40. }
复制代码
  xusni风格样式中,为短横线添加:after为元素,当悬停时,短横线变得越来越暗,一旦点击,标题出现,短横线收缩。
   更多效果请看demo实例演示,也可以下载源码直接用于您的项目中。



上一篇:沃兹: 营销商曾要求我们停用“苹果”这个名字
下一篇:Using UUIDs in Yesod
蒋文 发表于 16-10-7 17:35:27
酱油党莅临的地方,不仅仅是挽尊,不仅仅是消灭零回复,酱油所过暖意无边
回复 支持 反对

使用道具 举报

李龙倩 发表于 16-10-7 18:05:46
今年楼主不送礼,送礼就给楼下的!
回复 支持 反对

使用道具 举报

他是我消失的梦 发表于 16-10-7 18:20:03
修养的艺术,其实就是说谎的艺术。  
回复 支持 反对

使用道具 举报

wayne2011 发表于 16-10-7 18:20:04
今年楼主不送礼,送礼就给楼下的!
回复 支持 反对

使用道具 举报

kovenkr 发表于 16-10-7 18:28:34
土憋矫情无下限
回复 支持 反对

使用道具 举报

僞裝癡人說夢 发表于 16-10-7 18:33:46
对牛弹琴的人越来越多了!
回复 支持 反对

使用道具 举报

方力眠n 发表于 16-10-7 18:41:13
简约时尚国际范
回复 支持 反对

使用道具 举报

黄若宇 发表于 16-11-9 10:48:42
抢完橘子抢银行,现在要来抢沙发!
回复 支持 反对

使用道具 举报

她的微笑 发表于 16-11-18 22:31:53
元芳你怎么看?
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表