niceMenu.js - Similar to Mean Menu, but supports converting multiple menus into one

niceMenu.css

/*!** NICE MENU ***/
/*! Compiled from SCSS - also attached */

body.hasNiceMenu {
  padding-top: 44px; }

.niceMenu {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  padding-top: 44px;
  height: 0;
  width: 100%;
  overflow: hidden;
  color: white;
  font-family: sans-serif;
  font-size: 18px;
  z-index: 10000; }
  .niceMenu.open {
    height: auto; }
  .niceMenu .button {
    position: absolute;
    right: 0;
    top: 0;
    height: 44px;
    width: 44px;
    line-height: 44px;
    font-size: 36px;
    cursor:pointer; }
  .niceMenu ul {
    margin-top: 2px;
    border-top: 10px solid rgba(128, 128, 128, 0.5); }
    .niceMenu ul li {
      margin: 0;
      padding-left: 10px;
      line-height: 40px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
    .niceMenu ul li:last-child {
      border: 0; }
  .niceMenu a {
    color: white;
    font-weight: 300;
    text-decoration: none; }

niceMenu.js

/* 
 * Requires jQuery.
 * Performs a function similar to meanmenu, but combines multiple menus into one mobile menu.
 * Parameters:
 * [selectors] (string) *required - jQuery-style, comma-separated selectors in a single string. Pass selectors as the parent of the <ul> that contains
 *   the menu items. Works best if the parent is <nav>.
 * [winSize] (integer) *optional - Integer-based viewport max width in pixels. Default: 640
 *
 * Include script plus included CSS. Call the function using both $(window).load() and $(window).resize(). $(document).ready() is not currently
 *   supported.
 */

function niceMenu(selectors, winSize){
	var viewport = [];
	viewport.height = $(window).outerHeight(true);
	viewport.width = $(window).outerWidth(true);
	
	if(typeof hasNiceMenu === 'undefined'){
		hasNiceMenu = false;
	}
	var menus = document.querySelectorAll(selectors),
		newMenu = document.createElement('nav');
	newMenu.className = 'niceMenu';

	function createMenu(){
		document.body.insertBefore(newMenu, document.body.firstChild);
		$(newMenu).append('<div class="button">&equiv;</div>');

		for(i = 0; i < menus.length; i++){
			$(menus[i]).find('ul').each(function(index, el) {
				var liChild = $(this).clone();
				$(newMenu).append(liChild);
			});
		}
		$(selectors).hide();
		$('body').addClass('hasNiceMenu');
	}

	function deleteMenu(){
		$('nav.niceMenu').remove();
		$(selectors).show();
		$('body').removeClass('hasNiceMenu');
	}

	if(viewport.width <= (winSize || 640) && !hasNiceMenu){
		createMenu();
		hasNiceMenu = true;
	} else if (viewport.width <= (winSize || 640) && hasNiceMenu){
		return false;
	} else {
		deleteMenu();
		hasNiceMenu = false;
	}

	$('.niceMenu .button').click(function(){
		var isOpen = $(this).hasClass('open');
		if(!isOpen){
			$('.niceMenu').addClass('open');
			$(this).addClass('open');
		} else {
			$('.niceMenu').removeClass('open');
			$(this).removeClass('open');
		}
	});
}

niceMenu.scss

/*!** NICE MENU ***/
/*! Compiled from SCSS - also attached */

body.hasNiceMenu{
	padding-top:44px;
}
.niceMenu{
	background:rgba(black,0.8);
	position:fixed;
	top:0;
	padding-top:44px;
	height:0;
	width:100%;
	overflow:hidden;
	color:white;
	font-family:sans-serif;
	font-size:18px;
	z-index:10000;
	&.open{
		height:auto;
	}
	.button{
		position:absolute;
		right:0;
		top:0;
		height:44px;
		width:44px;
		line-height:44px;
		font-size:36px;
		cursor:pointer;
	}
	ul{
		margin-top:2px;
		border-top:10px solid rgba(gray,0.5);
		li{
			margin:0;
			padding-left:10px;
			line-height:40px;
			border-bottom:1px solid rgba(white, 0.5);
			&:last-child{
				border:0;
			}
		}
	}
	a{
		color:white;
		font-weight:300;
		text-decoration:none;
	}
}