Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Menus & Navigation >> Responsive Menu


Code Snippet </> Info


Snippet Name: Responsive Menu

Description: Create a responsive menu with ease using this snippet.
Example: View Code Demo

Note: You will need to download 2 images (right click - save as) from the demo page for this code snippet.

Author: Nick La

Last Modified: 2015-03-20 00:18:24

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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 http://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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library