纯CSS3单页切换导航菜单界面设计的简单实现


Posted in HTML / CSS onAugust 16, 2016

这是一款使用纯CSS3制作的单页切换导航菜单界面设计效果。该页面效果中,在页面的左侧垂直排放一组导航按钮,当点击导航按钮时,相应的页面会从屏幕右侧滑动出来,效果非常炫酷。

纯CSS3单页切换导航菜单界面设计的简单实现

 使用方法

 HTML结构

该单页切换导航菜单界面的HTML结构如下:

XML/HTML Code复制内容到剪贴板
  1. <div class="ct" id="t1">  
  2.   <div class="ct" id="t2">  
  3.     <div class="ct" id="t3">  
  4.       <div class="ct" id="t4">  
  5.          <div class="ct" id="t5">  
  6.           <ul id="menu">  
  7.             <a href="#t1"><li class="icon fa fa-bolt" id="uno"></li></a>  
  8.             <a href="#t2"><li class="icon fa fa-keyboard-o" id="dos"></li></a>  
  9.             <a href="#t3"><li class="icon fa fa-rocket" id="tres"></li></a>  
  10.             <a href="#t4"><li class="icon fa fa-dribbble" id="cuatro"></li></a>  
  11.             <a href="#t5"><li class="icon fa fa-plus-circle" id="cinco"></li></a>  
  12.           </ul>  
  13.           <div class="page" id="p1">  
  14.              <section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">...</section>     
  15.           </div>  
  16.           <div class="page" id="p2">  
  17.             <section class="icon fa fa-keyboard-o"><span class="title">Type</span></section>  
  18.           </div>     
  19.           <div class="page" id="p3">  
  20.             <section class="icon fa fa-rocket"><span class="title">Rocket</span></section>  
  21.           </div>  
  22.           <div class="page" id="p4">  
  23.             <section class="icon fa fa-dribbble">  
  24.               <span class="title">Dribbble</span>  
  25.               <p class="hint">  
  26.                 Im ready to play, <span class="hint line-trough">invite me </span> find me   
  27.               </p>  
  28.               <p class="hint">...</p>  
  29.             </section>  
  30.           </div>    
  31.           <div class="page" id="p5">  
  32.             <section class="icon fa fa-plus-circle">  
  33.               <span class="title">More</span>  
  34.               <p class="hint">  
  35.                 ...   
  36.               </p>  
  37.             </section>  
  38.           </div>    
  39.         </div>  
  40.       </div>  
  41.     </div>  
  42.   </div>  
  43. </div>        

CSS样式

该单页切换导航菜单界面使用transform和transition来制作页面的切换动画效果。并通过:target伪元素来完成按钮点击时的页面切换。完整的CSS代码如下,代码中没有添加浏览器厂商的前缀。

