这个比较简单，就扒来用了，
可以将它放在网站的两侧，并且随滚动条下拉固定。
下面的代码经过压缩，请利用代码工具格式化。
2014-06-19_css3_nav

格式化之后的代码：
HTML部分

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title>CSS3的简约导航菜单</title> 
  6.   </head>  
  7.   <body> 
  8.     <div id="main"> 
  9.       <ul id="navigationMenu"> 
  10.         <li> 
  11.           <a class="home" href="http://www.jsfoot.com/"> 
  12.             <span>Home</span> 
  13.           </a> 
  14.         </li>  
  15.         <li> 
  16.           <a class="about" href="http://www.jsfoot.com/"> 
  17.             <span>About</span> 
  18.           </a> 
  19.         </li>  
  20.         <li> 
  21.           <a class="services" href="http://www.jsfoot.com/"> 
  22.             <span>Services</span> 
  23.           </a> 
  24.         </li>  
  25.         <li> 
  26.           <a class="portfolio" href="http://www.jsfoot.com/"> 
  27.             <span>Portfolio</span> 
  28.           </a> 
  29.         </li>  
  30.         <li> 
  31.           <a class="contact" href="http://www.jsfoot.com/"> 
  32.             <span>Contact us</span> 
  33.           </a> 
  34.         </li> 
  35.       </ul> 
  36.     </div> 
  37.   </body> 
  38. </html>

CSS部分

  1. *{
  2.     /* A universal CSS reset */
  3.     margin:0;
  4.     padding:0;
  5. }
  7. body{
  8.     font-size:14px;
  9.     color:#666;
  10.     background:#111 no-repeat;
  11.     
  12.     /* CSS3 Radial Gradients */
  13.     background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
  14.     background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
  15.     
  16.     font-family:Arial, Helvetica, sans-serif;
  17. }
  19. #navigationMenu li{
  20.     list-style:none;
  21.     height:39px;
  22.     padding:2px;
  23.     width:40px;
  24. }
  26. #navigationMenu span{
  27.     /* Container properties */
  28.     width:0;
  29.     left:38px;
  30.     padding:0;
  31.     position:absolute;
  32.     overflow:hidden;
  34.     /* Text properties */
  35.     font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
  36.     font-size:18px;
  37.     font-weight:bold;
  38.     letter-spacing:0.6px;
  39.     whitewhite-space:nowrap;
  40.     line-height:39px;
  41.     
  42.     /* CSS3 Transition: */
  43.     -webkit-transition: 0.25s;
  44.     
  45.     /* Future proofing (these do not work yet): */
  46.     -moz-transition: 0.25s;
  47.     transition: 0.25s;
  48. }
  50. #navigationMenu a{
  51.     background:url('http://tva3.sinaimg.com/large/6b002b97gw1ehiqr3hpu1j205a026t8r.jpg') no-repeat;
  53.     height:39px;
  54.     width:38px;
  55.     display:block;
  56.     position:relative;
  57. }
  59. /* General hover styles */
  61. #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
  62. #navigationMenu a:hover{
  63.     text-decoration:none;
  64.     
  65.     /* CSS outer glow with the box-shadow property */
  66.     -moz-box-shadow:0 0 5px #9ddff5;
  67.     -webkit-box-shadow:0 0 5px #9ddff5;
  68.     box-shadow:0 0 5px #9ddff5;
  69. }
  71. /* Green Button */
  73. #navigationMenu .home { background-position:0 0;}
  74. #navigationMenu .home:hover {   background-position:0 -39px;}
  75. #navigationMenu .home span{
  76.     background-color:#7da315;
  77.     color:#3d4f0c;
  78.     text-shadow:1px 1px 0 #99bf31;
  79. }
  81. /* Blue Button */
  83. #navigationMenu .about { background-position:-38px 0;}
  84. #navigationMenu .about:hover { background-position:-38px -39px;}
  85. #navigationMenu .about span{
  86.     background-color:#1e8bb4;
  87.     color:#223a44;
  88.     text-shadow:1px 1px 0 #44a8d0;
  89. }
  91. /* Orange Button */
  93. #navigationMenu .services { background-position:-76px 0;}
  94. #navigationMenu .services:hover { background-position:-76px -39px;}
  95. #navigationMenu .services span{
  96.     background-color:#c86c1f;
  97.     color:#5a3517;
  98.     text-shadow:1px 1px 0 #d28344;
  99. }
  101. /* Yellow Button */
  103. #navigationMenu .portfolio { background-position:-114px 0;}
  104. #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
  105. #navigationMenu .portfolio span{
  106.     background-color:#d0a525;
  107.     color:#604e18;
  108.     text-shadow:1px 1px 0 #d8b54b;
  109. }
  111. /* Purple Button */
  113. #navigationMenu .contact { background-position:-152px 0;}
  114. #navigationMenu .contact:hover { background-position:-152px -39px;}
  115. #navigationMenu .contact span{
  116.     background-color:#af1e83;
  117.     color:#460f35;
  118.     text-shadow:1px 1px 0 #d244a6;
  119. }
  121. /* The styles below are only needed for the demo page */
  123. #main{
  124.     margin:80px auto;
  125.     position:relative;
  126.     width:40px;
  127. }
TAGS:  

本站文章除注明转载/出处外，均为本站原创或翻译。若要转载但请务必注明出处，尊重他人劳动成果。

转载请注明出处链接 : https://www.inlojv.com/2945.html