CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3836044
user3836044

Reputation: 43

How to add closing button script

I am using Multi Level Push menu and trying to add a button to make it close.

Basic HTML:

    <div class="container">
        <!-- Push Wrapper -->
        <div class="mp-pusher" id="mp-pusher">
        <!-- mp-menu -->
            <nav id="mp-menu" class="mp-menu">
                <div class="mp-level">
                <a class="icon icon-star" href="#" onclick="closeMe();" id="linkk">Exit</a>
    </div>
            </nav>
                <div class="scroller"><!-- this is for emulating position fixed of the nav -->
                <div class="scroller-inner">
                    <!-- Top Navigation -->
<div><a href="#" id="trigger" class="">Button</a></div>
</div><!-- /scroller-inner -->
            </div><!-- /scroller -->
        </div><!-- /pusher -->
</div><!-- /container -->

JS:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

 function closeMe(){
 var container = document.getElementById( 'mp-pusher'; );
 classie.remove( container, 'mp-pushed'; );
 scrollToAnchor('#link');
 };

Here is a working fiddle: http://jsfiddle.net/xs1j8kq5/3/

I am using external resources, of course. The above code for the exit button does not function properly.

How can I close the sidebar menu, and if possible, scroll to an anchor point somewhere on the site?

Upvotes: 0

Views: 1289

Answers (3)

Pedro Ferreira
Pedro Ferreira

Reputation: 493

You have to define your 'trigger' when you instantiate 'mlPushMenu'
So, just state:

new mlPushMenu( document.getElementById( 'mp-menu' ),
document.getElementById( 'trigger' ) )

replacing the id of your button.

In this particular case use 'linkk':

new mlPushMenu( document.getElementById( 'mp-menu' ),
document.getElementById( 'linkk' ) )


You could use a class, and affect as many 'a's as you want:

new mlPushMenu(document.getElementById('mp-menu'),
document.getElementsByClassName('menu-trigger'));

Upvotes: 0

vaso123
vaso123

Reputation: 12391

First fix your code as i mentioned in my comment. There are several syntax errors. And define closeMe before your you call it. Now scrollToAnchor not works, define that before closeMe also.

Now, when you clicked the Exit it's not animated, but i think, now you can figure out what to do with it to animate. http://jsfiddle.net/xs1j8kq5/22/

<script type="text/javascript">
    function closeMe() {
        var container = document.getElementById('mp-pusher');
        classie.remove(container, 'mp-pushed');
        classie.remove(container, 'mp-pusher');
        container.style.transform = "translate3d(+300px, 0px, 0px)";
        //scrollToAnchor('#services');
    }
    ;
</script>
<div class="container">
    <!-- Push Wrapper -->
    <div class="mp-pusher" id="mp-pusher">
        <!-- mp-menu -->
        <nav id="mp-menu" class="mp-menu">
            <div class="mp-level">
                <a class="icon icon-star" href="#" onclick="closeMe();" id="linkk">Exit</a>
            </div>
        </nav>
        <div class="scroller"><!-- this is for emulating position fixed of the nav -->
            <div class="scroller-inner">
                <!-- Top Navigation -->
                <div><a href="#" id="trigger" class="">Button</a></div>
            </div><!-- /scroller-inner -->
        </div><!-- /scroller -->
    </div><!-- /pusher -->
</div><!-- /container -->

For scroll, you need to define an <a name="services"></a> tag where you want to scroll.

edit: working fiddle: http://jsfiddle.net/xs1j8kq5/24/

Upvotes: 2

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

As you mentioned jQuery in your tags, here is a shorter jQuery equivalent of your code (which does not require an attribute-based event handler):

new mlPushMenu($('#mp-menu')[0], $('#trigger')[0]);
$(function () {
    $('#linkk').click(function(e) {
        e.preventDefault();   // Stop any scrolling to the bookmark link
        classie.remove($('#mp-pusher'));
        classie.remove($('#mp-pushed'));
        scrollToAnchor('#services');
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/xs1j8kq5/23/

Upvotes: 0

Related Questions