A pure HTML and CSS navigation bar based on something you might see in an iOS application. Forked from odd-e's original. Original - http://codepen.io/odd-e/details/iIHJy

index.html

<ul id="nav">
  <li></li>
  <li></li>
<li class="home mid"><a href="#"></a></li>
  <li></li>
  <li></li>
</ul>
<div>
  

script.js

// Forked to include Nicolas Gallagher's CSS GUI Icons. The end effect isn't quite as pretty as it was before but it removes the logo image and replaces it with some code (782 characters).

//Think of it more as a concept.

// Original codepen 
//http://codepen.io/odd-e/details/iIHJy

// Nicolas Gallagher's CSS GUI Icons
//http://nicolasgallagher.com/pure-css-gui-icons/

// - Paul Tibbetts @paul_tibbetts (site coming soon)

style.css

* { margin: 0; padding: 0; }
html, body {
  background: #222;
}
#nav {
  list-style: none;
  width: 638px;
  height: 100px;
  margin: 40px auto;
  border: 2px solid #000;
  border-radius: 6px 6px 0 0;
}
.mid {
  background: #00AEE9;
  border-top: 2px solid #8bd1e8 !important;
  border-bottom: 2px solid #002633;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00b6f2), to(#007399));
   background-image: -webkit-linear-gradient(top, #00b6f2, #007399) !important; 
   background-image:    -moz-linear-gradient(top, #00b6f2, #007399) !important;
   background-image:     -ms-linear-gradient(top, #00b6f2, #007399) !important;
   background-image:      -o-linear-gradient(top, #00b6f2, #007399) !important;
}
.mid:active {
  border-top: 2px solid #00AEE9 !important;
  border-bottom: 2px solid #8bd1e8;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007399), to(#00b6f2));
   background-image: -webkit-linear-gradient(bottom, #00b6f2, #007399) !important; 
   background-image:    -moz-linear-gradient(bottom, #00b6f2, #007399) !important;
   background-image:     -ms-linear-gradient(bottom, #00b6f2, #007399) !important;
   background-image:      -o-linear-gradient(bottom, #00b6f2, #007399) !important;
}
#nav li img {
  width: 86px;
  margin-left: 20px;
  opacity: 0.8;
}
#nav li img:active {
  opacity: 0.6;
}
#nav li {
  display: block;
  float: left;
  width: 126px;
  border-top: 2px solid #808080;
  border-right: 2px solid #000;
  border-bottom: 1px solid #333;
  box-shadow: inset 0 0 2px #555;
  height: 97px;
  background: #333;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#111));
   background-image: -webkit-linear-gradient(top, #333, #111); 
   background-image:    -moz-linear-gradient(top, #333, #111);
   background-image:     -ms-linear-gradient(top, #333, #111);
   background-image:      -o-linear-gradient(top, #333, #111);
}
#nav li:active {
  border-top: 2px solid #333;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
   background-image: -webkit-linear-gradient(bottom, #333, #222);
   background-image:    -moz-linear-gradient(bottom, #333, #222);
   background-image:     -ms-linear-gradient(bottom, #333, #222);
   background-image:      -o-linear-gradient(bottom, #333, #222);
}

#nav li:first-child {
  border-radius: 6px 0 0 0;
}
#nav li:last-child {
  border-radius: 0 6px 0 0;
  border-right: 0 solid #000;
}

/* ------------------------------------------
PURE CSS GUI ICONS
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-gui-icons/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 29 July 2010
Version: 1.0.1

Dual licensed under MIT and GNU GPLv2 � Nicolas Gallagher
------------------------------------------ */

li {
    position:relative;
    z-index:1;
}

li:before,
li:after,
li a:before,
li a:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}


/* HOME ICON */

.home a:before {
    left:26%;
    border-style:solid;
    border-color:transparent;
    border-width:32px 28px;
    border-bottom-color:#003344;
    margin-top:-64px;
    background:transparent;
}

.home a:after {
    left: 32%;
    width:7%;
    height:20%;
    border-style:solid;
    border-color:#003344 #003344 transparent;
    border-width:10px 16px 0;
    margin-top:0;
    background:transparent;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}