How to make my push menu more user friendly?

Question

My website's mobile site, (http://www.codesrce.com/thedrumcenter) has a very modern and functioning push menu. However, I am looking to make it more user friendly. Can someone please help me tweak my code so that when the user presses on the menu button the menu will open, and also when the user slides the screen to the right to open it, and then once it's open then they slide to the left to close it? Also, when the button is pressed, I would like it to turn to this color, #0099FF, and then when it is closed turn back to gray. Sorry if my wording isn't the best, but I hope you know what I mean. :) I will provide my code so far:

HTML

<div id="Mobile">

        <div id="menu">

        <ul>

            <li><a href="#">Top Brands</a></li>

            <li><a href="#">Drums</a></li>

            <li><a href="#">Hardware</a></li>

            <li><a href="#">Cymbals</a></li>

            <li><a href="#">Sticks</a></li>

            <li><a href="#">Drum Heads</a></li>

            <li><a href="#">Terms of Use</a></li>

            <li><a href="#">Affiliations</a></li>

        </ul>

    </div>

    <div id="right">

            <div id="Top">

            <div id="menubar">

                        <a id="menubarheader">DrumCenter</a>

                <a href="#menu" id="button" class="buttonicon"></a>

                <a href="#" id="searchlink" class="searchlink"></a>

            </div>

        </div>

    </div>

    </div>

JQuery

$('#button').toggle( 
        function() {
            $('#right').animate({ left: 275}, 'fast', function() {
                $('#button');
            });
        }, 
        function() {
            $('#right').animate({ left: 0 }, 'fast', function() {
                $('#button');
            });
        }
    );

Any help would be appreciated, as I am a complete NOOB at Javascript and JQuery. Thank you!

If you're looking for help with code that already works, try the [Code Review Stack Exchange](http://codereview.stackexchange.com), but make sure that you revise your question to fit within the scope defined by their [Help Center](http://codereview.stackexchange.com/help/on-topic). — AstroCB, Jun 22 '14 at 17:06
@AstroCB already works? What works? I cannot see any animate-left / right, do you? Also `$('#button');` inside a callback function seems pretty awkward to me. — Roko C. Buljan, Jun 22 '14 at 17:07
@RokoC.Buljan `My website's mobile site, (http://www.codesrce.com/thedrumcenter) has a very modern and functioning push menu.` — AstroCB, Jun 22 '14 at 17:09
LOL. I am sorry, I know my wording is terrible. Let me try again. My mobile website has a push menu, much like Facebook, and it has a universal menu icon that controls the menu function. If the user clicks on that button, the menu will open. And once it's open, the user can only close the menu by pressing that button again. I would like the menu to be controlled by not only the button, but also when the user slides the screen to the right and left to open and close. @RokoC.Buljan — The Creator, Jun 22 '14 at 17:09
I think you need to use plugin like **[this](http://www.berriart.com/sidr/#usage)** — Maulik Anand, Jun 22 '14 at 17:09
Is the shared code enough to reproduce the problem..? i don't think so... — T J, Jun 22 '14 at 17:11
Thank you @MaulikAnand ! If you would like to submit a formal answer, I can accept that for you — The Creator, Jun 22 '14 at 17:12
@TheCreator : no I don't need to post an answer if you have already got solution for your problem, if not **[check here](http://www.jquerybyexample.net/2014/02/mobile-menu-jquery-plugins-and-tutorial-list.html)** and find which best suits your site — Maulik Anand, Jun 22 '14 at 17:17
Thank you, I just wanted to add to your reputation, that's all. @MaulikAnand — The Creator, Jun 22 '14 at 17:20
@TheCreator what you've shared will hardly look like a menu without the css... — T J, Jun 22 '14 at 17:22

score 2 · Accepted Answer · edited May 23 '17 at 12:20

Essentially there are different ways to go about this.. I inspected the CSS on your site to see how you were doing things but with 8 CSS's I gave up... too much to look at in the browser.

So.. essentially this question I believe was asked in Swipe in the middle to open panel with jQuery Mobile? and he gave a fiddle such http://fiddle.jshell.net/Palestinian/2B4Ht/

So I would implement that into your coding in some way. Have a top-fixed navbar that when collapsed will show your "push menu". Then just have the options if the the screen width is less than say 768pixels or something you can swipe left or right to open the pannels that will be menu's themselves..

Just my advice. I have never made a menu like the one you asked but I don't think it will be difficult.

How to make my push menu more user friendly?

1 Answers1