Create a gist now

Instantly share code, notes, and snippets.

@robtarr /css
Created Mar 24, 2012

Responsive Navigation with Javascript
ul {
list-style: none;
li {
float: left;
margin-right: 20px;
.secondary-menu {
display: none;
@media all and (min-width: 800px) {
.button-group {
display: none;
.secondary-menu {
display: inherit;
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Media Query Testing</title>
<link rel="stylesheet" href="css/style.css">
<nav id="secondary-nav" class="secondary">
<div class="button-group">
<a href="#quick-links" class="mobile-button">Quick Links</a>
<a href="#site-search" class="mobile-button search-button">Site Search</a>
<ul id="quick-links" class="quick-links-menu secondary-menu">
<li><a href="#" title="">News</a></li>
<li><a href="#" title="">Account Info</a></li>
<li><a href="#" title="">FAQ</a></li>
<li><a href="#" title="">Help</a></li>
<fieldset id="site-search" class="site-search secondary-menu">
<input class="search-field" type="search" name="site-search">
<input class="search-submit" type="submit" value="Search">
<script src="//"></script>
<script src="js/mediaCheck.js"></script>
<script src="js/script.js"></script>
$(function() {
function secondaryNavLinks( e ) {
var $toOpen = $( $( ).attr( "href" ) + ":hidden" );
$( "#secondary-nav" ).children( ".secondary-menu:visible" ).slideUp();
function secondaryNavCleanup() {
$( ".secondary-menu" ).removeAttr( "style" );
$( ".secondary a" ).on( "click", secondaryNavLinks );
media: '(min-width: 800px)',
entry: function() {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment