Click here to Skip to main content
15,886,110 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
I am using this menu http://tympanus.net/Blueprints/SlidePushMenus/ Menu should close when click on the li and button should be reactive when menu close.

HTML
<button id="showLeft">Show/Hide Left Slide Menu</button>

        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
            <ul>
                <li><a href="#">Celery seakale</a></li>
                <li><a href="#">Dulse daikon</a></li>
                <li><a href="#">Zucchini garlic</a></li>
                <li><a href="#">Catsear azuki bean</a></li>
                <li><a href="#">Dandelion bunya</a></li>
                <li><a href="#">Rutabaga</a></li>
    </ul>
            </nav>


JavaScript code is

JavaScript
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
                    body = document.body;

                showLeft.onclick = function() {
                    classie.toggle( this, 'active' );
                    classie.toggle( menuLeft, 'cbp-spmenu-open' );

                };
Posted
Updated 15-Jun-15 8:57am
v2
Comments
Sergey Alexandrovich Kryukov 15-Jun-15 14:50pm    
What would it possibly mean, "close menu"? Do you want to hide it, or something else? What's the problem?
—SA
Mohammad Kashif Nadeem 15-Jun-15 15:21pm    
i simply want that menu should close when click on the link.
Sergey Alexandrovich Kryukov 15-Jun-15 15:22pm    
Now please explain what "close" means. There is no such concept, so please explain.
What have you tried so far?
—SA
Mohammad Kashif Nadeem 15-Jun-15 15:26pm    
I am using this menu http://tympanus.net/Blueprints/SlidePushMenus/ for the my responsive website once you please take on this menu. its slide from left side. i want that when i click on the navigation link which slide from left site its should be close (slide back)
Sergey Alexandrovich Kryukov 15-Jun-15 15:30pm    
What's the problem then? Slide it back to right...
—SA

1 solution

Thank you for the clarification. You can ask the author of the product what to do. Better yet, you should simply examine the demo code. Look at the blue areas in the center. One click slides a menu in, another slides it out. All you need is to examine the click handler of those elements and see what it does. Do the second phase, sliding out, in each of the handlers of your menu items.

As you can see, there is the call to classie.toggle. Run it under the debugger and see how it works on first and second clicks. And so on…

Probably you can modify the menu code itself, but, chances are, it's already done for your.

—SA
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900