Skip to content

Instantly share code, notes, and snippets.

@peixian

peixian/index.html

Created September 11, 2012 21:22
Show Gist options
  • Save peixian/3702173 to your computer and use it in GitHub Desktop.
Save peixian/3702173 to your computer and use it in GitHub Desktop.
Download ZIP
Simple responsive menu pattern for sites with TONS of links in nav
Raw
index.html
<div class="menu-open menu-button"><a href="#">Menu</a></div>
<div id="menu">
<div class="menu-close menu-button"><a href="#">Close</a></div>
<div id="menu-inner">
<div id="menu-filter"><input type="search" placeholder="filter"></div>
<nav>
<ul>
<li>
<h2>Hypermagic Mountain</h2>
<ul>
<li><a href="#">2 Morro Morro Land</a></li>
<li><a href="#">Captain Caveman</a></li>
<li><a href="#">Birdy</a></li>
<li><a href="#">Riffwraiths</a></li>
<li><a href="#">Megaghost</a></li>
<li><a href="#">Magic Mountain</a></li>
<li><a href="#">Dead Cowboy</a></li>
<li><a href="#">Bizarro Zarro Land</a></li>
<li><a href="#">Mohawkwindmill</a></li>
<li><a href="#">Bizarro Bike</a></li>
<li><a href="#">Infinity Farm</a></li>
<li><a href="#">No Rest for the Obsessed</a></li>
<li><a href="#">2 Morro Morro Land</a></li>
<li><a href="#">Captain Caveman</a></li>
<li><a href="#">Birdy</a></li>
<li><a href="#">Riffwraiths</a></li>
<li><a href="#">Megaghost</a></li>
<li><a href="#">Magic Mountain</a></li>
<li><a href="#">Dead Cowboy</a></li>
<li><a href="#">Bizarro Zarro Land</a></li>
<li><a href="#">Mohawkwindmill</a></li>
<li><a href="#">Bizarro Bike</a></li>
<li><a href="#">Infinity Farm</a></li>
<li><a href="#">No Rest for the Obsessed</a></li>
<li><a href="#">2 Morro Morro Land</a></li>
<li><a href="#">Captain Caveman</a></li>
<li><a href="#">Birdy</a></li>
<li><a href="#">Riffwraiths</a></li>
<li><a href="#">Megaghost</a></li>
<li><a href="#">Magic Mountain</a></li>
<li><a href="#">Dead Cowboy</a></li>
<li><a href="#">Bizarro Zarro Land</a></li>
<li><a href="#">Mohawkwindmill</a></li>
<li><a href="#">Bizarro Bike</a></li>
<li><a href="#">Infinity Farm</a></li>
<li><a href="#">No Rest for the Obsessed</a></li>
<li><a href="#">2 Morro Morro Land</a></li>
<li><a href="#">Captain Caveman</a></li>
<li><a href="#">Birdy</a></li>
<li><a href="#">Riffwraiths</a></li>
<li><a href="#">Megaghost</a></li>
<li><a href="#">Magic Mountain</a></li>
<li><a href="#">Dead Cowboy</a></li>
<li><a href="#">Bizarro Zarro Land</a></li>
<li><a href="#">Mohawkwindmill</a></li>
<li><a href="#">Bizarro Bike</a></li>
<li><a href="#">Infinity Farm</a></li>
<li><a href="#">No Rest for the Obsessed</a></li>
</ul>
</li>
<li>
<h2>Wonderful Rainbow</h2>
<ul>
<li><a href="#">Hello Morning</a></li>
<li><a href="#">Assassins</a></li>
<li><a href="#">Dracula Mountain</a></li>
<li><a href="#">2 Towers</a></li>
<li><a href="#">On Fire</a></li>
<li><a href="#">Crown of Storms</a></li>
<li><a href="#">Longstockings</a></li>
<li><a href="#">Wonderful Rainbow</a></li>
<li><a href="#">30,000 Monkies</a></li>
<li><a href="#">Duel in the Deep</a></li>
<li><a href="#">Hello Morning</a></li>
<li><a href="#">Assassins</a></li>
<li><a href="#">Dracula Mountain</a></li>
<li><a href="#">2 Towers</a></li>
<li><a href="#">On Fire</a></li>
<li><a href="#">Crown of Storms</a></li>
<li><a href="#">Longstockings</a></li>
<li><a href="#">Wonderful Rainbow</a></li>
<li><a href="#">30,000 Monkies</a></li>
<li><a href="#">Duel in the Deep</a></li>
<li><a href="#">Hello Morning</a></li>
<li><a href="#">Assassins</a></li>
<li><a href="#">Dracula Mountain</a></li>
<li><a href="#">2 Towers</a></li>
<li><a href="#">On Fire</a></li>
<li><a href="#">Crown of Storms</a></li>
<li><a href="#">Longstockings</a></li>
<li><a href="#">Wonderful Rainbow</a></li>
<li><a href="#">30,000 Monkies</a></li>
<li><a href="#">Duel in the Deep</a></li>
<li><a href="#">Hello Morning</a></li>
<li><a href="#">Assassins</a></li>
<li><a href="#">Dracula Mountain</a></li>
<li><a href="#">2 Towers</a></li>
<li><a href="#">On Fire</a></li>
<li><a href="#">Crown of Storms</a></li>
<li><a href="#">Longstockings</a></li>
<li><a href="#">Wonderful Rainbow</a></li>
<li><a href="#">30,000 Monkies</a></li>
<li><a href="#">Duel in the Deep</a></li>
<li><a href="#">Hello Morning</a></li>
<li><a href="#">Assassins</a></li>
<li><a href="#">Dracula Mountain</a></li>
<li><a href="#">2 Towers</a></li>
<li><a href="#">On Fire</a></li>
<li><a href="#">Crown of Storms</a></li>
<li><a href="#">Longstockings</a></li>
<li><a href="#">Wonderful Rainbow</a></li>
<li><a href="#">30,000 Monkies</a></li>
<li><a href="#">Duel in the Deep</a></li>
</ul>
</li>
<li>
<h2>Earthly Delights</h2>
<ul>
<li><a href="#">Sound Guardians</a></li>
<li><a href="#">Nation of Boar</a></li>
<li><a href="#">Colossus</a></li>
<li><a href="#">The Sublime Freak</a></li>
<li><a href="#">Flooded Chamber</a></li>
<li><a href="#">Funny Farm</a></li>
<li><a href="#">Rain on Lake I'm Swimming In</a></li>
<li><a href="#">S.O.S.</a></li>
<li><a href="#">Transmissionary</a></li>
<li><a href="#">Sound Guardians</a></li>
<li><a href="#">Nation of Boar</a></li>
<li><a href="#">Colossus</a></li>
<li><a href="#">The Sublime Freak</a></li>
<li><a href="#">Flooded Chamber</a></li>
<li><a href="#">Funny Farm</a></li>
<li><a href="#">Rain on Lake I'm Swimming In</a></li>
<li><a href="#">S.O.S.</a></li>
<li><a href="#">Transmissionary</a></li>
<li><a href="#">Sound Guardians</a></li>
<li><a href="#">Nation of Boar</a></li>
<li><a href="#">Colossus</a></li>
<li><a href="#">The Sublime Freak</a></li>
<li><a href="#">Flooded Chamber</a></li>
<li><a href="#">Funny Farm</a></li>
<li><a href="#">Rain on Lake I'm Swimming In</a></li>
<li><a href="#">S.O.S.</a></li>
<li><a href="#">Transmissionary</a></li>
<li><a href="#">Sound Guardians</a></li>
<li><a href="#">Nation of Boar</a></li>
<li><a href="#">Colossus</a></li>
<li><a href="#">The Sublime Freak</a></li>
<li><a href="#">Flooded Chamber</a></li>
<li><a href="#">Funny Farm</a></li>
<li><a href="#">Rain on Lake I'm Swimming In</a></li>
<li><a href="#">S.O.S.</a></li>
<li><a href="#">Transmissionary</a></li>
<li><a href="#">Sound Guardians</a></li>
<li><a href="#">Nation of Boar</a></li>
<li><a href="#">Colossus</a></li>
<li><a href="#">The Sublime Freak</a></li>
<li><a href="#">Flooded Chamber</a></li>
<li><a href="#">Funny Farm</a></li>
<li><a href="#">Rain on Lake I'm Swimming In</a></li>
<li><a href="#">S.O.S.</a></li>
<li><a href="#">Transmissionary</a></li>
</ul>
</li>
</ul>
</nav>
<div class="menu-close"><a href="#">X</a></div>
</div>
</div>
<section>
<h1>Lightning Bolt</h1>
<h3>Simple responsive menu pattern for sites with TONS of links in nav</h3>
<p>
<span class="menu-open"><a href="#">Open menu</a></span> |
<a href="http://codepen.io/Elbone/pen/kHApr" target="_top">View code</a> |
<a href="http://codepen.io/Elbone/full/kHApr" target="_top">Full screen</a>
</p>
<p>Lightning Bolt is a noise rock duo from Providence, Rhode Island, composed of Brian Chippendale on drums and vocals and Brian Gibson on bass guitar. The group's discography consists of five full-length albums and a number of 7-inch singles and splits. Lightning Bolt have also appeared on numerous compilations, starred in the 2003 tour-DVD <i>The Power of Salad</i>, and performed in DVD compilations such as <i>Pick a Winner</i> (Load Records, 2004) and <i>Sleep When You are Dead</i> by performance artists Mighty Robot (Contact Records, 2007).</p>
<p>&mdash; <a href=http://en.wikipedia.org/wiki/Lightning_Bolt_(band)>Wikipedia</a></p>
</section>
Raw
script.js
/* NOTE: Filtering js not included */
// Define menu
var menu = '#menu';
// Hide menu
$(menu).addClass('hide');
// Open menu
$('.menu-open a').click(function(e) {
e.preventDefault;
$(menu).fadeIn(200);
});
// Close menu
$('.menu-close a').click(function(e) {
e.preventDefault;
$(menu).fadeOut(200);
});
Raw
style.css
/* Global */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
/* Menu */
#menu {
padding: 20px;
color: #c0ffee; /* Drink up! */
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.menu-button a {
padding: 8px 20px;
background: #191919;
border-radius: 2px;
display: inline-block;
}
#menu nav a:hover {
color: #ca2be3;
}
#menu.hide {
display: none;
}
#menu-inner {
padding: 1em;
border-radius: 3px;
background: #191919;
margin-top: -4px;
}
#menu nav:after,
#menu nav > ul > li > ul:after {
content: "";
display: table;
clear: both;
}
#menu nav li {
padding: 2px 4px;
}
#menu nav > ul > li {
padding: 1em;
}
#menu nav > ul > li > ul > li {
float: left;
width: 20%;
}
#menu-filter {
text-align: center;
margin: 1em 0 2em 0;
}
/* Tweak layout */
@media only screen
and (max-width: 500px) {
#menu nav > ul > li > ul > li {
width: 50%;
}
}
@media only screen
and (min-width: 501px)
and (max-width: 800px) {
#menu nav > ul > li > ul > li {
width: 33%;
}
}
@media only screen
and (min-width: 801px)
and (max-width: 1200px) {
#menu nav > ul > li > ul > li {
width: 20%;
}
}
@media only screen
and (min-width: 1201px) {
#menu nav > ul > li > ul > li {
width: 12.5%;
}
}
/* Layout */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #c0ffee;
color: #191919;
font-family: 'Droid Sans Mono', sans-serif;
font-size: 12px;
line-height: 20px;
padding: 20px;
text-align: center;
}
h1 {
font-size: 18px;
margin: 0 0 20px 0;
}
h1:before, h1:after {
content: "\20\26A1\20";
}
h2 {
font-size: 14px;
margin: 0 0 8px 0;
padding: 0 0 6px 0;
border-bottom: 1px solid;
text-transform: uppercase;
}
h3 {
font-size: 12px;
margin: 0 0 8px 0;
font-weight: bold;
}
p {
margin: 0 0 8px 0;
}
a {
color: #decaff; /* Drink up! */
text-decoration: none;
}
section {
max-width: 600px;
margin: 40px auto 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment