您现在的位置是：网站首页> 编程资料编程资料

纯CSS3单页切换导航菜单界面设计的简单实现HTML5实现响应式圆形导航全屏图片切换excel表格如何制作导航栏效果 制作导航栏切换效果的方法CSS实现导航条Tab切换的三种方法介绍纯CSS实现导航栏Tab切换效果使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效

2021-09-04 877人已围观

简介 下面小编就为大家带来一篇纯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">Boltspan><span class="hint">...section>     
  15.           div>  
  16.           <div class="page" id="p2">  
  17.             <section class="icon fa fa-keyboard-o"><span class="title">Typespan>section>  
  18.           div>     
  19.           <div class="page" id="p3">  
  20.             <section class="icon fa fa-rocket"><span class="title">Rocketspan>section>  
  21.           div>  
  22.           <div class="page" id="p4">  
  23.             <section class="icon fa fa-dribbble">  
  24.               <span class="title">Dribbblespan>  
  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">Morespan>  
  34. 

    上一篇：canvas之万花筒效果的简单实现(推荐)HTML5 Canvas支持移动端的刮刮卡特效基于Html5+Canvas实现2016年七夕情人节倒计时特效源码html5 canvas实现的可用于手机端手指滑动刮刮乐效果源码html5 canvas实现的自定义边数绘制多边图形功能源码基于HTML5 Canvas的水波涟漪特效源码html5基于canvas实现的文字标签云3D旋转动画特效源码用html5的canvas和JavaScript创建一个绘图程序的简单实例

    下一篇：CSS使用自定义光标样式的实现_遁地龙卷风纯CSS3实现可用鼠标控制娘口三三笑脸动画特效源码纯CSS3制作逼真的汽车运动动画特效源码浅谈CSS中display/float/position属性值的相互影响css(display,float,position)深入理解纯JS和CSS3实现页面滚动动画库特效源码常用的 css 命名规则(推荐)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网