NavBar Auto Toggling On-CodePudding

I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.

I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:

function closeNav() {
  document.getElementById("nav_bar").style.height = "0%";
  document.getElementById("open-btn").style.display = "inline-block";
  document.getElementById("close-btn").style.display = "none";
}

function openNav() {
  document.getElementById("nav_bar").style.height = "100%";
  document.getElementById("open-btn").style.display = "none";
  document.getElementById("close-btn").style.display = "inline-block";
}

  body {
  background: url(images/bg-img-01.jpg) no-repeat;
  background-size: cover;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#nav_bar {
  background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
  position: fixed;
  top: 0;
  width: 100%;
}

#nav_bar>img {
  display: none;
}

.nav {
  background: none;
  overflow: hidden;
  display: flex;
  margin-inline: auto;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  width: 65%;
  left: 20%;
  padding: 1.4em;
}

.list-item {
  text-decoration: none;
  color: #CBD5DF;
  font-weight: bolder;
}

.list-item {
  position: relative;
}

.list-item::before {
  position: absolute;
  content: "";
  background-color: #535792;
  height: 4px;
  width: 0%;
  top: 25px;
  transition: all .3s ease-in;
}

.list-item:hover::before {
  width: 100%;
}

.list-item:hover {
  color: #C4C7C8;
}

#close-btn,
#open-btn {
  display: none;
}

@media only screen and (max-width:768px) {
  #nav_bar>img {
    display: block;
    position: absolute;
    width: 10em;
    left: 20%;
    top: 10%;
  }
  #nav_bar {
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow: hidden;
    transition: 0.5s;
  }
  .nav {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    top: 20%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  .list-item {
    text-decoration: none;
    display: block;
    color: #ffdada;
    font-size: 1.5rem;
    transition: 0.3s;
  }
  #close-btn,
  #open-btn {
    display: block;
    position: absolute;
    right: 25px;
    top: 20px;
    font-size: 2rem;
    color: #818181;
    transition: all 0.3s;
  }
  #close-btn:hover {
    color: #fff;
  }

<body>
  <div id="nav_bar">
    <a href="#" id="close-btn">
      <i aria-expanded="false" onclick="closeNav()" ></i>
    </a>
    <img src="assests/images/moon.png" alt="" />

    <div >
      <a  href="#">Home</a>
      <a  href="#">About Me</a>
      <a  href="#">Projects</a>
      <a  href="#">C.V</a>
      <a  href="#">Contact</a>
    </div>
  </div>
  <a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i ></i
    ></a>
  <script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

CodePudding user response：

I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.

You can do this in several ways, but here is an example of a simple way to do it:

// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");

// Create a variable to hold the state of your nav
let navIsOpen = false;

// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
  // Update the nav state variable
  navIsOpen = !navIsOpen;
  // run a function that will update the nav "styles"
  updateNav();
})

// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
  navIsOpen
    ?
    nav.classList.add('nav--is-open') :
    nav.classList.remove('nav--is-open');
}

.nav {
  margin-top: 1rem;
  padding: 1rem;
  background-color: lightgrey;
}

.nav--is-open {
  background-color: purple;
  color: white;
}

<button >Toggle nav</button>

<nav >
  Your nav here
</nav>

CodePudding user response：

Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:

const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');

BUTTON.addEventListener('click', function() {
  NAV.classList.toggle('d-none');
});

  body {
  background: url(images/bg-img-01.jpg) no-repeat;
  background-size: cover;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
  position: sticky;
  top: 0;
  width: 100%;
}

menu {
  background: none;
  overflow: hidden;
  display: flex;
  margin-inline: auto;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  width: 65%;
  left: 20%;
  padding: 1.4em;
}

nav li a {
  text-decoration: none;
  color: #CBD5DF;
  font-weight: bolder;
  position: relative;
}

nav li a::before {
  position: absolute;
  content: "";
  background-color: #535792;
  height: 4px;
  width: 0%;
  top: 25px;
  transition: all .3s ease-in;
}

nav li a:hover::before {
  width: 100%;
}

nav li a:hover {
  color: #C4C7C8;
}

.d-none {
  display: none;
}

<nav>
  <img src="assests/images/moon.png" alt="" />

  <menu>
    <li><a  href="#">Home</a></li>
    <li><a  href="#">About Me</a></li>
    <li><a  href="#">Projects</a></li>
    <li><a  href="#">C.V</a></li>
    <li><a  href="#">Contact</a></li>
  </menu>
</nav>

<button id="toggle_navBar">Toggle NavBar</button>

A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!