JavaScript causing issues with CSS transform translate functionality

const openBtn = document.querySelector('.open')
const closeBtn = document.querySelector('.close')
const navContainer = document.querySelector('.nav-container')

openBtn.addEventListener('click', () => {
    openBtn.classList.add('hide')
    closeBtn.classList.remove('hide')
    navContainer.classList.remove('.show-nav')
})

closeBtn.addEventListener('click', () => {
    closeBtn.classList.add('hide')
    openBtn.classList.remove('hide')
    navContainer.classList.add('.show-nav')
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
    color: black;
}
li{
    list-style: none;
}
.nav-btn{
    position: absolute;
    right: 0%;
    border: none;
    background: transparent;
    margin: 10px;
    cursor: pointer;
}
.hide{
    display: none;
}
body{
    overflow: hidden;
}
.nav-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    transition: all 0.2s ease;
}
.show-nav{
    transform: translateX(0%);
}
h1{
    margin: 10px;
    font-size: 40px;
}
h1 span{
    color: cornflowerblue;
}
.links{
    margin: 10px;
    margin-left: 24px;
    font-size: 32px;
}
.links a{
    line-height: 48px;
}
.social{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0%;
    margin-bottom: 10px;
}
.social a{
    margin-right: 6px;
    margin-left: 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <button class="nav-btn open">
        <i class="fas fa-bars fa-3x"></i>
    </button>
    <button class="nav-btn close hide">
        <i class="fas fa-times fa-3x"></i>
    </button>
    <nav class="nav-container">
        <h1>
            Side
            <span>
                Bar
            </span>
        </h1>
        <ul class="links">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Contacts</a>
            </li>
        </ul>
        <ul class="social">
            <li>
                <a href="#">
                    <i class="fab fa-twitter fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-youtube fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-github fa-lg"></i>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>

I attempted to create a sidebar using HTML, CSS, and JavaScript but encountered an issue with the sidebar not displaying correctly. My goal is to show the sidebar by adding a '.show-nav' class that resets the '.nav-container' transform property to translate back to 0%. Although the '.show-nav' class is being added, the properties within it do not update the style as intended.

javascripthtmlcss

Answer №1

There were some errors found in your code, such as the usage of 

navContainer.classList.remove('.show-nav')
. Note that there should not be a dot within the remove method. Additionally, inconsistencies were observed in your CSS.

const openBtn = document.querySelector('.open')
const closeBtn = document.querySelector('.close')
const navContainer = document.querySelector('.nav-container')

openBtn.addEventListener('click', () => {
    openBtn.classList.add('hide')
    closeBtn.classList.remove('hide')
    navContainer.classList.add('show-nav')
})

closeBtn.addEventListener('click', () => {
    closeBtn.classList.add('hide')
    openBtn.classList.remove('hide')
    navContainer.classList.remove('show-nav')
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
    color: black;
}
li{
    list-style: none;
}
.nav-btn{
    position: absolute;
    right: 0%;
    border: none;
    background: transparent;
    margin: 10px;
    cursor: pointer;
}
.hide{
    display: none;
}
body{
    overflow: hidden;
}
.nav-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: 100vh;
    background: pink;
    transform: translateX(-100%);
    transition: all 0.2s ease;
}
.show-nav{
    transform: translateX(-10%);
}
h1{
    margin: 10px;
    font-size: 40px;
}
h1 span{
    color: cornflowerblue;
}
.links{
    margin: 10px;
    margin-left: 24px;
    font-size: 32px;
}
.links a{
    line-height: 48px;
}
.social{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0%;
    margin-bottom: 10px;
}
.social a{
    margin-right: 6px;
    margin-left: 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <button class="nav-btn open">
        <i class="fas fa-bars fa-3x"></i>
    </button>
    <button class="nav-btn close hide">
        <i class="fas fa-times fa-3x"></i>
    </button>
    <nav class="nav-container">
        <h1>
            Side
            <span>
                Bar
            </span>
        </h1>
        <ul class="links">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Contacts</a>
            </li>
        </ul>
        <ul class="social">
            <li>
                <a href="#">
                    <i class="fab fa-twitter fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-youtube fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-github fa-lg"></i>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>

Answer №2

Eliminate the "." in your classList.add and .remove. The class identifier is not required as it is already declared. Upon testing your code, I discovered that you are unable to close the side nav. This is due to the width extending to cover up the close button completely. You can resolve this by either reducing the width or by adding the following code snippet:

button {
    z-index: 10
}


const openBtn = document.querySelector('.open')
const closeBtn = document.querySelector('.close')
const navContainer = document.querySelector('.nav-container')

openBtn.addEventListener('click', () => {
    openBtn.classList.add('hide')
    closeBtn.classList.remove('hide')
    navContainer.classList.add('show-nav')
})

closeBtn.addEventListener('click', () => {
    closeBtn.classList.add('hide')
    openBtn.classList.remove('hide')
    navContainer.classList.remove('show-nav')
})
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    font-family: 'Roboto', sans-serif;
}
a{
    text-decoration: none;
    color: black;
}
li{
    list-style: none;
}
.nav-btn{
    position: absolute;
    right: 0%;
    border: none;
    background: transparent;
    margin: 10px;
    cursor: pointer;
}
.hide{
    display: none;
}
body{
    overflow: hidden;
}
.nav-container{
    display: flex;
    background: blue;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    transition: all 0.2s ease;
}
.show-nav{
    transform: translateX(0%);
}
h1{
    margin: 10px;
    font-size: 40px;
}
h1 span{
    color: cornflowerblue;
}
.links{
    margin: 10px;
    margin-left: 24px;
    font-size: 32px;
}
.links a{
    line-height: 48px;
}
.social{
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0%;
    margin-bottom: 10px;
}
.social a{
    margin-right: 6px;
    margin-left: 24px;
}

button {
  z-index: 10;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <button class="nav-btn open">
        <i class="fas fa-bars fa-3x"></i>
    </button>
    <button class="nav-btn close hide">
        <i class="fas fa-times fa-3x"></i>
    </button>
    <nav class="nav-container">
        <h1>
            Side
            <span>
                Bar
            </span>
        </h1>
        <ul class="links">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Contacts</a>
            </li>
        </ul>
        <ul class="social">
            <li>
                <a href="#">
                    <i class="fab fa-twitter fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-youtube fa-lg"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fab fa-github fa-lg"></i>
                </a>
            </li>
        </ul>
    </nav>
</body>
</html>

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 process for displaying the current bitcoin price on an HTML page using API integration?

I'm looking to develop an application that can display the current Bitcoin price by fetching data from the API at . I want to showcase this information within an h2 element. Any suggestions on how I could achieve this? Thank you in advance. const e ...

javascripthtmlapiexpressbitcoin

Sending information into MySQL using NodeJS with the help of Postman

As a newcomer in the field, I am exploring how to combine MySQL with nodeJS for integrating projects into WordPress. app.post('/users/add', (req, res) => { id = req.body.id, firstname = req.body.firstname, surname = req.body.surname ...

javascriptmysqlnode.jsexpresspostman

Secure your messages with PHP encryption and decrypt them with JavaScript

I am looking for a way to encrypt a message using PHP and then decrypt it using JavaScript on the client side. I tried using Blowfish with mcrypt, but encountered an issue where PHP was outputting non-alphanumeric characters while JavaScript was only displ ...

phpjavascriptajaxmcryptblowfish

Leveraging the MQTT.js (node package) in an electron application to dynamically update the Document

I am currently delving into electron and node.js in my project that involves working with mqtt to dynamically update the DOM. I am receiving messages via mqtt in my main.js through the onmessage function. Here is a snippet of my main.js: const { app, Brows ...

javascriptnode.jselectronmqtt

Adding a C# variable to a URL in a Razor view using jQuery

My Razor page looks like this: @{ ViewData["Title"] = "mypage"; string ApiAddress = "https://localhost:8114/api/"; } <div> ... </div> @section Scripts{ <script> functio ...

javascriptc#jquerystringrazor

Using V-model in conjunction with the boostrap-vue b-table component

I am attempting to bind v-model by passing the value inside the items array. However, the binding is not functioning correctly. The main objective here is to utilize a store since all these values are utilized across multiple "wizard" components. Whe ...

javascriptvue.jsbootstrap-vue

Tips for utilizing addEventListener to navigate to a different HTML page when a button is clicked

Is there a way to utilize addEventListner for redirecting to the next page? I want to create a function where clicking a button will redirect to another HTML page. How can I achieve this with code? This is what my HTML looks like: <button>submit< ...

javascripthtmlfrontend

Can a div be made to resize gradually?

Within a centered div, I have floating elements, each with uniform height and width. Whenever the div is resized, a gap appears on the right side where there isn't enough space to accommodate another element. My goal is for the div to expand only when ...

jquerycsshtmlresize

Troubleshooting: AngularJS not displaying $scope variables

I have a question that has already been answered, but the suggested solutions did not work for me. Everything seems to be fine, but the content within curly brackets is not displaying on screen. <div ng-controller="Hello"> <p>The I ...

javascriptangularjs

Codepen fails to function properly after being uploaded to a server

I have encountered an issue with my code on CodePen. After exporting it as a .zip file and attempting to run it on a local server, it failed to work. I am unsure of the exact reason behind this. I made sure to include all the necessary dependencies in the ...

javascripthtmlcssjsonrss

Issue with ReactJS and Material UI: FlexGrow functionality malfunctioning

I'm currently grappling with the implementation of FlexBox, particularly in understanding how to effectively utilize flexGrow. Despite my efforts, I haven't been able to achieve the desired result as the background appears to only wrap around the ...

javascriptreactjsmaterial-ui

The curious case of unusual behavior in jQuery's livequery() method

When attempting to use the jQuery plugin "livequery" to highlight certain words within dynamically generated search results, the highlighting does not appear to work! Strangely, adding an alert() function before executing the code causes the highlighting ...

javascriptjquerylivequery

Enhancing an array of objects by incorporating properties using map and promises

I am encountering an issue with assigning a new property to each object in an array, which is obtained through an async function within a map method. Here is the code snippet that I am using: asyncFunction.then(array => { var promises = array.map(o ...

javascriptobjectpromise

What is the method for substituting one text with another using two-way data binding?

I implemented two different cases in my Mat-Table. When there is no data, the user will see a message saying "No Data Found". However, if the user enters text in the filter search, the "No Data Found" message should be hidden and replaced with the entered ...

javascriptangulartypescriptmat-table

How to Load and Parse CSV Files in Meteor.js

What is the best approach for reading CSV files into a Meteor app from a filesystem path located within the /private directory? I came across the fast-csv package, which is also available as a Meteor package. However, I am unclear on how to create a creat ...

javascriptnode.jsmeteor

Unable to establish a connection with the browser using Socket.IO Spring server, but it works successfully when connecting with

After developing a Spring Boot Application with a SocketIoServer Endpoint, I encountered an issue where the server worked perfectly when tested in a Node.js client environment, but did not respond in Chrome or Edge browsers (haven't tested others). T ...

javascriptjavanode.jsspringsocket.io

What is the best way to ensure that each service call to my controller is completed before proceeding to the next one within a loop in Angular?

Calling an Angular service can be done like this: this.webService.add(id) .subscribe(result => { // perform required actions }, error => { // handle errors }); // Service Definition add(id: number): Observable < any > { retu ...

javascriptangulartypescriptcallback

What is the best way to adjust the size of a DIV containing a background

Recently, I've been delving into the world of CSS3 and have encountered an issue where the height of a DIV does not adjust as the background image expands. Ideally, the DIV should expand along with the background image. Following the DIV, there will b ...

htmlbackground-image

Elements stacking up in succession

I am having issues with the alignment of my div elements, as they are either stacking behind or on top of each other. td { width: 14.28%; height: 16.6%; position: relative; } .details { position: absolute; display: none; ba ...

htmlcss

Tips for obtaining JSON data within jQuery's sortable feature

Here is the structure of my code : HTML Code : <form action="example3_action.php" name="example3" method="POST"> <input type="hidden" id='serialize_output' name="serialize_output"> <div class='span4'> ...

javascriptjqueryhtmljsonjquery-ui-sortable