Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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">
<head>
<meta charset="utf-8">
<title>Media Query Testing</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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>
</div>
<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>
</ul>
<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">
</fieldset>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/mediaCheck.js"></script>
<script src="js/script.js"></script>
</body>
</html>
$(function() {
function secondaryNavLinks( e ) {
var $toOpen = $( $( e.target ).attr( "href" ) + ":hidden" );
$( "#secondary-nav" ).children( ".secondary-menu:visible" ).slideUp();
$toOpen.slideDown();
e.preventDefault();
}
function secondaryNavCleanup() {
$( ".secondary-menu" ).removeAttr( "style" );
}
$( ".secondary a" ).on( "click", secondaryNavLinks );
mediaCheck({
media: '(min-width: 800px)',
entry: function() {
secondaryNavCleanup();
},
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.