Home Ask Login Register

Developers Planet

Your answer is one click away!

Jack1991 February 2016

I'm trying to get my navigation menu to slide left and push body with it

I'm completely new to jQuery, and I'm trying to write a script that will push my navigation menu out from the right hand side of the screen towards the left, and push the rest of the body with it.

I have been following this tutorial: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

I'm not really sure what I'm doing, or exactly which CSS classes I should be using in the javascript, as all of the different menu options/examples have the codes mixed together which isn't really helpful if you're not particularly experienced with coding.

I know exactly what I want the code to do, but I'm way out of my depth applying it to my own Wordpress theme – could anyone give me pointers as to what I'm doing wrong?

So far I have the following CSS:

@media only screen
and (min-width : 0px)
and (max-width : 1080px) {

    body {
        overflow-x: hidden;
        left: 0;
    }

    body-push {left: -240px;}

    img.standard.logo {
        height: 38px;
        width: 342px;
    }

    /* RESPONSIVE NAVIGATION MENU */

    img.menu.button {
        position:relative;
        display:block;
        width:25px;
        height:25px;
        background-size: 100%;
    }

    nav.header-nav {
        right:-240px;
        z-index:10;
        position:fixed;
        top:0;
        width:250px;
        height:100%;
        float:right;
        margin:0;
        padding:0;

        background-color:#1D1D1F;
        list-style:none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
    }

    nav.header-nav nav.header-nav-open {
        right:0px;
    }
}

I have taken / adapted the following javascript:

img.menu.button.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'body-push' );
    classie.toggle( menuRight, 'nav.header-nav-open' );
    d        

Answers


Samir February 2016

There is an error in your JavaScript code. img will be undefined and the method of writing a JavaScript function is also incorrect.

  1. Add id attribute to your menu img

    <img id="menuLeft" class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">

  2. Create a JavaScript object for menu

    var menuLeft = document.getElementById( 'menuLeft' );

  3. Access the object menuLeft to trigger sliding effect

    menuLeft.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'body-push' ); classie.toggle( menuRight, 'nav.header-nav-open' ); disableOther( 'showRightPush' ); };

Update

Since its a third party plugin, you need to include css (http://tympanus.net/Blueprints/SlidePushMenus/css/default.css) and js (http://tympanus.net/Blueprints/SlidePushMenus/js/classie.js) files for sliding menu.

Post Status

Asked in February 2016
Viewed 3,095 times
Voted 11
Answered 1 times

Search




Leave an answer


Quote of the day: live life