首页>>导航菜单>>纯 HTML5/CSS3动画下拉菜单(2014-07-04)

纯 HTML5/CSS3动画下拉菜单

 不是jq的动画，要支持HTML5的浏览器

纯 HTML5/CSS3动画下拉菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <ul>  
  2.   <li>  
  3.     <a href="#link-001">freejs.net</a>  
  4.     <ul>  
  5.       <li><a href="#link-001-1">Subelement 1.1</a></li>  
  6.       <li><a href="#link-001-2">Subelement 1.2</a></li>  
  7.   
  8.     </ul>  
  9.   </li>  
  10.   <li>  
  11.     <a href="#link-002">导航菜单</a>  
  12.     <ul>  
  13.       <li><a href="#link-002-1">Subelement 2.1</a></li>  
  14.       <li><a href="#link-002-2">Subelement 2.2</a></li>  
  15.     </ul>  
  16.   </li>  
  17.   <li>  
  18.     <a href="#link-003">Element 3</a>  
  19.     <ul>  
  20.       <li><a href="#link-003-1">Subelement 3.1</a></li>  
  21.       <li><a href="#link-003-2">Subelement 3.2</a></li>  
  22.       <li><a href="#link-003-3">Subelement 3.3</a></li>  
  23.     </ul>  
  24.   </li>  
  25.   <li>  
  26.     <a href="#link-004">Element 4</a>  
  27.     <ul>  
  28.       <li><a href="#link-004-1">Subelement 4.1</a></li>  
  29.       <li><a href="#link-004-2">Subelement 4.2</a></li>  
  30.   
  31.     </ul>  
  32.   </li>  
  33.   <li>  
  34.     <a href="#link-005">Element 5</a>  
  35.     <ul>  
  36.       <li><a href="#link-005-1">Subelement 5.1</a></li>  
  37.     </ul>  
  38.   </li>  
  39. </ul>  

 

CSS Code
  1. * {  
  2.     margin:0; padding:0; outline:0;  
  3.     transition:all .5s .1s;  
  4.     -moz-transition:all .5s .1s;  
  5.     -ms-transition:all .5s .1s;  
  6.     -o-transition:all .5s .1s;  
  7.     -webkit-transition:all .5s .1s;  
  8. }   
  9. a, a:hover {  
  10.     color:#FFF;  
  11.     text-decoration:none;  
  12. } nav {  
  13.     padding:50px 0;  
  14. } nav ul {  
  15.     display:table;  
  16.     margin:0 auto;  
  17.     background:#34495e;  
  18.     border-radius:5px;  
  19.     border-bottom:2px solid #2c3f50;  
  20. } nav ul li {  
  21.     float:left;  
  22.     border-left:1px solid #435565;  
  23.     border-right:1px solid #2c3f50;  
  24.     position:relative;  
  25.     list-style:none;  
  26.     line-height:14px;  
  27.     font-size:14px;  
  28.     font-weight:bold;  
  29. } nav ul li:first-of-type {  
  30.     border-left:none;  
  31. } nav ul li:last-of-type {  
  32.     border-right:none;  
  33. } nav ul li a {  
  34.     display:block;  
  35.     padding:13px 15px;  
  36. } nav>ul>li>a:before {  
  37.     content:"0BB 020";  
  38.     display:block;  
  39.     float:left;  
  40.     font-size:20px;  
  41.     width:20px;  
  42.     height:14px;  
  43.     text-align:center;  
  44.     line-height:14px;  
  45.     transform:rotate(90deg);  
  46.     -moz-transform:rotate(90deg);  
  47.     -ms-transform:rotate(90deg);  
  48.     -o-transform:rotate(90deg);  
  49.     -webkit-transform:rotate(90deg);  
  50. } nav>ul>li:first-of-type>a {  
  51.     border-radius:5px 0 0 0;  
  52. } nav>ul>li:last-of-type>a {  
  53.     border-radius:0 5px 0 0;  
  54. } nav>ul>li:hover>a:before {  
  55.     margin:0 3px 0 -3px;  
  56.     -moz-transform:rotate(-90deg);  
  57.     -ms-transform:rotate(-90deg);  
  58.     -o-transform:rotate(-90deg);  
  59.     -webkit-transform:rotate(-90deg);     
  60. } nav>ul>li:hover>a {  
  61.     background-color:#1bbc9b;  
  62.     display:block;  
  63.     padding:13px 15px;  
  64. } nav ul li ul {  
  65.     display:block;  
  66.     position:absolute;  
  67.     border:none;  
  68.     left:0;  
  69.     top:200%;  
  70.     opacity:0;  
  71.     width:150%;  
  72.     border-radius:0 0 5px 5px;  
  73.     background-color:#1bbc9b;  
  74. } nav ul li:last-of-type ul {  
  75.     left:auto;  
  76.     rightright:0;  
  77. } nav ul li ul li {  
  78.     height:0;  
  79.     padding:0;  
  80.     font-size:12px;  
  81.     float:none;  
  82.     border:none;  
  83.     overflow:hidden;  
  84. } nav ul li ul li a {  
  85.     text-indent:-50%;  
  86.     opacity:0;  
  87. } nav ul li:hover ul {  
  88.     opacity:1;  
  89.     top:40px;  
  90.     padding:5px 0;  
  91. } nav ul li:hover ul li {  
  92.     height:40px;  
  93. } nav ul li:hover ul li a {  
  94.     text-indent:0;  
  95.     opacity:1;  
  96. } nav ul li:hover ul li:hover a {  
  97.     background-color:#07a887;  
  98. } p {  
  99.   position:fixed;  
  100.   rightright:0;  
  101.   bottombottom:0;  
  102.   font-size:11px;  
  103.   color:#FFF;  
  104.   display:block;  
  105.   padding:5px;  
  106. }  

 


原文地址:http://www.freejs.net/article_daohangcaidan_363.html