Thiết kế website giá rẻ

Question

I’ve been playing around with the some code to create a simple website for my portfolio with HTML, CSS & JS. but I came to a brick wall.

the problem is the menu on “about page” which doesn’t work as it works on the rest of the pages in the code.

When you click on the menu when you are at the about page, the menu doesn’t overlay the content of that page but rather squeeze the menu content to the side while the content of the about page is in the middle. And the idea of the menu is when you click on the menu it should hide the about page content and only show the content of the menu bar.

Been looking at this code for a few days, been trying to re-write the code, googled what the issue might be, tried to use ChatGPT to see if the AI sees any problems with the code but it tells me that everything is fine. BTW THE CODE IS INCOMPLETE BECAUSE I HAVEN’T FINISHED THE ENTIRE CODE YET BECAUSE THE MENU ISSUE BEEN BUGGING ME AND I’VE BEEN TRYING TO FIX IT.

HTML CODE

<header class="header-other-sides">
    <div class="header-logo">
        <a href="../index.html"><img src="../media/logo.jpg" alt=""></a>
    </div>
    <div class="header-left-side">
        <div id="instagram-icon-header">
            <a href="https://www.instagram.com/ameliakbujar/" target="_blank"><img src="../media/icons/new-instagram.png" alt=""></a>
        </div>
        <div id="x-icon-header">
            <a href="https://x.com/AmeliaBujar" target="_blank"><img src="../media/icons/new-x.png" alt=""></a>
        </div>
        <div id="menu-icon-header">
            <div class="flex-menu">
                <!--Menu Code-->
                <div id="mymenu" class="menubar">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><img src="../media/icons/new-exit.png" alt="Exit Menu Icon"></a>
                    <h1>The Secrets Of The Morgue</h1>
                    <a href="../index.html">Home Page</a>
                    <br>
                    <a href="./all-posts.html">All Posts</a>
                    <br>
                    <a href="./about.html">About</a>
                    <br>
                    <a href="./contact.html">Contact</a>
                </div>
                <span style="font-size:30px;cursor:pointer" onclick="openNav()"><img src="../media/icons/new-menu.png" alt="Hamburger Menu Icon"></span>
            </div>
        </div>
    </div>
</header>

<main class="body-section">
    <article class="about-section-about-page">
        <h1>The Secrets Of The Morgue</h1>
        <p>The Secrets Of The Morgue Is All UFO Website Create As A Hobby By AKB Who Created The Website In July Of 2024</p>
        <p>It Is Created To Investigate If We Are Truly Alone In Universe Or If There Are Other Speices Out There</p>
        <p>The US Governemnt Throughout The Years Had A Lot Of UFO Programs Which They Didn't Tell Us A Lot About, If They Didn't Find Anything Out There Then Why Should They Not Declassify All The Documents? Why Keep It Secret ?</p>
        <p>The US Government Isn't The Only Governemnt Which Keeps Secrets About The Universe All Governemnts Keep Those Secrets Locked Away Somewhere</p>
        <p>And Companies Like Nasa Keep Adding To The Mystery With Using Photoshop On Pictures From Mars To Being Very Secretive About What They Do. Why ?</p>
        <p>That's Why We Are Here To Find The Truth</p>
    </article>
</main>

CSS CODE

/* MENU CODE */
#mymenu {
    width: 0;
  }
  
  .menubar {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 50px;
    background-color: #000000;
  }

  #mymenu img {
    width: 55px;
    height: 55px;
    margin-top: 30px;
    margin-top: 30px 30px 0px 0px;
  }
  
  .menubar a {
    padding: 8px 8px 8px 32px;
    display: block;
    transition: 0.3s;
  }

  .menubar h1 {
    margin: 50px 0px 30px 20px;
  }
  
  .menubar {
    line-height: 22px;
  }
  
  .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
  }

/* END MENU CODE */

.header-other-sides {
    background-color: rgba(255, 255, 255, 0.233);
    backdrop-filter: blur(50px);
}

.header-logo img {
  width: 200px;
  height: 100px;
  border-radius: 20px;
  margin: 15px 0px 15px 15px;
}

.header-left-side {
  float: right;
  display: flex;
  margin: -90px 30px 0px 0px;
}

#x-icon-header {
  margin: 0px 20px 0px 20px;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000000;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.about-section-about-page {
    background-color: #fafafa;
    width: 1300px;
    margin: 150px 0px 0px 120px;
    border-radius: 20px;
    height: 450px;
    text-align: center;
    border: 2px solid #000000;
    box-shadow: 0px 0px 10px 10px #d7d6d6;
}

.about-section-about-page h1 {
    font-size: 35px;
    padding-bottom: 10px;
}

.about-section-about-page p {
    font-size: 20px;
    padding: 0px 30px 00px 30px;
}

.about-section-about-page h1:hover, .about-section-about-page p:hover {
    color: #926f34;
}

main {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
  }

JS CODE

function openNav() {
    console.log("Opening the nav");
    document.getElementById("mymenu").style.width = "100%";
  }
  
  function closeNav() {
    console.log("Closing the nav");
    document.getElementById("mymenu").style.width = "0";
  }

The JS code is very simple because I removed all the extra fancy things because I wanted to see if some of the fancy things I wanted the menu to do were the problem. which they weren’t

Thiết kế website giá rẻ

Danh mục

Problems with Menu bar