Steps for creating a SlideMenu:

"The function defined below is meant to create a slideMenu on the left side of the index page. However, it seems like I have overlooked something as the slide Menu doesn't work."

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Animated Sidebar Menu</title>
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
  <link rel="stylesheet" href="style.css">
<script>
 function openSlideMenu(){
  document.getElementById('menu').style.width = '250px';
  document.getElementById('content').style.marginLeft = '250px';
 }
 function closeSlideMenu(){
  document.getElementById('menu').style.width = '0';
  document.getElementById('content').style.marginLeft = '0';
 }
</script>
</head>
<body>

  <div id="content">
   
   <span class="slide">
    <a href="#" onClick="openSlideMenu()">
    <i class="fas fa-bars"></i>
  </a>
   </span>
   
   <div id="menu" clSS="nav">
    <a href="#" class="close" onclick="closeSideMenu()">
   <i class="fas fa-times"></i>
  </a>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
   </div>
   
   <h1>S.T. Graffix Menu</h1>
   
 </div>
 
</body>
</html>

Answer №1

Using the wrong function name in your code is causing an invalid close function error:

onclick="closeSideMenu()"

The correct function name should be closeSlideMenu():

onclick="closeSlideMenu()"

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

What is the reason behind the effectiveness of this prime number verifier?

Take a look at this code snippet that effectively checks whether a number is prime: var num = parseInt(prompt("Enter a number:")); var result = "Prime"; for (var i = 2; i < num; i++) { if (num % i === 0) { result = "Not Prime"; break; } } ...

Grouping and styling table data cells within a row: best practices

I am attempting to "group" a collection of cells/<td> elements within a row/<tr> in a <table> in order to apply styles to them. The code below accomplishes what I desire to some extent, but it does have its limitations: /* Issues wit ...

Leveraging React Hooks and Axios for retrieving data and showcasing it in a table

I have set up a React environment, created a hook named ApiTable, and implemented a method called renderTable. My goal is to fetch data from the API endpoint located at https://jsonplaceholder.typicode.com/users, and display it in a table with the appropri ...

Positioning of buttons within a div

I am currently designing an inspiration post style: https://i.stack.imgur.com/I5J0H.png However, I am encountering some challenges while creating it: The buttons are not rounded when the window size is changed Social icons are not being displayed I am ...

What is the method for showcasing a single Observable from an Array of Observables in Angular?

I am facing a challenge with displaying questions from an Observable-Array one by one. Currently, I can only display all the questions at once using *ngFor in my HTML. Here is my component code snippet: import { Component, OnInit } from '@angula ...

JavaScript error: "null or not an object" bug

I have implemented the JavaScript code below to display horizontal scrolling text on the banner of my website. Surprisingly, it works perfectly fine on one server but throws an error on another server with the message: Error: 'this.mqo' is nul ...

What is the best way to resize an image within an SVG shape to completely fill the boundaries?

There is an SVG shape in the form of a parallelogram that has been filled with an image. To view the demo, click here. The code for the SVG object is as follows: <svg style="overflow:visible; margin-left:111px; margin-top:22px; " height="86" width=" ...

Issue with checkbox click event binding in Angular 6 not functioning as expected

I am currently utilizing a reactive form to display a list of heroes to the user and would like to trigger a console log message when the user selects a hero by clicking on a checkbox. The issue I am encountering is that when I print this.form in the cons ...

Blending the widths of native elements with those of Bootstrap columns

Having trouble aligning spans in a Bootstrap 3 form to degrade into a stack on mobile: From [station1] to [station2] at [time] From [station1] to [station2] at [time] While this code works to an extent: <div class="row"> <div class="col ...

I'm currently developing a Javascript quiz, but unfortunately, I am not seeing any outcomes. Can someone identify the issues in my code and provide guidance on what steps I should take next?

There are 3 requirements I must meet: The script should show the number of correct answers and the percentage of correctness at the end of the quiz. If all questions are answered correctly, display 'Well Done', or else display 'Try again&ap ...

Tips for converting multiple arrays of objects into a single array set

Here is an example of an array: $scope.array1=[[Name:'Madhu'],[Name:'Vijay'],[Name:'Srinu']] I need to convert this array into a different format. I want to pass this array in the columns option of a dx datagrid. So the desi ...

The minDate feature in Gravity Forms is failing to disable dates in the past

I’m attempting to prevent users from selecting past dates on the datepicker within Gravity Forms, but I've encountered issues such as console errors or the functionality not working properly... Initially, I attempted the following approach: gform.a ...

Can you explain the exact meaning of XMLHttpRequest.XMLHttpRequest?

I find MDN's writing style to be confusing. On the MDN page about XMLHttpRequest, it states: XMLHttpRequest is an API ... Constructor XMLHttpRequest.XMLHttpRequest Properties XMLHttpRequest.onreadystatechange XMLHttpRequest.readyState XMLHttpReq ...

Send pages to the holding page first before redirecting them to the appropriate page on the new website

I am in the process of updating my old website (www.old.com) with a new one that has similar pages (www.new.com). I want all the pages from www.old.com to automatically redirect to a temporary holding page (a basic html page with a countdown script and red ...

How can I prevent dataTable resizing?

Is there a solution to prevent datatable resizing? For instance, when the default number of rows per page in the datatable is set to 10 rows. If you input 13 rows into the datatable, it will be divided into 2 pages - with 10 rows on the first page and 3 ro ...

Adjust the white background to match the gray background seamlessly

I'm in the process of developing a forum and encountering some challenges with CSS. My goal is to extend the white area all the way to the right edge of the gray background, leaving a gap of around 5px/10px. I've experimented with different CSS ...

Differences between using ng-pattern and scripting for validation

My goal is to validate a date in the format YYYY/MM/DD using a regular expression ng-pattern. When I use the code below in the UI, it works perfectly fine. <input type="text" class="k-fill" ng-pattern="/((^[1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d ...

Only the initial element within the specified class is targeted by JQuery

Currently, I am utilizing Kendo UI to refresh multiple charts by class without having to access each one individually. Here is the code snippet I am using: $(".k-chart").data("kendoChart").refresh(); The issue I am encountering is that only the first cha ...

obtaining information from newly added form elements in an Angular application

I'm currently working on an app with the MEAN stack. I've managed to dynamically add form elements, but I'm running into an issue where all dynamically added elements are taking the same data when I use ng-model="something.something". What I ...

Bootstrap only allows for styling the border row and outside of a table

I'm looking to remove the vertical border of a table using bootstrap, except for the outside border as illustrated below. https://i.sstatic.net/RYq7o.png I've attempted to achieve this by: <table class="table no-footer worker-data tabl ...