What steps can I take to improve the functionality of the slide navigation feature

Question

What steps can I take to improve the functionality of the slide navigation feature

I am currently working on implementing a sliding menu feature. The menu can slide open smoothly, however, I am encountering an issue when trying to close it by clicking on the 'x' button.

let openNav = document.querySelector(".slideOpen");
    let closeNav =  document.querySelector(".slideClose");
    document.addEventListener("click", () => {
        openNav.style.width = "250px";
    });
    document.addEventListener("click", () => {
        closeNav.style.width = "0";
    });

.slideOpen { height: 100%; width: 0; position: fixed; z-index: 1;     top: 0; left: 0; background-color: #111; overflow-x: hidden;   transition: 0.5s; padding-top: 60px; }

.slideOpen a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.slideOpen a:hover { color: #f1f1f1; }

.slideOpen .slideClose { position: absolute; top: 0; right: 25px;  font-size: 36px;  margin-left: 50px; }

<div style="font-size:30px;cursor:pointer">&#9776; open</div> 
<div class="slideOpen"> <ul>
    <li> <a href="#" class="slideClose">&times;</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Services</a> </li>
    <li> <a href="#">Clients</a> </li>
    <li> <a href="#">Contact</a> </li>
  </ul> </div>

javascript html css

Answer 1

Answer №1

It is better to attach actionListeners to buttons (links) instead of the entire document.

let slide = document.querySelector(".slide");
let slideOpen = document.querySelector(".slideOpen");
let slideClose =  document.querySelector(".slideClose");
    slideOpen.addEventListener('click', function(event) {
        slide.style.width = "250px";
    });
    slideClose.addEventListener("click", () => {
        slide.style.width = "0";
    });

.slide { height: 100%; width: 0; position: fixed; z-index: 1;     top: 0; left: 0; background-color: #111; overflow-x: hidden;   transition: 0.5s; padding-top: 60px; }

.slide a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.slide a:hover { color: #f1f1f1; }

.slide .slideClose { position: absolute; top: 0; right: 25px;  font-size: 36px;  margin-left: 50px; }

<div style="font-size:30px;cursor:pointer" class="slideOpen">&#9776; open</div> 
<div class="slide"> <ul>
    <li> <a href="#" class="slideClose">&times;</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Services</a> </li>
    <li> <a href="#">Clients</a> </li>
    <li> <a href="#">Contact</a> </li>
  </ul> </div>

Answer 2

It is better to attach actionListeners to buttons (links) instead of the entire document.

let slide = document.querySelector(".slide");
let slideOpen = document.querySelector(".slideOpen");
let slideClose =  document.querySelector(".slideClose");
    slideOpen.addEventListener('click', function(event) {
        slide.style.width = "250px";
    });
    slideClose.addEventListener("click", () => {
        slide.style.width = "0";
    });

.slide { height: 100%; width: 0; position: fixed; z-index: 1;     top: 0; left: 0; background-color: #111; overflow-x: hidden;   transition: 0.5s; padding-top: 60px; }

.slide a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.slide a:hover { color: #f1f1f1; }

.slide .slideClose { position: absolute; top: 0; right: 25px;  font-size: 36px;  margin-left: 50px; }

<div style="font-size:30px;cursor:pointer" class="slideOpen">&#9776; open</div> 
<div class="slide"> <ul>
    <li> <a href="#" class="slideClose">&times;</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Services</a> </li>
    <li> <a href="#">Clients</a> </li>
    <li> <a href="#">Contact</a> </li>
  </ul> </div>

Answer 3

Answer №2

Instead of attaching the addEventListener to the whole document, it is recommended to attach it to specific elements (open and close) only.

Here are the suggested changes:

Add a new class called openMenu to the open menu element like this:

<div style="font-size:30px;cursor:pointer" class="openMenu">&#9776; open</div>

Next, create a new variable to store the element:

let open = document.querySelector(".openMenu");

Then, update the document.addEventListener with references to open and closeNav respectively:

open.addEventListener("click", () => {
    openNav.style.width = "250px";
});
closeNav.addEventListener("click", () => {
    openNav.style.width = "0";
});

The revised code snippet will look something like this:

    let openNav = document.querySelector(".slideOpen");
    let open = document.querySelector(".openMenu");
    let closeNav =  document.querySelector(".slideClose");
    open.addEventListener("click", () => {
        openNav.style.width = "250px";
    });
    closeNav.addEventListener("click", () => {
        openNav.style.width = "0";
    });

.slideOpen { height: 100%; width: 0; position: fixed; z-index: 1;     top: 0; left: 0; background-color: #111; overflow-x: hidden;   transition: 0.5s; padding-top: 60px; }

.slideOpen a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.slideOpen a:hover { color: #f1f1f1; }

.slideOpen .slideClose { position: absolute; top: 0; right: 25px;  font-size: 36px;  margin-left: 50px; }

<div style="font-size:30px;cursor:pointer" class="openMenu">&#9776; open</div> 
<div class="slideOpen"> <ul>
    <li> <a href="#" class="slideClose">&times;</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Services</a> </li>
    <li> <a href="#">Clients</a> </li>
    <li> <a href="#">Contact</a> </li>
  </ul> </div>

Answer 4

Instead of attaching the addEventListener to the whole document, it is recommended to attach it to specific elements (open and close) only.

Here are the suggested changes:

Add a new class called openMenu to the open menu element like this:

<div style="font-size:30px;cursor:pointer" class="openMenu">&#9776; open</div>

Next, create a new variable to store the element:

let open = document.querySelector(".openMenu");

Then, update the document.addEventListener with references to open and closeNav respectively:

open.addEventListener("click", () => {
    openNav.style.width = "250px";
});
closeNav.addEventListener("click", () => {
    openNav.style.width = "0";
});

The revised code snippet will look something like this:

    let openNav = document.querySelector(".slideOpen");
    let open = document.querySelector(".openMenu");
    let closeNav =  document.querySelector(".slideClose");
    open.addEventListener("click", () => {
        openNav.style.width = "250px";
    });
    closeNav.addEventListener("click", () => {
        openNav.style.width = "0";
    });

.slideOpen { height: 100%; width: 0; position: fixed; z-index: 1;     top: 0; left: 0; background-color: #111; overflow-x: hidden;   transition: 0.5s; padding-top: 60px; }

.slideOpen a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.slideOpen a:hover { color: #f1f1f1; }

.slideOpen .slideClose { position: absolute; top: 0; right: 25px;  font-size: 36px;  margin-left: 50px; }

<div style="font-size:30px;cursor:pointer" class="openMenu">&#9776; open</div> 
<div class="slideOpen"> <ul>
    <li> <a href="#" class="slideClose">&times;</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Services</a> </li>
    <li> <a href="#">Clients</a> </li>
    <li> <a href="#">Contact</a> </li>
  </ul> </div>

What steps can I take to improve the functionality of the slide navigation feature

Answer №1

Answer №2

Similar questions

Chrome browser alignment problems

Rearrange the position of the default app name on the navigation bar

What is the best way to include a header in my fixed navigation bar?

The CSS style is missing from the print preview

How to retrieve the object's property with the highest numerical value using JavaScript

Eliminate a specific array from the firebase database

Troubleshooting multiple file upload errors in Asp.net Mvc using ajax

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

Encountering "net::ERR_EMPTY_RESPONSE" error when making a HTTP PUT request using the HUE API in JavaScript

Storing POST data in MongoDB using Node.js

Utilizing the dynamic flair with React's map functionality

What is preventing me from invoking the function that I built using the Function() constructor?

Deleting images from Firestore using a Vue.js componentReady to learn how to remove images

Extracting CSS from a cell in a Datatable and applying it to other cells within the table

`A dynamically captivating banner featuring animated visuals created with JQuery`

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

When trying to make a POST request, the browser displayed an error message stating "net::ERR_CONNECTION

Encountering a TypeError stating that the "option is undefined" error has occurred

What is the best way to keep the calendar of a Datepicker always visible while still being able to select a date easily?

Graphic background integrated into form input