How to close sidemenu on clicking on of its list items?

Question

I am using this example as stated here http://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/. From this i have been using Elastic example. This example works great and menu closes if i click outside menu body but how can i make it close if i click on one of its subitems for example: clicking on "Living Room" will make the page scroll to a #livingroom by using jquery-easing plugin and then closing the sidemenu after scrolling. This is my menu-

<div class="menu-wrap">
            <nav class="menu">
                <div class="icon-list">
                <br>
                  <a href="#"><i class="fa fa-fw fa-home"></i><span>HOME</span></a>
                  <a href="#" id="btn-1"  data-toggle="collapse" data-target="#submenu0" aria-expanded="false"><i class="fa fa-fw fa-building"></i><span>PLACES</span></a>

                     <ul class="nav collapse" id="submenu0" role="menu" aria-labelledby="btn-1">
                            <li class="page-scroll"><a href="#livingroom" style="margin:0 30px;text-decoration:none;"><p style="font-weight:1em;font-size:14px;">Living Room</p></a></li>
                            <li class="page-scroll"><a href="#bedroom" style="margin: 0 30px;"><p style="font-weight:1em;font-size:14px;">Bed Room</p></a></li>

                     </ul>


                      <a href="#" id="btn-2" style="text-decoration:none;" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><i class="fa fa-fw fa-compress"></i><span>NFC</span></a>
                      <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-2" >
                            <li><a href="#0" style="margin:0 30px;text-decoration:none;"><p style="font-weight:1em;font-size:14px;">Read NFC Tag</p></a></li>
                            <li><a href="#0" style="margin: 0 30px;"><p style="font-weight:1em;font-size:14px;">Write to NFC Tag</p></a></li>

                      </ul>

                    <a href="#"><i class="fa fa-fw fa-cogs"></i><span>SETTINGS</span></a>
                    <a href="#"><i class="fa fa-fw s fa-align-justify"></i><span>ABOUT</span></a>
                    <a href="#"><i class="fa fa-fw s fa-bookmark-o"></i><span>REFERENCES</span></a>
                </div>
            </nav>
            <button class="close-button" id="close-button">Close Menu</button>
            <div class="morph-shape" id="morph-shape" data-morph-open="M-1,0h101c0,0,0-1,0,395c0,404,0,405,0,405H-1V0z">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800"
                preserveAspectRatio="none">
                    <path d="M-1,0h101c0,0-97.833,153.603-97.833,396.167C2.167,627.579,100,800,100,800H-1V0z"></path>
                </svg>
            </div>
        </div>

This is the js part-

            (function() {
            var bodyEl = document.body,
                    content = document.querySelector( '.content-wrap,.menu' ),
                    openbtn = document.getElementById( 'open-button' ),
                    closebtn = document.getElementById( 'close-button' ),
                    isOpen = false,

                    morphEl = document.getElementById( 'morph-shape' ),
                    s = Snap( morphEl.querySelector( 'svg' ) );
                    path = s.select( 'path' );
                    initialPath = this.path.attr('d'),
                    pathOpen = morphEl.getAttribute( 'data-morph-open' ),
                    isAnimating = false;

                function init() {
                    initEvents();
                }

                function initEvents() {
                    openbtn.addEventListener( 'click', toggleMenu );
                    if( closebtn ) {
                        closebtn.addEventListener( 'click', toggleMenu );
                    }

                    // close the menu element if the target it´s not the menu element or one of its descendants..
                    content.addEventListener( 'click', function(ev) {
                        var target = ev.target;
                        if( isOpen && target !== openbtn ) {
                            toggleMenu();
                        }
                    } );
                }

                function toggleMenu() {
                    if( isAnimating ) return false;
                    isAnimating = true;
                    if( isOpen ) {
                        classie.remove( bodyEl, 'show-menu' );
                        // animate path
                        setTimeout( function() {
                            // reset path
                            path.attr( 'd', initialPath );
                            isAnimating = false; 
                        }, 300 );
                    }
                    else {
                        classie.add( bodyEl, 'show-menu' );
                        // animate path
                        path.animate( { 'path' : pathOpen }, 400, mina.easeinout, function() { isAnimating = false; } );
                    }
                    isOpen = !isOpen;
                }

                init();
            })();

Thanks in Advance.

score 1 · Answer 1 · answered Oct 27 '15 at 10:39

If you view the source http://tympanus.net/Development/OffCanvasMenuEffects/js/main4.js you can see that the close menu icon fires the toggleMenu function

if( closebtn ) {
        closebtn.addEventListener( 'click', toggleMenu );
}

What you'll want to do is add a click event to fire the toggleMenu function when you click on one of the sub items.

score 0 · Accepted Answer · answered Oct 27 '15 at 10:41

0

I believe that adding .icon-list a into the following variable will work:

content = document.querySelector( '.content-wrap,.menu' ),

like this:

content = document.querySelector( '.content-wrap,.menu,.icon-list a' ),

answered Oct 27 '15 at 10:41

Sam Willis

4,001
7
40
59

But after adding: content = document.querySelector( '.content-wrap,.menu,.icon-list a' ), the menu closes when i click on clicking "a" tag before revealing dropdown menu further which i have and the menu does not close if i click outside menu body. – Vivek Singh Oct 27 '15 at 10:49
How about adding a class to the links that you want to also close the menu, and then having that class in the variable instead of the `.icon-list a`? – Sam Willis Oct 27 '15 at 10:55
Thanks, I will try to do that. – Vivek Singh Oct 27 '15 at 10:59
I was able to do it successfully but when i click on subitem say living room,page should scroll to #livingroom id by using jquery-easing plugin but it makes little jump and stays there. This is my code for scrolling- $(function() { $('body').on('click', '.page-scroll a', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); }); }); – Vivek Singh Oct 27 '15 at 11:13
Do you have this on a site anywhere live that I can take a look at it better? – Sam Willis Oct 27 '15 at 11:19
I am doing it locally and will tell you when its done.Thanks for all the help. :) – Vivek Singh Oct 27 '15 at 11:30

How to close sidemenu on clicking on of its list items?

2 Answers2