Skip to content

Instantly share code, notes, and snippets.

@jch

jch/html5-navigations.html

Created December 14, 2010 05:00
Show Gist options
  • Save jch/740024 to your computer and use it in GitHub Desktop.
Save jch/740024 to your computer and use it in GitHub Desktop.
Download ZIP
sample navigations created with pure html5
Raw
html5-navigations.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type='text/css'>
html {
background-color: #cacaca;
}
.box {
margin: 0 80px;
border-top: 1px solid #b6b6b6;
border-right: 1px solid #a3a3a3;
border-left: 1px solid #a3a3a3;
border-bottom: 1px solid #7f7f7f;
border-radius: 0px;
padding: 2em;
text-align: left;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#eaeaea));
-webkit-box-shadow: rgba(0, 0, 0, 0.286719) 0px 1px 3px, rgba(0, 0, 0, 0.286719) 2px 2px 3px;
}
</style>
</head>
<body>
<style type="text/css" media="screen">
.embossed-navigation {
background-color: #fff;
border-radius: 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.386719) 0px 1px 3px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f3f3f3));
border-bottom: 1px solid #fff;
margin: 6px 40px;
}
.embossed-navigation > ul {
/*http://24ways.org/2005/centered-tabs-with-css*/
text-align: center;
padding: 15px 10px;
}
.embossed-navigation li {
display: inline;
}
.embossed-navigation a {
padding: 8px 10px;
margin-right: 20px;
margin: 6px 10px 6px 10px;
border-radius: 4px;
text-decoration: none;
color: #444;
opacity: 0.6;
-webkit-transition: opacity 0.1s linear;
}
.embossed-navigation a:hover {
/* using borders changes the width + height and causes a jerk */
-webkit-box-shadow: rgba(0, 0, 0, 0.08) 1px 1px 0px, rgba(0, 0, 0, 0.08) -1px -1px 0px;
opacity: 1.0;
}
.embossed-navigation a.selected {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #cecece), color-stop(0.1, #e2e2e2), color-stop(0.95, #eaeaea), color-stop(1.0, #ddd));
border-top: 1px solid #c0c0c0;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #fff;
}
</style>
<div class="embossed-navigation">
<ul>
<li><a href="#home" class="selected">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#store">Store</a></li>
</ul>
</div>
<style type="text/css" media="screen">
.tabbed-navigation {
margin: 10px 40px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.0, #fff), color-stop(1.0, #eaeaea));
-webkit-box-shadow: rgba(0,0,0,0.28) 0px 1px 3px;
}
.tabbed-navigation ul {
text-align: left;
padding: 10px 0px;
}
.tabbed-navigation li {
display: inline;
padding: 0 0 0 0;
}
.tabbed-navigation a {
text-decoration: none;
color: #888;
padding: 10px 18px 11px 16px;
/* borders have a gap in the middle */
border-right: 1px solid #ccc;
}
.tabbed-navigation a.selected {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #eaeaea), color-stop(1.0, #cacaca));
}
</style>
<div class="tabbed-navigation">
<ul>
<li><a href="#home" class="selected">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#store">Store</a></li>
</ul>
</div>
<style type="text/css" media="screen">
.overflow-navigation {
margin: 0px 40px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #d2d2d2), color-stop(1.0, #fff));
}
.overflow-navigation ul {
padding: 15px 0px 9px 0;
border-bottom: 1px solid #eaeaea;
}
.overflow-navigation li {
display: inline;
}
.overflow-navigation a {
text-decoration: none;
color: #888;
padding: 10px 16px;
}
.overflow-navigation a.selected {
border-radius: 4px;
border-top: 1px solid #f6f6f6;
border-left: 1px solid #f6f6f6;
border-right: 1px solid #f6f6f6;
border-bottom: 1px solid #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #eaeaea), color-stop(1.0, #fff));
}
</style>
<div class="overflow-navigation">
<ul>
<li><a href="#home" class="selected">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#store">Store</a></li>
</ul>
</div>
<div class="overflow-body" style="text-align: left; background: #fff; height: 20px; margin: 0 40px 6px 40px; padding: 1.5em; color: #444">
</div>
<style type="text/css" media="screen">
.inset-navigation li {
display: inline;
}
.inset-navigation a {
text-decoration: none;
color: #666;
text-shadow: 1px 1px 1px #fff;
padding: 10px 16px;
}
.inset-navigation a.selected {
color: #bbb;
}
</style>
<div class="box">
<div class="inset-navigation">
<ul>
<li><a href="#home" class="selected">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#store">Store</a></li>
</ul>
</div>
</div>
<style type="text/css" media="screen">
.vertical-image-navigation {
margin: 20px 40px;
text-align: left;
}
.vertical-image-navigation ul {
float: left;
background: #fff;
}
.vertical-image-navigation li {
}
.vertical-image-navigation a {
display: block;
text-decoration: none;
padding: 10px 15px 10px 32px;
color: #888;
}
.vertical-image-navigation a:after {
float: right;
content: ">";
margin-left: 35px;
color: #c0c0c0;
text-shadow: 1px 1px 1px #fff;
border-radius: 10px;
padding: 0px 4px;
background: #e6e6e6;
}
.vertical-image-navigation a.selected {
color: #e6e6e6;
background: #6f6f6f;
border-bottom: 1px solid #666;
}
.vertical-image-navigation a.selected:after {
color: #888;
text-shadow: none;
background: #5a5a5a;
}
</style>
<div class="vertical-image-navigation">
<ul>
<li><a href="#home" class="selected">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#store">Store</a></li>
</ul>
<br style="clear:both; margin: 40px;" />
</div>
</body>
</html>
Raw
reset-min.css
/*
http://developer.yahoo.com/yui/base/
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.8.2r1
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}body{text-align:center;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main,.yui-g .yui-u .yui-g{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-g .yui-u{width:48.1%;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}.yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#hd:after,#bd:after,#ft:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#hd,#bd,#ft,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment