平武建站

纯css3开发的响应式设计动画菜单详细教程

这篇文章主要讲解了“纯css3开发的响应式设计动画菜单详细教程”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“纯css3开发的响应式设计动画菜单详细教程”吧！

创新互联是一家集网站建设,久治企业网站建设,久治品牌网站建设,网站定制,久治网站建设报价,网络营销,网络优化,久治网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

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

纯css3开发的响应式设计动画菜单详细教程

图1

纯css3开发的响应式设计动画菜单详细教程

图2

下面是实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

  1.   

  2.           

  3.           

  4.               

  5.             

        

    •                 

    • Home
      •   

    •                 

    • DHTML
      •   

    •                 

    • CSS Library
      •   

    •                 

    • CSS Gallery
      •   

    •                 

    • JavaScript
      •   

    •                 

    •   

    •                       

    •                       

    •                 

      •   

    •             

      

  6.               

  7.                 Menu  

  8.         

  

  •     

    •   

    这里加入了兼容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 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.     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开发的响应式设计动画菜单详细教程”的内容了，经过本文的学习后，相信大家对纯css3开发的响应式设计动画菜单详细教程这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


    当前名称：纯css3开发的响应式设计动画菜单详细教程
    当前链接：http://pwwzsj.com/article/jhoego.html

    其他资讯