Having trouble getting the toggle menu to work using Jquery?

I am trying to create a toggle menu using jQuery on this particular page: . The menu is located in the top right corner and I want it to appear when someone clicks on the "Menu ☰" button, and then disappear when clicked again (similar to this website: ). I have written the following code, but it doesn't seem to be working:

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

I have also applied the following CSS:

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

Answer №1

Two different jquery scripts were causing a conflict, resolved by advising the user to combine them.

:)

Additional assistance based on feedback: To improve functionality, make the following changes: 1) Add the following to your css: 

#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) Update your jquery code 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");
});

Add another button to allow users to close the menu once it's open. Insert an image or div with the class "closeNav".

Alter your jquery accordingly:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a dynamic webpage with flexible design and interconnected containers using the Bootstrap framework

Creating a responsive layout with nested divs using Bootstrap Check out my HTML code below: <div class="container-fluid" style="height: 350px;"> <div class="row-fluid clearfix" style="height: 100%"> <div class="col-md-9 column" ...

htmlcsstwitter-bootstrapresponsive-design

What is the best way to retrieve a JSP parameter dynamically or how can one create a JSP parameter on the

Currently learning JSP and ajax simultaneously. In the process of creating a dynamic tab that can be added or removed using these steps. Looking to pass parameters from controller to the content area of the newly added tab. 1. When clicking on the &apos ...

javascriptjqueryajaxjsp

How can I securely access and load JSON data from a different domain?

I need to access JSON data from a different domain. The JSON data format is as follows: [ { "siteName": "JQUERY4U", "domainName": "http://www.jquery4u.com", "description": "#1 jQuery Blog for you ...

jqueryjsoncross-domain

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden ...

javascriptjqueryhtmlcss

Learn how to easily insert a marker on a map using leaflet js in vue 3 with just a simple click

Hey everyone! I need some help with a challenge I'm facing. I can't seem to get click coordinates to create a new Marker on my map. Check out the image here And another image here ...

javascriptvue.jsvuejs3

Incorrect icon being displayed for PHP validation

Seeking guidance in PHP as a newcomer. Attempting to display an error icon upon validation failure. PHP <?php // Initialize variables and set them as empty values $nameErr = ""; $name = ""; if ($_SERVER["REQUEST_METHOD"] = ...

phphtmljquery

Enhancing the design of a button with whitespace using CSS

Recently, I had a well-designed landing page created using LeadPages. However, due to financial constraints, I am unable to continue paying for their services at the moment. The current landing page has proven to be effective in converting leads. https:// ...

cssbutton

Utilizing repeatable jQuery AJAX calls

I am currently working on a web application that utilizes asp.net mvc. I am using ajax requests in jQuery to display information about Clients, Staff, and Reports. I have created separate functions for each action (view, add, edit, delete) using jquery aja ...

asp.net-mvcjquerycode-reuse

What is the process of displaying JSON headers using JavaScript?

Although it may seem like a simple question, I am new to JSON. Can someone explain how to display a heading in the console? This is the code I have: var jsonstr = '{"profile":{"name" : "raj","age":"35&qu ...

javascriptnode.jsarraysjsonprinting

Color picker can be utilized as an HTML input element by following these steps

After trying out various color pickers, I was not satisfied with their performance until I stumbled upon Spectrum - The No Hassle jQuery Colorpicker. It perfectly met my requirements. <html> <head> <meta http-equiv="content-type" content="t ...

javascriptphpjqueryhtmlcss

Creating Custom Styles with Polymer for <content> Elements

Seeking help with styling using the ::content selector and custom CSS properties. Any insight would be appreciated! To simplify, I have a Polymer component utilizing a content tag that will always contain a paper-input: <template> <style> ...

csspolymershadow-dom

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Currently, I am utilizing CodePen to assess my skills in creating a website. Specifically, I am focusing on the HTML component. My goal is to change the font color to blue for the phrase "Today is a beautiful sunny day!" Here is the snippet of code that I ...

javascripthtmlcss

Ways to confirm the validation of radio buttons in a form and implement CSS

I am having trouble adding validation to a form with radio buttons displayed as labels. I want to show a red border around the radios/labels or outer div when a radio button hasn't been checked before the user submits the form. I have attempted this ...

javascripthtmljquerycssforms

Adding CSS classes through the .addClass method - A guide on utilizing linked CSS files

I came across this code snippet and I have a quick question. $(window).scroll(function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // adjust as needed if(y_scroll_pos > scroll_pos_test) { $( "#cssmenu" ).addCl ...

jquerycss

Isolating Express.js Requests for Enhanced Security

In my Node.js Express app, multiple users send requests to the server for various actions such as earning points, changing email addresses, and interacting with other users. My server code utilizes several setTimeouts, leading me to question whether diffe ...

javascriptnode.jsexpress

What is an alternative approach to passing arguments to an event handler in a React render component without using a lambda function?

In my React app, I've learned that using lambda functions in the property of a render component can harm application performance. For example: <ConfirmSmsModal modal={args.modal} smsCheck={async (code: string) => { return await this._vm ...

javascriptreactjslambdaarrow-functions

Error TS2339: The 'selectpicker' property is not found on the 'JQuery<HTMLElement>' type

Recently, I integrated the amazing bootstrap-select Successfully imported bootstrap-select into my project with the following: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstra ...

jquerytypescriptwebpackbootstrap-4bootstrap-select

Node receiving empty array as result after processing post request

My current task involves testing the post method on Postman. Strangely, every time I post the result it shows an empty array []. Upon further investigation by console logging on the node side, it also returns an empty array. CREATE TABLE users ( user_ ...

javascriptnode.jspostgresqlexpress

Show additional information when a row in the Bootstrap Vue table is clicked

I am attempting to create a unique user experience by displaying row details when a row is clicked, rather than clicking on a button as described in the documentation. However, the documentation lacks specific instructions on how to implement this feature. ...

javascriptvue.jsbootstrap-vue

CSS rules for organizing the stacking order of elements in the SuperFish Menu with

I've been struggling with a z-index issue on a website I'm currently managing. It seems to stem from the z-index values in the SuperFish Menu and a specific div element. Despite my attempts to apply position:relative/absolute & z-index: 99999 dec ...

csswordpressz-indexsuperfish