how to set a div made of 3 buttons that in the moment in which the broswer's window is shrunk turns into a pop-up menu

Viewed 28

I'm writing this message as I'd need to know how to set a div made of 3 buttons that, in the moment in which the broswer's window is shrunk and it's no longer on full screen, turns into a pop-up menu visible through the conventional three lines.

1 Answers

You can define @media in your css.

An example has been set here: https://jsfiddle.net/jfgm9r2v/8/

The html code is like this:

<div class="hideOnSmall">
  <button>Text1</button>
  <button>Text2</button>
  <button>Text3</button>
</div>
<div class="displayOnSmall">
<div class="hamburger-box">
  <button>MyHambuger</button>
</div>

The magic happens in the css:

.hideOnSmall {
  display: block;
}

.displayOnSmall {
  display: none;
}

@media only screen and (max-width: 768px) {
  .displayOnSmall {
    display: block;
  }

  .hideOnSmall {
    display: none;
  }
}
Related