支持IE8的纯css3开发的响应式设计动画菜单教程


Posted in HTML / CSS onNovember 05, 2014

这是一个响应式设计的菜单。单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1)。当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2)。 而且显示的时候是以动画的型式显示。效果相当的好。

支持IE8的纯css3开发的响应式设计动画菜单教程

图1

支持IE8的纯css3开发的响应式设计动画菜单教程

图2

下面是实现的代码。

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.         <!--[if lte IE 8]>  
  3. <style>  
  4.   
  5.         .iconicmenu > label{   
  6.         border-width: 7px;   
  7.         background: #eee;   
  8.         }   
  9.            
  10.         .iconicmenu:hover ul{   
  11.             left: 8px; /* show menu onmouseover in IE8 and below */   
  12.         }   
  13.   
  14. </style>  
  15. <![endif]-->  
  16.         <div class="iconicmenu">  
  17.             <input type="checkbox" id="togglebox" />  
  18.             <ul>  
  19.                 <li><a targe="_blank" href="https://3water.com/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li>  
  20.                 <li><a targe="_blank" href="https://3water.com/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li>  
  21.                 <li><a targe="_blank" href="https://3water.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Library</a></li>  
  22.                 <li><a targe="_blank" href="https://3water.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Gallery</a></li>  
  23.                 <li><a targe="_blank" href="https://3water.com/Shili/css3%E8%8F%9C%E5%8D%95">JavaScript</a></li>  
  24.                 <li>  
  25.                     <label for="togglebox">  
  26.                     </label>  
  27.                 </li>  
  28.             </ul>  
  29.             <label class="toggler" for="togglebox">  
  30.                 Menu</label>  
  31.         </div>  
  32.     </div>  

这里加入了兼容ie8的hack 。

css代码:

CSS Code复制内容到剪贴板
  1. body   
  2.         {   
  3.             padding:0; margin:0;   
  4.             }   
  5.             .container   
  6.             {   
  7.                  width:600px;  margin:auto;   
  8.                 }   
  9.             .iconicmenu {   
  10.     positionrelative;   
  11.     height45px;   
  12.     overflowhidden;   
  13.     }   
  14.   
  15. .iconicmenu, .iconicmenu * {   
  16.     -moz-box-sizing: border-box;   
  17.     box-sizing: border-box;   
  18.     }   
  19.   
  20. .iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu state */  
  21.     positionabsolute;   
  22.     left: 0;   
  23.     top: 0;   
  24.     opacity: 0;   
  25.     }   
  26.   
  27. .iconicmenu > label { /* Main label icon to toggle menu state */  
  28.     z-index: 1000;   
  29.     displayblock;   
  30.     positionabsolute;   
  31.     width40px;   
  32.     height40px;   
  33.     floatleft;   
  34.     top: 0;   
  35.     left: 0;   
  36.     backgroundwhite;   
  37.     text-indent: -1000000px;   
  38.     border6px solid black/* border color */  
  39.     border-width6px 0;   
  40.     cursorpointer;   
  41.     -moz-transition: all 0.3s ease-in;   
  42.     -webkit-transition: all 0.3s ease-in;   
  43.     transition: all 0.3s ease-in; /* transition for flipping label */  
  44.     }   
  45.   
  46. .iconicmenu > label::after { /* inner stripes inside label */  
  47.     content"";   
  48.     displayblock;   
  49.     positionabsolute;   
  50.     width: 100%;   
  51.     height: 18%;   
  52.     top: 19%;   
  53.     left: 0;   
  54.     border6px solid black/* border color */  
  55.     border-width6px 0;   
  56.     -moz-transition: all 0.3s ease-in;   
  57.     -webkit-transition: all 0.3s ease-in;   
  58.     transition: all 0.3s ease-in; /* transition for flipping label */  
  59.     }   
  60.   
  61. .iconicmenu ul { /* UL menu inside container */  
  62.     margin: 0;   
  63.     padding: 0;   
  64.     positionabsolute;   
  65.     margin-left40px;   
  66.     background#eee;   
  67.     left: -100%; /* hide menu intially */  
  68.     height40px/* height of menu */  
  69.     fontbold 14px Verdana;   
  70.     text-aligncenter;   
  71.     list-stylenone;   
  72.     opacity: 0;   
  73.     -moz-border-radius: 0 5px 5px 0;   
  74.     -webkit-border-radius: 0 5px 5px 0;   
  75.     border-radius: 0 5px 5px 0;   
  76.     -moz-perspective: 10000px;   
  77.     perspective: 10000px;   
  78.     -moz-transition: all 0.5s ease-in;   
  79.     -webkit-transition: all 0.5s ease-in;   
  80.     transition: all 0.5s ease-in; /* transition for animating UL in and out */  
  81.     }   
  82.   
  83. .iconicmenu li {   
  84.     displayinline;   
  85.     margin: 0;   
  86.     padding: 0;   
  87.     }   
  88.   
  89. .iconicmenu ul label { /* label button inside UL to close menu */  
  90.     cursorpointer;   
  91.     positionrelative;   
  92.     height: 100%;   
  93.     text-aligncenter;   
  94.     }   
  95.   
  96. .iconicmenu ul label::after { /* label button x */  
  97.     content"x";   
  98.     displayinline-block;   
  99.     line-height14px;   
  100.     colorwhite;   
  101.     -moz-border-radius: 50px;   
  102.     -webkit-border-radius: 50px;   
  103.     border-radius: 50px;   
  104.     width20px;   
  105.     height20px;   
  106.     backgroundblack;   
  107.     font-size18px;   
  108.     margin5px;   
  109.     margin-top10px;   
  110.     -moz-transition: all 0.3s ease-in;   
  111.     -webkit-transition: all 0.3s ease-in;   
  112.     transition: all 0.3s ease-in;   
  113.     }   
  114.   
  115. .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {   
  116.     -moz-transform: rotatey(180deg);   
  117.     -ms-transform: rotatey(180deg);   
  118.     -webkit-transform: rotatey(180deg);   
  119.     transform: rotatey(180deg); /* flip labels vertically onMouseover */  
  120.     }   
  121.   
  122. .iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {   
  123.     border-color: darkred; /* highlight color of main menu label onMouseover */  
  124.     }   
  125.   
  126. .iconicmenu input[type="checkbox"]:checked ~ ul {   
  127.     left8px/* Animate menu into view */  
  128.     opacity: 1;   
  129.     -moz-box-shadow: 1px 1px 5px gray;   
  130.     -webkit-box-shadow: 1px 1px 5px gray;   
  131.     box-shadow: 1px 1px 5px gray;   
  132.     }   
  133.   
  134. .iconicmenu li a {   
  135.     displayblock;   
  136.     floatleft;   
  137.     text-aligncenter;   
  138.     text-decorationnone;   
  139.     colorblack;   
  140.     margin: 0;   
  141.     padding10px;   
  142.     padding-right15px;   
  143.     height: 100%;   
  144.     }   
  145.   
  146. .iconicmenu li a:hover {   
  147.     backgroundblack;   
  148.     colorwhite;   
  149.     }   
  150.   
  151. /* ----------------------------- CSS Media Queries ----------------------------- */  
  152.   
  153. /*  
  154. These rules control which portions of the menu gets shown when the screen size is below a certain width.  
  155. By default 2 stages are defined depending on browser screen width.  
  156. */  
  157.   
  158. @media screen and (max-width580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */  
  159.     .iconicmenu input[type="checkbox"]:checked ~ label {   
  160.         displaynone;   
  161.         }   
  162.     .iconicmenu input[type="checkbox"]:checked ~ ul {   
  163.         margin-left: 0;   
  164.         }   
  165.     }   
  166.     
  167. @media screen and (max-width560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */  
  168.     .iconicmenu {   
  169.         overflowvisible;   
  170.         }   
  171.     .iconicmenu ul {   
  172.         heightauto;   
  173.         }   
  174.     .iconicmenu ul li {   
  175.         min-width200px;;   
  176.         displayblock;   
  177.         }   
  178.     .iconicmenu ul li a {   
  179.         floatnone;;   
  180.         text-alignleft;   
  181.         }   
  182.     }  

 以上就是一个纯用css3实现的菜单,是不是很简单呢,谢谢阅读,希望能帮到大家,请继续关注三水点靠木,我们会努力分享更多优秀的文章。

HTML / CSS 相关文章推荐
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 #HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 #HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 #HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 #HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 #HTML / CSS
一款纯css3实现的响应式导航
Oct 31 #HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 #HTML / CSS
You might like
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php源码的安装方法和实例
2019/09/26 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python 字典访问的三种方法小结
2019/12/05 Python
通过自学python能找到工作吗
2020/06/21 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
师范生自荐信
2013/10/27 职场文书
党员年终民主评议的自我评价
2013/11/05 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
离职报告格式
2014/11/04 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
初一数学教学反思
2016/02/17 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技