Brett Brett - 4 months ago 27
jQuery Question

Using Multi-Level Push Menu jQuery Plugin but it's pushing content off screen

I am using the Multi-Level Push Menu jQuery plugin and it's working ok apart from the fact it pushes the content off screen rather than shrink it.

CodePen: http://codepen.io/gutterboy/pen/WQKrya

HTML:

<div class="page-wrap">
<div class="container-fluid">
<div class="row">
<header class="col-sm-12">
<button id="toggle-menu">Toggle Menu</button>
</header>
</div>
<div class="main-wrap row">
<div id="content" class="content col-sm-10">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>

<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>

<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>

<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<aside id="sidebar" class="sidebar col-sm-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu pellentesque purus. Nulla placerat at ligula non ultrices. Fusce posuere, augue eget porta scelerisque, felis magna malesuada ligula, sit amet fermentum diam neque a velit. Suspendisse volutpat nec justo at eleifend. Quisque eu efficitur augue. Mauris sapien metus, scelerisque vel egestas vel, accumsan in tortor. Integer ultrices feugiat dui, et ultricies orci tristique non. Vestibulum scelerisque metus sed cursus rhoncus. Proin dictum malesuada enim, ac maximus odio sollicitudin sed. Donec sollicitudin porta nisi quis venenatis. Vivamus elementum sem ac nisl tincidunt pretium. Pellentesque blandit fringilla mi, et eleifend lectus vulputate ut. Etiam rutrum, elit eu tincidunt commodo, odio justo pretium dui, non efficitur arcu libero in sapien. In placerat convallis tortor eu egestas.
</aside>
</div>
<div id="menu">
<nav>
<h2><i class="fa fa-reorder"></i>All Categories</h2>
<ul>
<li>
<a href="#"><i class="fa fa-laptop"></i>Devices</a>
<h2><i class="fa fa-laptop"></i>Devices</h2>
<ul>
<li>
<a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
<h2><i class="fa fa-phone"></i>Mobile Phones</h2>
<ul>
<li>
<a href="#">Super Smart Phone</a>
</li>
<li>
<a href="#">Thin Magic Mobile</a>
</li>
<li>
<a href="#">Performance Crusher</a>
</li>
<li>
<a href="#">Futuristic Experience</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-desktop"></i>Televisions</a>
<h2><i class="fa fa-desktop"></i>Televisions</h2>
<ul>
<li>
<a href="#">Flat Super Screen</a>
</li>
<li>
<a href="#">Gigantic LED</a>
</li>
<li>
<a href="#">Power Eater</a>
</li>
<li>
<a href="#">3D Experience</a>
</li>
<li>
<a href="#">Classic Comfort</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
<h2><i class="fa fa-camera-retro"></i>Cameras</h2>
<ul>
<li>
<a href="#">Smart Shot</a>
</li>
<li>
<a href="#">Power Shooter</a>
</li>
<li>
<a href="#">Easy Photo Maker</a>
</li>
<li>
<a href="#">Super Pixel</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>Magazines</a>
<h2><i class="fa fa-book"></i>Magazines</h2>
<ul>
<li>
<a href="#">National Geographics</a>
</li>
<li>
<a href="#">The Spectator</a>
</li>
<li>
<a href="#">Rambler</a>
</li>
<li>
<a href="#">Physics World</a>
</li>
<li>
<a href="#">The New Scientist</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
<h2><i class="fa fa-shopping-cart"></i>Store</h2>
<ul>
<li>
<a href="#"><i class="fa fa-tags"></i>Clothes</a>
<h2><i class="fa fa-tags"></i>Clothes</h2>
<ul>
<li>
<a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
<h2><i class="fa fa-female"></i>Women's Clothing</h2>
<ul>
<li>
<a href="#">Tops</a>
</li>
<li>
<a href="#">Dresses</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
<h2><i class="fa fa-male"></i>Men's Clothing</h2>
<ul>
<li>
<a href="#">Shirts</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Jewelry</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Grocery</a>
</li>
</ul>
</li>
<li>
<a href="#">Collections</a>
</li>
<li>
<a href="#">Credits</a>
</li>
</ul>
</nav>
</div>
</div>
</div>


CSS:

header {

position: fixed !important;
top: 0;
left: 0;
width: 100%;
text-align: right;
height: 57px;
padding-top: 15px;
padding-bottom: 20px;
background-color: #0B093C;
z-index: 2;

button {
color: #fff;
background-color: transparent;
border: none;
}

}

.main-wrap {
margin-top: 57px;
}

.content {
padding-top: 10px;
padding-bottom: 10px;
height: 500px;
background-color: #827FB2;
}

.sidebar {

padding-top: 10px;
padding-bottom: 10px;
height: 500px;
background-color: #363377;
color: #fff;
}

.multilevelpushmenu_wrapper {
position: fixed;
top: 57px;
right: 0;
overflow: hidden;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}

.multilevelpushmenu_wrapper .levelHolderClass {
position: absolute;
overflow: hidden;
top: 0;
background: #336ca6;
width: auto;
min-height: 100%;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1em;
zoom: 1;
}

