Apple’s Navigation bar using only CSS


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

Works in Safari 3.0


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.