Posted By

ishottheserif on 08/03/09

Tagged

navigation

Versions (?)

Last Edited at 08/03/09 04:06pm

Statistics

Viewed 721 times

Favorited by 1 user(s)

Related snippets

Appleâ€™s Navigation bar using only CSS

/ Published in: CSS

Works in Safari 3.0

Highlighted TextExpand

<ul>
  <li id="home">
    <a href="">Home</a></li>
  <li id="mac">
    <a href="">Mac</a></li>
  <li id="store">
    <a href="">Store</a></li>
  <li id="ipod">
    <a href="">iPod</a></li>
  <li id="iphone">
    <a href="">iPhone</a></li>
  <li id="download">
    <a href="">Download</a>  </li>
  <li id="support">
    <a href="">Support</a></li>
</ul>

ul#navigation li {
  list-style-type: none;
  display: block;
  width: 8em;
  float: left;
  text-align: center;
  font-family: "Lucida Grande", sans-serif;
  height: 3em;
}

ul#navigation li a {
  display: block;
  padding: .8em .5em .5em .5em;
  text-decoration: none;
}

ul#navigation li:first-child {
  -webkit-border-top-left-radius: .5em;
  -moz-border-radius-topleft: .5em;
  border-top-left-radius: .5em;
  -webkit-border-bottom-left-radius: .5em;
  -moz-border-radius-bottomleft: .5em;
  border-bottom-left-radius: .5em;
}

ul#navigation li:last-child {
  -webkit-border-top-right-radius: .5em;
  -moz-border-radius-topright: .5em;
  border-top-left-radius: .5em;
  -webkit-border-bottom-right-radius: .5em;
  -moz-border-radius-bottomright: .5em;
  border-bottom-right-radius: .5em;
}

ul#navigation li {
  list-style-type: none;
  display: block;
  width: 8em;
  float: left;
  text-align: center;
  font-family: "Lucida Grande", sans-serif;
  height: 3em;
  border-right: 1px #818181 solid;
  -webkit-box-shadow: 1px 1px 1px #bbb;
  box-shadow: 1px 1px 1px #bbb;
}

ul#navigation li a {
  display: block;
  padding: .8em .5em .5em .5em;
  text-decoration: none;
  color: #292929;
  text-shadow: 1px 1px 0px #cccccc;
}

#navigation li {
  background-color: #c9c9c9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
}

#navigation li:hover {
  background-color: #333333;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#4c4c4c), color-stop(0.6, #474747));
  }

#navigation li:hover a {
  color: #e8e8e8;
  text-shadow: 1px 1px 0px #353535;
}

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

Report this snippet Tweet