Question 298183 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I'm trying do a button in a responsive layout

I’m trying do a button in a responsive layout. It needs to be hidden sometimes and show itself when the screen is small, I see a code that do it with vanilla js. But i’m using typescript, the problem it is in the typing typescript. Can someone help me with that?
thecode

function Menu(e){
    let list = document.querySelector('ul');
    e.name === 'menu' ? (e.name = "close",list.classList.add('top-[80px]') , list.classList.add('opacity-100')) :( e.name = "menu" ,list.classList.remove('top-[80px]'),list.classList.remove('opacity-100'))
}
Tags:

2

Answers


  1. 0

    you can use button tag with type as any of the following ("radio,checkbox,etc..") so that you can create responsive buttons. To make the button functionable, you must link any other page with the button tag using inline href.

    Login or Signup to reply.
  2. 0

    You can achieve this by using media queries in CSS to detect the screen width/height and automatically apply the properties you need

    You can find various device size and its respective pixel size in height and width, you can use these to set the button visibility as follows

    /* by default don't show the button */
.yourElement {
  display: none;
}

/* set display to block to show your element only if the width of the screen is less than or equal to 800px*/
@media only screen and (max-width: 800px) {
  .yourElement {
    display: block;
  }
}

    Read more about media queries here css media query

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search