首页>>导航菜单>>纯css html5 圆角导航菜单，鼠标经过导航变色(2014-04-24)

纯css html5 圆角导航菜单，鼠标经过导航变色

纯css html5 圆角导航菜单，鼠标经过导航变色
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <nav id="navigation">  
  2.         <ul>  
  3.             <li><a href="http://www.freejs.net">Home</a></li>  
  4.             <li><a href="#">Services</a></li>  
  5.             <li><a href="#">Portfolio</a></li>  
  6.             <li><a href="#">About</a></li>  
  7.             <li><a href="#">Blog</a></li>  
  8.             <li><a href="#">Contact</a></li>  
  9.         </ul>  
  10.     </nav>  

 

CSS Code
  1. #navigation {  
  2.     margin: 40px 0;   
  3.     font: bold 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;  
  4.     text-transform: uppercase;  
  5.     color: #444;  
  6. }  
  7.   
  8. #navigation:after {  
  9.     clear: both;  
  10.     content: ".";  
  11.     display: block;  
  12.     height: 0;  
  13.     visibility: hidden;  
  14. }  
  15.   
  16. #navigation ul {      
  17.     float: left;  
  18.     border-radius: 100px;  
  19.     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07);  
  20.     -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07);  
  21.     overflow: hidden;  
  22. }  
  23.   
  24. #navigation li {  
  25.     float: left;  
  26.     border-style: solid;   
  27.     border-width: 1px;  
  28.     border-color: #BABABA #BABABA #BABABA #FFF;  
  29.     box-shadow: 0 1px rgba(255,255,255,1) inset;  
  30.     -webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;  
  31.     background: #F7F7F7; /* Old browsers */  
  32.     background: -moz-linear-gradient(top, #F7F7F7 0%, #EDEDED 100%); /* FF3.6+ */  
  33.     background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#F7F7F7), color-stop(100%,#EDEDED)); /* Chrome,Safari4+ */  
  34.     background: -webkit-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* Chrome10+,Safari5.1+ */  
  35.     background: -o-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* Opera 11.10+ */  
  36.     background: -ms-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* IE10+ */  
  37.     background: linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* W3C */  
  38.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0 ); /* IE6-9 */      
  39. }  
  40.   
  41. #navigation li:hover, #navigation li.current {  
  42.     box-shadow: 0 1px rgba(255,255,255,0.2) inset;  
  43.     -webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset;  
  44.     border-color: #262626 !important;  
  45.     background: #4D4D4D; /* Old browsers */  
  46.     background: -moz-linear-gradient(top, #4D4D4D 0%, #262626 100%); /* FF3.6+ */  
  47.     background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#4D4D4D), color-stop(100%,#262626)); /* Chrome,Safari4+ */  
  48.     background: -webkit-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Chrome10+,Safari5.1+ */  
  49.     background: -o-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Opera 11.10+ */  
  50.     background: -ms-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* IE10+ */  
  51.     background: linear-gradient(top, #4D4D4D 0%,#262626 100%); /* W3C */  
  52.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D4D4D', endColorstr='#262626',GradientType=0 ); /* IE6-9 */  
  53. }  
  54.   
  55. #navigation a {  
  56.     display: block;  
  57.     padding: 10px 15px;  
  58.     color: #444;  
  59.     text-decoration: none;  
  60.     text-shadow: 0 1px #FFF;  
  61. }  
  62.   
  63. #navigation a:hover, #navigation li.current a {  
  64.     color: #FFF;  
  65.     text-shadow: 0 1px #000;  
  66. }  
  67.   
  68. #navigation li:first-child {  
  69.     border-left-color: #BABABA;  
  70.     border-radius: 100px 0 0 100px;  
  71. }  
  72.   
  73. #navigation li:last-child {  
  74.     border-radius: 0 100px 100px 0;  
  75. }  

 


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