CSS Code复制内容到剪贴板
  1. html, body, .page {   
  2.   width: 100%;   
  3.   height: 100%;   
  4.   margin: 0;   
  5.   padding: 0;   
  6.   transition: all .6s cubic-bezier(.5, .2, .2, 1.1);   
  7.   color#fff;   
  8.   overflowhidden;    
  9. }   
  10.     
  11. * {   
  12.   font-family'open sans''lato''helvetica'sans-serif;   
  13. }   
  14.     
  15. .page {   
  16.   positionabsolute;   
  17. }   
  18.     
  19. #p1 {   
  20.   left: 0;   
  21. }   
  22.     
  23. #p2, #p3, #p4, #p5 {   
  24.   left: 200%;   
  25. }   
  26.     
  27. #p1 { background: darkslateblue; }   
  28. #p2 { background: tomato; }   
  29. #p3 { background: gold; }   
  30. #p4 { background: deeppink; }   
  31. #p5 { background#9b59b6; }   
  32.     
  33. #t2:target #p2,   
  34. #t3:target #p3,   
  35. #t4:target #p4,   
  36. #t5:target #p5 {   
  37.   transform: translateX(-190%);   
  38.   transition-delay: .4s !important;   
  39. }   
  40.     
  41. #t2:target #p1,    
  42. #t3:target #p1,   
  43. #t4:target #p1,   
  44. #t5:target #p1{   
  45.   backgroundblack;   
  46. }   
  47.     
  48. #t2:target #p1 .icon,    
  49. #t3:target #p1 .icon,   
  50. #t4:target #p1 .icon,   
  51. #t5:target #p1 .icon {   
  52.   -webkit-filter: blur(3px);   
  53.   filter: blur(3px);   
  54. }   
  55.     
  56. .icon {   
  57.   color#fff;   
  58.   font-size32px;   
  59.   displayblock;   
  60. }   
  61.     
  62. ul .icon:hover {   
  63.   opacity: 0.5;   
  64. }   
  65.     
  66. .page .icon .title {   
  67.   line-height: 2;   
  68. }   
  69.     
  70. #t2:target ul .icon,   
  71. #t3:target ul .icon,   
  72. #t4:target ul .icon,   
  73. #t5:target ul .icon{   
  74.   transform: scale(.6);   
  75.   transition-delay: .25s;   
  76. }   
  77.     
  78. #t2:target #dos,   
  79. #t3:target #tres,   
  80. #t4:target #cuatro,   
  81. #t4:target #cinco {   
  82.   transform: scale(1.2) !important;   
  83. }   
  84.     
  85. ul {   
  86.   positionfixed;   
  87.   z-index: 1;   
  88.   top: 0;   
  89.   bottombottom: 0;   
  90.   left: 0;   
  91.   marginauto;   
  92.   height280px;   
  93.   width: 10%;   
  94.   padding: 0;   
  95.   text-aligncenter;   
  96.  }   
  97.     
  98. #menu .icon {   
  99.   margin30px 0;   
  100.   transition: all .5s ease-out !important;   
  101. }   
  102.     
  103. a {   
  104.   text-decorationnone;   
  105. }   
  106.     
  107. .title, .hint {   
  108.   displayblock;   
  109. }   
  110.     
  111. .title {   
  112.   font-size38px;   
  113. }   
  114.     
  115. .hint {   
  116.   font-size13px;   
  117. }   
  118.     
  119. #p4 .hint {   
  120.   display: inherit !important;   
  121. }   
  122.     
  123. .hint a {   
  124.   coloryellow;   
  125.   transition: all 250ms ease-out;   
  126. }   
  127.     
  128. .hint a:hover {   
  129.   color#FFF;   
  130. }   
  131.     
  132. .line-trough {   
  133.   text-decorationline-through;   
  134. }   
  135.     
  136. .page .icon {   
  137.   positionabsolute;   
  138.   top: 0;   
  139.   bottombottom: 0;   
  140.   rightright: 10%;   
  141.   left: 0;   
  142.   width270px;   
  143.   height170px;   
  144.   marginauto;   
  145.   text-aligncenter;   
  146.   font-size80px;   
  147.   line-height: 1.3;   
  148.   transform: translateX(360%);   
  149.   transition: all .5s cubic-bezier(.25, 1, .5, 1.25);   
  150. }   
  151.     
  152. .page#p1 .icon {   
  153.   height220px;   
  154. }   
  155.     
  156. .page#p1 .icon {   
  157.   transform: translateX(10%) !important;   
  158. }   
  159.     
  160. #t2:target .page#p2 .icon,   
  161. #t3:target .page#p3 .icon,   
  162. #t4:target .page#p4 .icon,   
  163. #t5:target .page#p5 .icon {   
  164.   transform: translateX(0) !important;   
  165.   transition-delay: 1s;   
  166. }     

以上这篇纯CSS3单页切换导航菜单界面设计的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 #HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 #HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 #HTML / CSS
css3的过滤效果简单实例
Aug 03 #HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 #HTML / CSS
关于box-sizing的全面理解
Jul 28 #HTML / CSS
css3动画效果小结(推荐)
Jul 25 #HTML / CSS
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
工作散漫检讨书
2014/09/16 职场文书
公司费用报销管理制度
2015/08/04 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js
Python四款GUI图形界面库介绍
2022/06/05 Python