A CodePen by Protohominid. Responsive Nav with SASS & JQuery - http://cdpn.io/xBHsA This is a mashup of a couple responsive nav systems I like. I'm not a programmer by training so I'm hoping someone can look at this javascript and give me some feedback. Is it performant? It seems to work well on my iOS6 devices, but it doesn't work in the Xcode …

index.html

<nav class="main-nav" id="main-nav" role="navigation">
  <ul id="main-nav-ul" class="main-nav-ul">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul class="sub-menu">
        <li><a href="#">Menu Item with Longer Name</a></li>
        <li><a href="#">Another Link</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul class="sub-menu">
        <li><a href="#">Services Subpage</a></li>
      </ul>
    </li>
    <li><a href="#">Location</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

script.js

//-----------------------------------------------------------
// responsive nav, based on https://github.com/MartinBlackburn/responsive-nav and https://github.com/twelve20/Responsive-Menu
//-----------------------------------------------------------
(function($){
	
	$.fn.responsiveNav = function(options) {
	
		// default settings
		var settings = $.extend({
			'breakPoint': 640,
			'navControlText': 'Menu'
		}, options);
		
		
		return this.each(function() {
		
			var docWidth = $(document).width(),
				wrapper = $(this),
				navUL = wrapper.find("ul").first();
			
			//add open class to nav
			wrapper.addClass("nav-open");
		
			//add nav controls
			var navControl = $('<div class="navControl" id="navControl"/>').prependTo(wrapper);
			var navControlLink = $('<a/>', {"text": settings.navControlText}).prependTo(navControl);
		
			function init() {
				checkNav();
			}

			init();

			//open or close nav
			function toggleNav() {
				//toggle open class
				wrapper.toggleClass("open");
		
				//open or close nav
				navUL.slideToggle();
			}
		
			$('#navControl a').on('click', function() {
				toggleNav();
			});
		
			//hide or show nav controls depending on breakpoint
			function checkNav() {
				if( docWidth > settings.breakPoint ) {
					navControl.hide();
		
					//if nav is hidden, open it
					if( !wrapper.hasClass("nav-open") ) {
						navUL.css("display", "block");
						wrapper.addClass("nav-open");
					}
				}
				else {
					navControl.show();
		
					//if nav is open, hide it
					if( wrapper.hasClass("nav-open") ) {
						navUL.css("display", "none");
						wrapper.removeClass("nav-open");
					}
				}
			}
		
			//listener for screen width
			$(window).resize(function() {
				docWidth = $(document).width();
				checkNav();
			});
			
		});
	};
	
})(jQuery);
// end jquery plugin

// responsive nav init:
$("#main-nav").responsiveNav({
  breakPoint: 680, // default is 640
  navControlText: "Navigation" // default is "Menu"
});

style.scss

@import "compass";
body {
  padding: 1em;
  font-family: "Helvetica Neue";
}

.main-nav {
	background: gray;
	color: white;
	position: relative;
	z-index: 99;
}

.main-nav-ul {
	position: relative;
	z-index: 5;
	background: darken(gray, 15%);
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	border-top: 1px solid lighten(gray, 15%);
  .js & {display: none;}

	ul {
		margin: 0;
		padding: 0;
	}
	li {
		display: block;
		position: relative;
		z-index: 10;
		margin: 0;
		border-top: 1px solid lighten(gray, 15%);
		&:first-child {
			border-top: none;
		}
	}
	a {
    display: block;
    padding: .6em 0;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    color: white;
	}
	.sub-menu {
		border-top: 1px solid rgba(white, .3);
	}
}

.navControl {
	text-align: center;

	a {
		display: block;
		padding: .6em 0;
		color: white;
    line-height: 1;
	}
}


//-------------------------------------------
// Switch to horizontal navbar
// breakpoint needs to match setting in js
//-------------------------------------------

@media (min-width: 680px) {
  .main-nav-ul {
		text-align: center;
		background: gray;
    border-top: none;
    
		.js & {display: block;}
		
		& > li {
			float: left;
		}
		
		li {
			border: none;
			border-right: 1px solid rgba(white, .2);
			
			&:last-child {border-right: none;}
		}
    
		a {
			padding-left: 1em;
			padding-right: 1em;
			background: darken(gray, 15%);
			position: relative;
			
			&:hover {
				background: lighten(gray, 15%);
			}
      
			&:active {
				@include box-shadow(inset 1px 2px 6px darken(gray, 40%));
			}
		}
    
		.sub-menu {
			padding: 0;
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			@include box-shadow(0 5px 10px rgba(black, .3));
			text-align: left;
			border: none;
			background: gray;
			
			li {
				display: block;
				border-top: 1px solid lighten(gray, 15%);
			}
      
			a {
				white-space: nowrap;
				text-align: left;
			}
		}
    
		a:hover + .sub-menu,
		.sub-menu:hover {
			display: block;
		}
	}
}