.multilevelpushmenu_wrapper .ltr {
margin-left: -100%;
left: 0;
-moz-box-shadow: 5px 0 5px -5px #1f4164;
-webkit-box-shadow: 5px 0 5px -5px #1f4164;
box-shadow: 5px 0 5px -5px #1f4164;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=90,strength=2);
}

.multilevelpushmenu_wrapper .rtl {
margin-right: -100%;
right: 0;
-moz-box-shadow: 5px 0 5px 5px #1f4164;
-webkit-box-shadow: 5px 0 5px 5px #1f4164;
box-shadow: 5px 0 5px 5px #1f4164;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=270,strength=2);
}

.multilevelpushmenu_wrapper .multilevelpushmenu_inactive {
background: #2e6196;
}

.multilevelpushmenu_wrapper h2 {
font-size: 1.5em;
line-height: 1em;
font-weight: bold;
color: #1f4164;
padding: 0 .4em 0 .4em;
}

.multilevelpushmenu_wrapper ul {
list-style: none;
padding: 0;
margin: 0;
}

.multilevelpushmenu_wrapper li {
cursor: pointer;
border-top: 1px solid #295685;
padding: .4em .4em .4em .4em;
}

.multilevelpushmenu_wrapper li:last-child {
border-bottom: 1px solid #295685;
}

.multilevelpushmenu_wrapper li:hover {
background-color: #295685;
}

.multilevelpushmenu_wrapper a {
display: block;
outline: none;
overflow: hidden;
font-size: 1.5em;
line-height: 1em;
padding: .2em .2em;
text-decoration: none;
color: #fff;
}

.multilevelpushmenu_wrapper a:hover {
color: #ffe;
}

.multilevelpushmenu_wrapper .backItemClass {
display: block;
padding: .4em .4em .4em .4em;
background: #2e6196;
border-top: 1px solid #295685;
}

.multilevelpushmenu_wrapper .floatRight {
float: right;
}

.multilevelpushmenu_wrapper .floatLeft {
float: left;
}

.multilevelpushmenu_wrapper .cursorPointer {
cursor: pointer;
}

.multilevelpushmenu_wrapper .iconSpacing_ltr {
padding: 0 .4em 0 0;
}

.multilevelpushmenu_wrapper .iconSpacing_rtl {
padding: 0 0 0 .4em;
}


JS:

$(document).ready(function(){
// HTML markup implementation, overlap mode
$( '#menu' ).multilevelpushmenu({
containersToPush: [ $( '.main-wrap' ) ],
menuWidth: '25%',
menuHeight: '100%',
menuID: 'menu_multilevelpushmenu',
'preventItemClick': true,
'preventGroupItemClick': true,
'collapsed': true,
'fullCollapse': true,
'direction': 'rtl'
});

$('#menu').multilevelpushmenu('option', 'menuHeight', $(document).height());
$('#menu').multilevelpushmenu('redraw');

$('#toggle-menu').on('click', function(e){
$('#menu').multilevelpushmenu('expand');
});

});

$(window).resize(function () {
$('#menu').multilevelpushmenu('option', 'menuHeight', $(document).height());
$('#menu').multilevelpushmenu('redraw');
});


Is there anyway to make it so it shrinks the content in a selected area rather than hide it off screen? ...or is that something I would have to do myself?

Bonus Question:

I'm going to be using a custom menu option to open the menu (similar to the one on codepen) but I'm not sure how to set it up so it toggles the state of the menu?

From their docs, the best I can see is doing a check to see if the menu is currently expanded, such as:

$('#menu').multilevelpushmenu('menuexpanded', $menuLevelObject);


However, I have no idea where
$menuLevelObject
comes from?

Answer

The plugin animates margin-left and margin-right to make the push effect. If you don't want the push effect, you can simply replace this animation so that it animates width. The function doing this is pushContainers at line 609, you can modify it to something like this:

            $.each( instance.settings.containersToPush, function() {
                var lMr = parseInt( $( this ).css( 'width' ) ),
                    lM = isInt( lMr ) ? lMr : 0,
                    rMr = parseInt( $( this ).css( 'margin-right' ) ),
                    rM = isInt( rMr ) ? rMr : 0;
                $( this ).stop().animate({
                    width:  lM + ( ( instance.settings.direction == 'rtl' ) ? (-1) : 1 ) * absMove,
                    //Depending on your actual setup you might need to change more than width
                    // Normally you should be able to do this here also
                    //marginRight: rM + ( ( instance.settings.direction == 'rtl' ) ? 1 : (-1) ) * absMove
                });
            });

As for the expanded state, the $menulevelobject allows you to check which level is expaned. Since you want to know if first level is expanded it's your menu object $('#menu'). This should allow you to toggle:

$('#toggle-menu').on('click', function(e){
    if($('#menu').multilevelpushmenu('menuexpanded', $('#menu'))){
        $('#menu').multilevelpushmenu('collapse');
    } else {
        $('#menu').multilevelpushmenu('expand');    
    }
});

See result here:

http://codepen.io/anon/pen/BoORNV