Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
niceMenu.js - Similar to Mean Menu, but supports converting multiple menus into one
/*!** 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; }
/*
* 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');
}
});
}
/*!** 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment