领购物优惠券9块9包邮
首页 > 前端技术 > css教程

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

   2015-12-19 0
核心提示：这篇主要讲利用css3设计一个响应式设计的菜单。单击列表图标，当你显示屏大小可以完全水平放下所有菜单项时，菜单水平显示。当你的显示屏不能水平放置所有菜单项时，菜单垂直显示。 而且显示的时候是以动画的型式显示。效果相当的好，具体代码如下

　　这是一个响应式设计的菜单。单击列表图标，当你显示屏大小可以完全水平放下所有菜单项时，菜单水平显示（如图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 on mouseover 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="http://www.lexue001.com/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li>  
  20.                 <li><a targe="_blank" href="http://www.lexue001.com/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li>  
  21.                 <li><a targe="_blank" href="http://www.lexue001.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Library</a></li>  
  22.                 <li><a targe="_blank" href="http://www.lexue001.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Gallery</a></li>  
  23.                 <li><a targe="_blank" href="http://www.lexue001.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.     position: relative;   
  11.     height: 45px;   
  12.     overflow: hidden;   
  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.     position: absolute;   
  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.     display: block;   
  30.     position: absolute;   
  31.     width: 40px;   
  32.     height: 40px;   
  33.     float: left;   
  34.     top: 0;   
  35.     left: 0;   
  36.     background: white;   
  37.     text-indent: -1000000px;   
  38.     border: 6px solid black; /* border color */  
  39.     border-width: 6px 0;   
  40.     cursor: pointer;   
  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.     display: block;   
  49.     position: absolute;   
  50.     width: 100%;   
  51.     height: 18%;   
  52.     top: 19%;   
  53.     left: 0;   
  54.     border: 6px solid black; /* border color */  
  55.     border-width: 6px 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.     position: absolute;   
  65.     margin-left: 40px;   
  66.     background: #eee;   
  67.     left: -100%; /* hide menu intially */  
  68.     height: 40px; /* height of menu */  
  69.     font: bold 14px Verdana;   
  70.     text-align: center;   
  71.     list-style: none;   
  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.     display: inline;   
  85.     margin: 0;   
  86.     padding: 0;   
  87.     }   
  88.   
  89. .iconicmenu ul label { /* label button inside UL to close menu */  
  90.     cursor: pointer;   
  91.     position: relative;   
  92.     height: 100%;   
  93.     text-align: center;   
  94.     }   
  95.   
  96. .iconicmenu ul label::after { /* label button x */  
  97.     content: "x";   
  98.     display: inline-block;   
  99.     line-height: 14px;   
  100.     color: white;   
  101.     -moz-border-radius: 50px;   
  102.     -webkit-border-radius: 50px;   
  103.     border-radius: 50px;   
  104.     width: 20px;   
  105.     height: 20px;   
  106.     background: black;   
  107.     font-size: 18px;   
  108.     margin: 5px;   
  109.     margin-top: 10px;   
  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 on Mouseover */  
  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 on Mouseover */  
  124.     }   
  125.   
  126. .iconicmenu input[type="checkbox"]:checked ~ ul {   
  127.     left: 8px; /* 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.     display: block;   
  136.     float: left;   
  137.     text-align: center;   
  138.     text-decoration: none;   
  139.     color: black;   
  140.     margin: 0;   
  141.     padding: 10px;   
  142.     padding-right: 15px;   
  143.     height: 100%;   
  144.     }   
  145.   
  146. .iconicmenu li a:hover {   
  147.     background: black;   
  148.     color: white;   
  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-width: 580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */  
  159.     .iconicmenu input[type="checkbox"]:checked ~ label {   
  160.         display: none;   
  161.         }   
  162.     .iconicmenu input[type="checkbox"]:checked ~ ul {   
  163.         margin-left: 0;   
  164.         }   
  165.     }   
  166.     
  167. @media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */  
  168.     .iconicmenu {   
  169.         overflow: visible;   
  170.         }   
  171.     .iconicmenu ul {   
  172.         height: auto;   
  173.         }   
  174.     .iconicmenu ul li {   
  175.         min-width: 200px;;   
  176.         display: block;   
  177.         }   
  178.     .iconicmenu ul li a {   
  179.         float: none;;   
  180.         text-align: left;   
  181.         }   
  182.     }  

