Advanced Search

Apple’s Navigation bar using only CSS

/ Published in: CSS
Save to your folder(s)
Works in Safari 3.0

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <ul>
  2.   <li id="home">
  3.     <a href="">Home</a></li>
  4.   <li id="mac">
  5.     <a href="">Mac</a></li>
  6.   <li id="store">
  7.     <a href="">Store</a></li>
  8.   <li id="ipod">
  9.     <a href="">iPod</a></li>
  10.   <li id="iphone">
  11.     <a href="">iPhone</a></li>
  12.   <li id="download">
  13.     <a href="">Download</a>  </li>
  14.   <li id="support">
  15.     <a href="">Support</a></li>
  16. </ul>
  17.  
  18. ul#navigation li {
  19.   list-style-type: none;
  20.   display: block;
  21.   width: 8em;
  22.   float: left;
  23.   text-align: center;
  24.   font-family: "Lucida Grande", sans-serif;
  25.   height: 3em;
  26. }
  27.  
  28. ul#navigation li a {
  29.   display: block;
  30.   padding: .8em .5em .5em .5em;
  31.   text-decoration: none;
  32. }
  33.  
  34. ul#navigation li:first-child {
  35.   -webkit-border-top-left-radius: .5em;
  36.   -moz-border-radius-topleft: .5em;
  37.   border-top-left-radius: .5em;
  38.   -webkit-border-bottom-left-radius: .5em;
  39.   -moz-border-radius-bottomleft: .5em;
  40.   border-bottom-left-radius: .5em;
  41. }
  42.  
  43. ul#navigation li:last-child {
  44.   -webkit-border-top-right-radius: .5em;
  45.   -moz-border-radius-topright: .5em;
  46.   border-top-left-radius: .5em;
  47.   -webkit-border-bottom-right-radius: .5em;
  48.   -moz-border-radius-bottomright: .5em;
  49.   border-bottom-right-radius: .5em;
  50. }
  51.  
  52. ul#navigation li {
  53.   list-style-type: none;
  54.   display: block;
  55.   width: 8em;
  56.   float: left;
  57.   text-align: center;
  58.   font-family: "Lucida Grande", sans-serif;
  59.   height: 3em;
  60.   border-right: 1px #818181 solid;
  61.   -webkit-box-shadow: 1px 1px 1px #bbb;
  62.   box-shadow: 1px 1px 1px #bbb;
  63. }
  64.  
  65. ul#navigation li a {
  66.   display: block;
  67.   padding: .8em .5em .5em .5em;
  68.   text-decoration: none;
  69.   color: #292929;
  70.   text-shadow: 1px 1px 0px #cccccc;
  71. }
  72.  
  73. #navigation li {
  74.   background-color: #c9c9c9;
  75.   background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
  76. }
  77.  
  78. #navigation li:hover {
  79.   background-color: #333333;
  80.   background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#4c4c4c), color-stop(0.6, #474747));
  81.   }
  82.  
  83. #navigation li:hover a {
  84.   color: #e8e8e8;
  85.   text-shadow: 1px 1px 0px #353535;
  86. }

URL: http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.