这个比较简单,就扒来用了,
可以将它放在网站的两侧,并且随滚动条下拉固定。
下面的代码经过压缩,请利用代码工具格式化。
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. }
  6. body{
  7.     font-size:14px;
  8.     color:#666;
  9.     background:#111 no-repeat;
  10.     
  11.     /* CSS3 Radial Gradients */
  12.     background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px#111 300px);
  13.     background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
  14.     
  15.     font-family:ArialHelveticasans-serif;
  16. }
  17. #navigationMenu li{
  18.     list-style:none;
  19.     height:39px;
  20.     padding:2px;
  21.     width:40px;
  22. }
  23. #navigationMenu span{
  24.     /* Container properties */
  25.     width:0;
  26.     left:38px;
  27.     padding:0;
  28.     position:absolute;
  29.     overflow:hidden;
  30.     /* Text properties */
  31.     font-family:'Myriad Pro',ArialHelveticasans-serif;
  32.     font-size:18px;
  33.     font-weight:bold;
  34.     letter-spacing:0.6px;
  35.     whitewhite-space:nowrap;
  36.     line-height:39px;
  37.     
  38.     /* CSS3 Transition: */
  39.     -webkit-transition: 0.25s;
  40.     
  41.     /* Future proofing (these do not work yet): */
  42.     -moz-transition: 0.25s;
  43.     transition: 0.25s;
  44. }
  45. #navigationMenu a{
  46.     background:url('http://ww3.sinaimg.cn/large/6b002b97gw1ehiqr3hpu1j205a026t8r.jpg') no-repeat;
  47.     height:39px;
  48.     width:38px;
  49.     display:block;
  50.     position:relative;
  51. }
  52. /* General hover styles */
  53. #navigationMenu a:hover span{ width:autopadding:0 20px;overflow:visible; }
  54. #navigationMenu a:hover{
  55.     text-decoration:none;
  56.     
  57.     /* CSS outer glow with the box-shadow property */
  58.     -moz-box-shadow:0 0 5px #9ddff5;
  59.     -webkit-box-shadow:0 0 5px #9ddff5;
  60.     box-shadow:0 0 5px #9ddff5;
  61. }
  62. /* Green Button */
  63. #navigationMenu .home { background-position:0 0;}
  64. #navigationMenu .home:hover {   background-position:0 -39px;}
  65. #navigationMenu .home span{
  66.     background-color:#7da315;
  67.     color:#3d4f0c;
  68.     text-shadow:1px 1px 0 #99bf31;
  69. }
  70. /* Blue Button */
  71. #navigationMenu .about { background-position:-38px 0;}
  72. #navigationMenu .about:hover { background-position:-38px -39px;}
  73. #navigationMenu .about span{
  74.     background-color:#1e8bb4;
  75.     color:#223a44;
  76.     text-shadow:1px 1px 0 #44a8d0;
  77. }
  78. /* Orange Button */
  79. #navigationMenu .services { background-position:-76px 0;}
  80. #navigationMenu .services:hover { background-position:-76px -39px;}
  81. #navigationMenu .services span{
  82.     background-color:#c86c1f;
  83.     color:#5a3517;
  84.     text-shadow:1px 1px 0 #d28344;
  85. }
  86. /* Yellow Button */
  87. #navigationMenu .portfolio { background-position:-114px 0;}
  88. #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
  89. #navigationMenu .portfolio span{
  90.     background-color:#d0a525;
  91.     color:#604e18;
  92.     text-shadow:1px 1px 0 #d8b54b;
  93. }
  94. /* Purple Button */
  95. #navigationMenu .contact { background-position:-152px 0;}
  96. #navigationMenu .contact:hover { background-position:-152px -39px;}
  97. #navigationMenu .contact span{
  98.     background-color:#af1e83;
  99.     color:#460f35;
  100.     text-shadow:1px 1px 0 #d244a6;
  101. }
  102. /* The styles below are only needed for the demo page */
  103. #main{
  104.     margin:80px auto;
  105.     position:relative;
  106.     width:40px;
  107. }