Toggle menu with Jquery not working

Question

I want to make a toggle menu with jquery in this page: http://propertymanagementoh.com/new-short-header-page/ .There is a menu in the right top. I want to make it toggle when someone will click on the "Menu ☰" button then the menu will appear and again when click on the button then that will disappear(like this: http://www.titleonemanagement.com/ ). I have written the following code but it is not working:

<script>
   $(document).ready(function(){
     $("#block-37").click(function(){
      $("#block-38 .menu").toggle();
    }); 
   }); 
</script>

Also used the following css:

#block-38 .menu{
   position:fixed;
   top:0;
   right:0;
   width:250px;
   overflow:hidden;
   z-index:999999;
 }

Any error in your console? If that's your actual code, you should see a syntax error because you're missing a closing curly brace and parenthesis. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jun 19, 2014 at 13:40
Check the console, you're missing a closing }); ;-) you should be seeing SyntaxError: missing } after function body — Nick R
– Nick R, Commented Jun 19, 2014 at 13:40
You have console errors, Unexpected end of input, so probably missing some braces — kasperoo
– kasperoo, Commented Jun 19, 2014 at 13:42
Sorry, I have edited it but still not working. Check please. — Exploring
– Exploring, Commented Jun 19, 2014 at 13:43
Please check your console, install Firebug, or use the Chrome Developer tools, you'll be able to see the error, now it says TypeError: $ is not a function - which is a jQuery error. — Nick R
– Nick R, Commented Jun 19, 2014 at 13:45

wildandjam · Accepted Answer · 2014-06-19 14:52:23Z

There were two jquery scripts being used, meaning that the jQuery.noConflict(true) was causing an issue with the second set of jquery instructions.

Advised user to combine scripts and it worked!

:)

Additional help as per comment: A few things need to be done to assist with this. 1) In your css add this:

#block38 .nav-vertical.active {
   rgba(0,0,0,.5);
   position:fixed;
   top:0;
   left:0;
   z-index:999;
   width:100%;
   height:100%;
}
#whitewrap.notactive {
    margin-left:-235px;
}

2) Change your jquery from

$("#block-37").click(function(){
    $("#block-38 .menu").toggle();
});

to:

$("#block-37").click(function(){
    $("#block-38 .menu").toggle();
    $("#block38 .nav-vertical").toggleClass("active");
    $("#whitewrap").toggleClass("notactive");
});

You need to add in another button once the menu is open so that the user can close it. To do the cross: Make an image or div and give it the class of "closeNav".

Then change your jquery:

$("#block-37, .closeNav").click(function(){
    $("#block-38 .menu").toggle();
    $("#block38 .nav-vertical").toggleClass("active");
    $("#whitewrap").toggleClass("notactive");
});

Thank you. Can you help me please with another point? In the example site when the menu appearing then the body is going left with a shadow. How can I achieve this ?
Have you edited it for the close button ? Actually I am trying it in another way.
Yeah - the last bit of jquery is for the close button, just make a div or an image with a class of ".closeNav" and add that javascript.
I am thinking to add this like the following: $("#block-38 .menu li:first").before("<li class="closebtn">X</li>"); So what do you think please?

Collectives™ on Stack Overflow

Toggle menu with Jquery not working

1 Answer 1

11 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Related