Turn a navigation list into a dropdown. Uses jQuery and the JavaScript matchMedia command, which is still fairly new and so currently relegates this to prototypes only.

Navigation list to dropdown

if (matchMedia) {
  var mq = window.matchMedia("(max-device-width:320px)");
	mq.addListener(WidthChange);
	WidthChange(mq);
}

function WidthChange(mq) {
	if (mq.matches) {
     var $dropnav = $("<select id='respnav'></select>");
     var $option = $("<option>Navigate to a section</option>").appendTo($dropnav);
   $("nav li a").each(function(i){
      $elm = $(this);
      $option.clone().attr("value", $elm.attr("href")).text($elm.text()).appendTo($dropnav);
   		});

		$($dropnav).children().eq($("ul[role='navigation'] li.selected").index()+1).attr("selected","selected");
    // $($dropnav).appendTo("ul[role='navigation']");
	}

	// else {
	// 	// window width is less than 500px
	// }

	$("#responsivenav").insertAfter(".conditionlist");