Click here to Skip to main content
14,639,661 members
Rate this:
Please Sign up or sign in to vote.
See more:
I am using this menu Menu should close when click on the li and button should be reactive when menu close.

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

        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
                <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>

JavaScript code is

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

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

Updated 15-Jun-15 8:57am
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?
Afzaal Ahmad Zeeshan 15-Jun-15 14:59pm
First of all, you are not showing any interest in handling the click event on the hyperlink. After that, where is the classie declared?
ZurdoDev 15-Jun-15 15:02pm
What exactly is your question?
Mohammad Kashif Nadeem 15-Jun-15 15:21pm
i simply want that menu should close when click on the link.
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?
Mohammad Kashif Nadeem 15-Jun-15 15:26pm
I am using this menu 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...
Mohammad Kashif Nadeem 15-Jun-15 15:33pm
My Dear Friend i am asking very simple thing... i don't know why are you not getting my point.
its slide back when we click on the toggle button...while i want that it should close when i click on the menu link too.
Sergey Alexandrovich Kryukov 15-Jun-15 15:39pm
Who told you that I don't understand what you are trying to achieve? It became quite clear when you provided a link and explained that it's about sliding of the menu. Thank you for the clarification, but next time better include more detail in your question and explain precisely what you want to get.

I answered. I hope you can get the idea and do it on the menu click.

Mohammad Kashif Nadeem 15-Jun-15 16:00pm
I provide link in my question. And my question is very clear for the expert but sorry to say my friend you have less knowledge of javascript. But i appreciate your efforts.
Sergey Alexandrovich Kryukov 15-Jun-15 16:11pm
Sorry that I did not pay attention for this link in first place, but you really should have mentioned this "slide" behavior, then there would not be any confusions.
And what's the problem about my knowledge of JavaScript? I just wonder, how could you know that?

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 2

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.


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

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100