How to make a collapsible menu @media-CodePudding

How to make a collapsible navbar if the screen is smaller ? My code looks like this:

<header >
  <a href="#" >
    <img src="images/logo.png" alt="">
  </a>
  <nav >
    <div >
      <a href="index.html">Strona główna</a>
      <a href="shop.html">Sklep</a>
      <a href="cart.html">
      <ion-icon name="basket"></ion-icon>Koszyk<span>0 </span>
    </a>
    </div>
  </nav>
</header>

CodePudding user response：

First, you will need to add the components that implement a disclosure pattern, i.e. the burger button.

And don’t forget to provide a helpful alt Text for your logo, usually the name visible inside the Logo

<header >
<a href="#" >
    <img src="images/logo.png" alt="ACME">
</a>
<nav >
  <button  aria-expanded="false" aria-label="Menu"><ion-icon name="menu-outline"></ion-icon></button>
  <div  >
  …

If you don’t want to use a <button>, you’ll need to apply role=button and make sure that the element is focusable by means of keyboard as well, maybe by tabindex=0.

Then, via CSS Media Queries you can control on which viewport sizes you want to allow users to toggle the menu open and closed.

If you apply Mobile First coding, your basic CSS will be the smallest version, and then min-width queries add layouts for bigger screens. 900px is just an example, you might want to determine that breakpoint depending on the size of your menu.

.cart--hidden { display: none; }

@media screen and (min-width: 900px) {
  .navtoggle { display: none; }
  .cart--hidden { display: block };
}

Finally, you’ll need to bind to the click event to change the toggle-status in JavaScript.

const toggle = document.querySelector('.navtoggle');
const cart = document.querySelector('.cart');

toggle.addEventListener('click', () => {
  if (toggle.ariaExpanded === "true") {
    toggle.ariaExpanded = "false";
    cart.classList.add('cart--hidden');
  } else {
    toggle.ariaExpanded = "true";
    cart.classList.remove('cart--hidden');
  }
});

.cart--hidden { display: none; }

@media screen and (min-width: 900px) {
  .navtoggle { display: none; }
  .cart--hidden { display: block; }
}

<header >
<a href="#" >
    <img src="images/logo.png" alt="ACME">
</a>
<nav >
    <button  aria-expanded="false">Menu</button>
    <div >
        <a href="index.html">Strona główna</a>
        <a href="shop.html">Sklep</a>
        <a href="cart.html">
            <ion-icon name="basket"></ion-icon>Koszyk<span>0 </span>
        </a>
    </div>
</nav>

Beware again, that if you don’t use a <button> for the toggle, you will need to bind keydown handlers as well. Browsers do that by default for certain interactive elements.

CodePudding user response：

You not really clear as to what you want to do. So it depends on what you are trying to accomplish. Maybe this will help get put you in the right direction:

CSS Files

//Media Query to run block of CSS code when viewport is at set width

//Mobile
@media screen and (max-width: 768px) {
  // Makes it disappear  
  nav {
    display: none;
  }
  .some-class {
    render hamburger menu maybe...
    display: block;
  }

//Tablet
@media(max-width: 1024px) and (min-width: 768px) {
  nav {
    display: block;
  }
  .some-class {
    display: hidden;
  }
}

I would recommend looking into some documentation. I have found W3 schools is a good place to look for easy reference. W3 Schools Media Query