这个比较简单,就扒来用了,
可以将它放在网站的两侧,并且随滚动条下拉固定。
下面的代码经过压缩,请利用代码工具格式化。
格式化之后的代码:
HTML部分
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>CSS3的简约导航菜单</title>
- </head>
- <body>
- <div id="main">
- <ul id="navigationMenu">
- <li>
- <a class="home" href="http://www.jsfoot.com/">
- <span>Home</span>
- </a>
- </li>
- <li>
- <a class="about" href="http://www.jsfoot.com/">
- <span>About</span>
- </a>
- </li>
- <li>
- <a class="services" href="http://www.jsfoot.com/">
- <span>Services</span>
- </a>
- </li>
- <li>
- <a class="portfolio" href="http://www.jsfoot.com/">
- <span>Portfolio</span>
- </a>
- </li>
- <li>
- <a class="contact" href="http://www.jsfoot.com/">
- <span>Contact us</span>
- </a>
- </li>
- </ul>
- </div>
- </body>
- </html>
CSS部分
- *{
- /* A universal CSS reset */
- margin:0;
- padding:0;
- }
- body{
- font-size:14px;
- color:#666;
- background:#111 no-repeat;
- /* CSS3 Radial Gradients */
- background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
- background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
- font-family:Arial, Helvetica, sans-serif;
- }
- #navigationMenu li{
- list-style:none;
- height:39px;
- padding:2px;
- width:40px;
- }
- #navigationMenu span{
- /* Container properties */
- width:0;
- left:38px;
- padding:0;
- position:absolute;
- overflow:hidden;
- /* Text properties */
- font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
- font-size:18px;
- font-weight:bold;
- letter-spacing:0.6px;
- whitewhite-space:nowrap;
- line-height:39px;
- /* CSS3 Transition: */
- -webkit-transition: 0.25s;
- /* Future proofing (these do not work yet): */
- -moz-transition: 0.25s;
- transition: 0.25s;
- }
- #navigationMenu a{
- background:url('http://tva3.sinaimg.com/large/6b002b97gw1ehiqr3hpu1j205a026t8r.jpg') no-repeat;
- height:39px;
- width:38px;
- display:block;
- position:relative;
- }
- /* General hover styles */
- #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
- #navigationMenu a:hover{
- text-decoration:none;
- /* CSS outer glow with the box-shadow property */
- -moz-box-shadow:0 0 5px #9ddff5;
- -webkit-box-shadow:0 0 5px #9ddff5;
- box-shadow:0 0 5px #9ddff5;
- }
- /* Green Button */
- #navigationMenu .home { background-position:0 0;}
- #navigationMenu .home:hover { background-position:0 -39px;}
- #navigationMenu .home span{
- background-color:#7da315;
- color:#3d4f0c;
- text-shadow:1px 1px 0 #99bf31;
- }
- /* Blue Button */
- #navigationMenu .about { background-position:-38px 0;}
- #navigationMenu .about:hover { background-position:-38px -39px;}
- #navigationMenu .about span{
- background-color:#1e8bb4;
- color:#223a44;
- text-shadow:1px 1px 0 #44a8d0;
- }
- /* Orange Button */
- #navigationMenu .services { background-position:-76px 0;}
- #navigationMenu .services:hover { background-position:-76px -39px;}
- #navigationMenu .services span{
- background-color:#c86c1f;
- color:#5a3517;
- text-shadow:1px 1px 0 #d28344;
- }
- /* Yellow Button */
- #navigationMenu .portfolio { background-position:-114px 0;}
- #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
- #navigationMenu .portfolio span{
- background-color:#d0a525;
- color:#604e18;
- text-shadow:1px 1px 0 #d8b54b;
- }
- /* Purple Button */
- #navigationMenu .contact { background-position:-152px 0;}
- #navigationMenu .contact:hover { background-position:-152px -39px;}
- #navigationMenu .contact span{
- background-color:#af1e83;
- color:#460f35;
- text-shadow:1px 1px 0 #d244a6;
- }
- /* The styles below are only needed for the demo page */
- #main{
- margin:80px auto;
- position:relative;
- width:40px;
- }
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/2945.html