Snap Builder HTML5 CSS3 Free Public Codes Library


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 CSS3 Responsive Menu</title>

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
/* Begin HTML5 CSS3 Responsive Menu */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Nick La : http://twitter.com/nickla : Creative Commons License == */
body {font:90%/160% Arial, Helvetica, sans-serif; color:#666; width:900px; max-width:96%; margin:0 auto;}
p {margin:0 0 20px;}
a {color:#69C;text-decoration:none;}
a:hover {color:#F60;}
h1, h2, h3 {color:#000;line-height:120%;margin:30px 0 10px;}
h1 {font-size:1.7em;color:#000;}
h2 {font-size:1.4em;border-top:solid 1px #eee;padding-top:20px;}
h3 {font-size:1.1em;}
/* nav */
.nav {margin:20px 0;}
.nav ul {margin:0;padding:0;}
.nav li {margin:0 5px 10px 0;padding:0;list-style:none;display:inline-block;*display:inline; /* ie7 */ }
.nav a {padding:3px 12px;text-decoration:none;color:#999;line-height:100%;}
.nav a:hover {color:#000;}
.nav .current a {background:#999;color:#fff;border-radius:5px;}
/* right nav */
.nav.right ul {text-align:right;}
/* center nav */
.nav.center ul {text-align:center;}
@media screen and (max-width:600px) {
.nav {position:relative;min-height:40px;}
.nav ul {width:180px;padding:5px 0;position:absolute;top:0;left:0;border:solid 1px #aaa;background:#fff url(images/icon-menu.png) no-repeat 10px 11px;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.nav li {display:none; /* hide all <li> items */ margin:0;}
.nav .current {display:block; /* show only current <li> item */ }
.nav a {display:block;padding:5px 5px 5px 32px;text-align:left;}
.nav .current a {background:none;color:#666;}
/* on nav hover */
.nav ul:hover {background-image:none;}
.nav ul:hover li {display:block;margin:0 0 5px;}
.nav ul:hover .current {background:url(images/icon-check.png) no-repeat 10px 7px;}
/* right nav */
.nav.right ul {left:auto;right:0;}
/* center nav */
.nav.center ul {left:50%;margin-left:-90px;}
}
</style>

</head>
<body>

<h1>Demo: Responsive Menu</h1>
<p>Tutorial by <a href="http://twitter.com/nickla" target="_new">Nick La</a></p>
<h3>Resize your browser window or check it out with a mobile device.</h3>

<h2>Left Alignment</h2>

<nav class="nav">
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>

<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
</p>

<h2>Right Alignment</h2>

<nav class="nav right">
<ul>
<li><a href="#">Portfolio</a></li>
<li class="current"><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>

<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>

<h2>Center Alignment</h2>

<nav class="nav center">
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li class="current"><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>

<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.
This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>

<div>You will need to download 2 images for this code snippet:<br />
Place the 2 images in to a folder named /images/ or rename the file path in the STYLES.<br />
<ol>
<li><img src="http://snapbuilder.com/code_snippets/view_code_example/css/menu_and_navigation/images/icon-menu.png"></li>
<li><img src="http://snapbuilder.com/code_snippets/view_code_example/css/menu_and_navigation/images/icon-check.png"></li>
</ol>
</div>

<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_157.html">Responsive Menu</a> page. ]
</div>

</body>
</html>