1

I am relatively new to learning HTML, CSS and JavaScript. I am creating a sort of test site, just for learning purposes and have started diving in to mobile responsive websites.

I have a test site which has a mobile navigation button hidden, with a CSS media query to set the display to block and hide the normal navigation menu. I also have list items for the mobile navigation menu. To show/hide this, I've created a .toggleClass() jQuery function:

function clicktouchmenu()
{
    $('#menuico').on('click touch', function()
    {
        var $mobmen = $(".mobilemenu");
        $mobmen.toggleClass('clicked');
    });
};

The above is working, but I wanted to add a .slideToggle() to the menu for effect. If I add this in underneath the .toggleClass() as $('.clicked').slideToggle(); the menu acts a bit strange, if I click on the menu icon, nothing happens, but repeatedly clicking, it seems to kick in to life and start working sliding up and down.

As I am fairly new to this, I expect I am doing this completely wrong, or over complicating something which is probably quite simple.

Omar
  • 32,302
  • 9
  • 69
  • 112
J Higgins
  • 43
  • 4

1 Answers1

0

Try removing the clicked class and using only slideToggle() on the mobilemenu like so:

$('#menuico').on('click touch', function()
{
    var $mobmen = $("#mobilemenu")
    $mobmen.slideToggle();
});

I think the problem is that if the clicked class is toggling whether or not the menu is shown then it's interfering with slideToggle(). This is because the purpose of slideToggle() is to make something look like it's sliding in and out of view (aka toggling whether or not it's hidden but with an animation). So you only need one or the other but slideToggle() obviously includes the animation.

I've added a fiddle, but it's just a demo as I don't know what your HTML or CSS is like:

fiddle: https://jsfiddle.net/668mucca/3/

Link to the entry on slideToggle() in the jQuery docs for good measure: http://api.jquery.com/slidetoggle/

DibsyJr
  • 854
  • 7
  • 18
  • I've changed over the code and it's working a lot better, menu is hidden when loading the page, and the slide animation works. Thank you :) – J Higgins Apr 07 '17 at 09:34
  • No problem, glad I could help :) – DibsyJr Apr 07 '17 at 09:35
  • Is it possible to close the menu if it's opening by clicking anywhere else in the document? – J Higgins Apr 07 '17 at 09:36
  • To do that you'd have to put a click listened on the rest of the page, here's a [link](http://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery) to a similar question – DibsyJr Apr 07 '17 at 09:38