　以上就是一个纯用css3实现的菜单，是不是很简单呢，谢谢阅读，希望能帮到大家，请继续关注乐学网（lexue001.com），我们会努力分享更多优秀的文章。

 
标签： 纯CSS3 响应式菜单 动画菜单
反对 0举报 0 评论 0
 

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

  • 纯CSS3实现的一些酷炫效果 css实现炫酷背景
    纯CSS3实现的一些酷炫效果 css实现炫酷背景
    　　之前在网上看到一些用纯CSS3实现的酷炫效果，以为实现起来比较困难，于是想看看具体是怎么实现的。一、笑脸猫动画实现效果如下：这个实现起来确实比较麻烦，很多地方需要花时间，有耐心地调整。1.先看下页面结构：bodydiv class="container"!-- 脸 --div
    03-08
  • 纯css3代码写九宫格效果 css九宫格 图片布局
    主要用到css3中的transition和布局知识。代码如下1 !DOCTYPE html2 html lang="en"3 head4 meta charset="UTF-8"5 meta name=""6 title标题/title7 /head8 style type="text/css"9 *{margin: 0;padding: 0;} 10 body{background: url(images/bg.jpg);}
    03-08
  • 【原创】使用纯CSS3制作一个无限循环的动画
    实际效果：@-webkit-keyframes gogogo {0%{-webkit-transform: rotate(0deg); border:5px solid red;}50%{-webkit-transform: rotate(180deg);background:black; border:5px solid yellow;}100%{-webkit-transform: rotate(360deg);background:white; border:
    03-08
  • 纯css3鼠标经过图片显示描述特效 css中鼠标经过时显示图片
    纯css3鼠标经过图片显示描述特效 css中鼠标经过
    http://www.w2bc.com/Article/5582今天给大家带来的是用css3技术实现鼠标经过图片，显示图片描述的动画效果。鼠标经过图片时，图片动画缩小并渐变显示描述。我们一起看看效果图：                        在线预览   源码下载我们
    03-08
  • [原创]纯CSS3打造的3D翻页翻转特效
    刚接触CSS3动画，心血来潮实现了一个心目中自己设计的翻页效果的3D动画，页面纯CSS3，目前只能在Chrome中玩，理论上可以支持Safari。1. 新建HTML，代码如下（数据和翻页后的数据都是瞎模拟的）!doctype htmlheadmeta charset="utf-8"titleCSS3 Animation/titl
    02-08
  • 【CSS3】纯CSS3制作页面切换效果
    【CSS3】纯CSS3制作页面切换效果
      此前写的那个太复杂了，来点简单的核心  htmlheadtitle/titlestyle type="text/css"* { margin: 0; padding: 0; border: none; } .Bl {width: 600px; height: 540px; margin: 0 auto;position: relative;top: 50%;transform: translateY(-50%);}.Blinpu
    02-08
  • 纯CSS3实现8组超炫酷鼠标滑过图片动画
    这篇文章主要为大家分享了8组超炫酷纯CSS3鼠标滑过图片动画效果，每一个动画效果都很精彩，值得大家学习借鉴，感兴趣的小伙伴们可以参考一下
    04-27 CSS3鼠标滑过
  • 纯CSS3打造属于自己的“小黄人”
    这篇文章主要为大家详细介绍了纯CSS3打造属于自己的“小黄人”的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    04-27 CSS3小黄人
  • 纯CSS3代码实现文字描边
    CSS3作为新兴的前端技术可以实现很多复杂变化的效果，比如文字描边。这里主要用到text-shadow属性，顾名思义就是为文字加上阴影效果，本文给大家介绍纯CSS3代码实现文字描边，需要的朋友参考下
    04-27 CSS3文字描边
  • 非常震撼的纯CSS3人物行走动画
    这篇文章主要介绍了一款非常震撼的纯CSS3人物行走动画，利用CSS3技术将人物行走的姿态描绘得非常逼真，感兴趣的小伙伴们可以参考一下
    03-12 CSS3人物行走
更多>html教程
Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题 HTML在网页中插入音频视频简单的滚动效果
更多>css教程
纯CSS3实现的一些酷炫效果 css实现炫酷背景 css3 渐变gradient
更多>html5教程
HTML5实现多张图片上传功能 HTML5手机端弹出遮罩菜单特效代码
更多>XML/XSLT
简介XML文档的阅读与编辑 深入解析XML中的DTD文档类型定义
更多>javascript
JavaScript清除空格、换行，把双引号转换成单引号 JavaScript中什么是闭包
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  网站留言  |  违规举报