Skip to content

Instantly share code, notes, and snippets.

@morganestes
Created October 16, 2012 16:19
Show Gist options
  • Save morganestes/3900322 to your computer and use it in GitHub Desktop.
Save morganestes/3900322 to your computer and use it in GitHub Desktop.
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
<ul id="nav">
<li></li>
<li></li>
<li class="home mid"><a href="#"></a></li>
<li></li>
<li></li>
</ul>
<div>
// 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)
* { 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment