javascript show and hide navigation bar

I am currently working on a HTML menu that includes a button to open it and an unordered list :

 <nav class="menu">
        <button>
            <h1>Menu</h1>
        </button>

        <ul class="mylist">
            <li>About</li>
            <li>Contact</li>
            <li>Services</li>
        </ul>
        
    </nav>

My goal is to utilize JavaScript to change the margin of the ul class upon clicking: CSS:

.mylist{
    margin: 300em;
}

.mylist.shown{
    margin: 2em;
}

However, the current script is not functioning as expected. Can someone please help me identify the problem? Thank you.

let hiddenList= document.querySelector('.mylist');
let button= document.querySelector('button');
hiddenList.style.margin= '300em';

button.addEventListener('click', function(){
    hiddenList.classList.toggle('shown')
})

Answer №1

There is no need to set the margin using this line of code:

hiddenList.style.margin= '300em';

As you have already defined the margin for the element in the CSS like this:

.mylist{
    margin: 300em;
}

Therefore, you can simply remove that line of code.

The issue with that line of code was that it was essentially adding the following inline style to the HTML:

<ul class="mylist" style="margin: 300em">

Due to the rules of precedence in CSS, inline styles have a higher priority over styles declared in the CSS.

For more information, you can refer to MDN's article on CSS Specificity.

Answer №2

It seems like the issue lies in the inline style that was set in this line:

hiddenList.style.margin= '300em';

To fix the problem, simply remove this line and everything should work smoothly.

let hiddenList= document.querySelector('.mylist');
let button= document.querySelector('button');

button.addEventListener('click', function(){
    console.log(hiddenList)
    hiddenList.classList.toggle('shown')
})
.mylist{
    margin: 300em;
}

.mylist.shown{
    margin: 2em;
}
<nav class="menu">
        <button>
            <h1>Menu</h1>
        </button>

        <ul class="mylist">
            <li>About</li>
            <li>Contact</li>
            <li>Services</li>
        </ul>
        
    </nav>

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 standard approach for exchanging localized user interface strings between Microsoft's MVC and JavaScript?

In the process of developing an application that utilizes a dynamic, javascript-based client, I am facing the need for localization. This particular application includes significant UI components that are not generated by Javascript and are instead served ...

What is the method for inserting a vertical line between two div elements?

Can you show me how to add a vertical line between two div elements? .flex-container { display: -webkit-flex; margin: 0 auto; text-align: center; } .flex-container .column { width: 320px; text-align: center; } .vr { border-left: 2px dott ...

Troubleshooting: Angular input binding issue with updating

I am currently facing a challenge with connecting a list to an input object in Angular. I was expecting the updated values to reflect in the child component every time I make changes to the list, but strangely, the initial values remain unchanged on the sc ...

Discover how to access and manipulate JSON files in an Angular application using

Currently, I am diving into learning TypeScript with Angular and I'm interested in reading a JSON file. The structure of my JSON file is as follows: { "nb": "7", "extport": "1176",, "REQ_EMAIL": ...

CSS positioning problems thoroughly elucidated

I'm facing two issues that I can't seem to resolve. My goal is to recreate a design similar to the one found at https://i.sstatic.net/XfPqm.jpg. My first issue is with adjusting the box in the header to stay aligned next to my headline tags. The ...

Encountering difficulties when attempting to inject NotifierService into an Angular Service

I am attempting to incorporate Angular NotifierService into my service class so that I can display error notifications in case of any exceptions from the service side. I attempted to inject a bean of NotifierService in the constructor of my service class, ...

Teaching etiquette to the students of Li

I'm having trouble getting two lists to display correctly on my website. I want one main navigation list that is horizontal and another sub navigation list that is vertical. To achieve this, I need to have two different classes for the list items in m ...

What is the best way to ensure NPM package manager points to my custom version of a library?

Looking to address a bug in an NPM library. Seeking guidance on configuring my software to point to my customized version of the library using package.json instead of the generic version from npmjs.org. This way, I can effectively debug my own iteration o ...

Press the button to update several span elements

Imagine I have multiple span elements like this: <span>A</span> <span>B</span> <span>C</span> <span>D</span> and a div element (which will be converted to a button later) named "change". <div id="chan ...

Windows encountering a Node npm error while searching for tools version

Currently, I am encountering an issue while trying to use node on my Windows 8.1 operating system. The problem arises when I attempt to install npm packages using 'npm install package.json'. It all started when I began using Redis, but I'm n ...

Table design with fixed left columns and header that adjust to different screen sizes

After reading various articles on this issue, I have been unable to find a solution. Most of the examples I've come across feature tables with a single row for the header and rows that consist of just one row, similar to a calendar. My table, on the o ...

Concealing items by placing them strategically between the camera and certain objects in Three.js

At the moment, my project involves utilizing three.js with several objects in the scene. One of the key features I am working on is the ability to select an object and have all other objects between the camera and the selected one hidden or removed. I am ...

Utilize JavaScript to randomly choose images as background tiles in HTML

Currently, I am in the process of developing a game using HTML/CSS/JavaScript. My background is currently set to a single image (100px / 100px) being repeated vertically and horizontally to tile across the entire page body; CSS: body { background-ima ...

Only function components can utilize hooks within their body. The useState functionality is currently not functioning as expected

Currently working on a GatsbyJS project and attempting to utilize a Hook, however encountering an error message. Initially, I decided to remove the node_modules folder and package.json.lock file, then executed npm install again, unfortunately without reso ...

Managing file system operations in Node.js

What is the most effective way to manage file access in node.js? I am currently developing an http-based uploader for exceptionally large files (10sGB) that allows for seamless resumption of uploads. I am trying to determine the optimal strategy for handl ...

Problem with the datepicker in mgcrea.ngStrap

Encountering an issue with the datepicker feature from the mgcrea.ngStrap library. Here is a glimpse of my layout file setup: <html lang="en-US" ng-app="ftc"> <head> <script src="/assets/2db3448a/components/angular.js/angular.min.js">&l ...

Revolutionizing Interaction: Unveiling the Power of Bootstrap 3

Would you be able to assist me in customizing buttons to resemble a typical dropdown link? <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown <span class="caret"&g ...

When trying to save an image using multer's storage, the error message "ENOENT: file or directory not found" is displayed. It is important to note that symbols are not causing

Whenever I try to save an image using multer's storage feature, I encounter the following issue: [Error: ENOENT: no such file or directory, open 'C:\MAMP\htdocs\Chat Backend\public\images\servers\1596819056816AF ...

What is the best way to adjust the width of these elements for a perfect fit?

I'm currently working on a website where I have arranged squares in a grid layout. My goal is to make these squares perfect, with equal width and height. The only issue I'm encountering is that they tend to change between fitting two and three sq ...

Unable to input Email ID and Password within a Selenium Java script for a Bootstrap dropdown menu on the website "https://qa01.pdng.pepsico.com/" without using a frame

To place your Email ID and Password into the appropriate input fields with IDs j_username and j_password, refer to the following HTML code snippet. There are no frames within this code preventing its utilization. ul class="nav__links nav__links--shop_in ...