Skip to content

Instantly share code, notes, and snippets.

@abedsujan

abedsujan/jquery_responsive_mobile_menu._index.html

Created April 1, 2016 21:01
Show Gist options
  • Save abedsujan/1a9bd4dc60943cbe68f607008d5b38b9 to your computer and use it in GitHub Desktop.
Save abedsujan/1a9bd4dc60943cbe68f607008d5b38b9 to your computer and use it in GitHub Desktop.
Download ZIP
Simple jQuery responsive menu.
Raw
jquery_responsive_mobile_menu._index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="menu">
<ul>
<li class="selected"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</div>
<h1>Home</h1>
<p>This is the home page.</p>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery_responsive_mobile_menu.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Raw
jquery_responsive_mobile_menu.js
//Problem: It look gross in smaller browser widths and small devices
//Solution: To hide the text links and swap them out with a more appropriate navigation
//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);
//Cycle over menu links
$("#menu a").each(function(){
var $anchor = $(this);
//Create an option
var $option = $("<option></option>");
//Deal with selected options depending on current page
if($anchor.parent().hasClass("selected")) {
$option.prop("selected", true);
}
//option's value is the href
$option.val($anchor.attr("href"));
//option's text is the text of link
$option.text($anchor.text());
//append option to select
$select.append($option);
});
//Bind change listener to the select
$select.change(function(){
//Go to select's location
window.location = $select.val();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment