hamburger menu only for mobile

Question

My desktop menu view is perfect now I want to fix hamburger menu only for mobile version only; how can I add hamburger menu with CSS and JavaScript?

 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>menu 1</title> </head> <div class="navbar-mega"> <div class="dropdown-mega"> <button class="dropbtn-mega" style="padding-top: 6px;padding-bottom: 0px;"><a href=""><i class="fa fa-home" aria-hidden="true"></i></a></button> </div> <div class="dropdown-mega"> <button class="dropbtn-mega"> Footwear</button> <div class="dropdown-content-mega"> <div class="row-mega"> <div class="column-mega"> <h3>Shoes</h3> <a href="">Casual Shoes</a> <a href="">Sneaker &amp; Sports Shoes</a> <a href="">Formal &amp; Party Shoes</a> <a href="">School Shoes</a> </div> <div class="column-mega"> <h3>Sandals</h3> <a href="">Clogs </a> <a href="">Sandal</a> <a href="">Flip Flop</a> </div> <div class="column-mega"> <h3>Socks</h3> <a href="">Newborn Socks</a> <a href="">Regular Socks </a> <a href="">School Socks</a> <a href="">Fashion Socks</a> <a href="">Stocking &amp; Tights</a> </div> <div class="column-mega"> <h3>Sock Shoes</h3> <a href="">Booties</a> <a href="">Rubber Soles Sock Shoes</a> </div> <div class="column-mega"> <img width="300px" src=""> </div> </div> </div> </div> <div class="hamburger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> </div> <body> </body> </html> javascriptcssEdit tags

Answer 1

First, hide the hamburger menu and display it just on mobile devices:

.hamburger {
  display: none;
}

@media (max-width: 1000px) {
  .hamburger {
    display: block;
  }
}

Answer 2

使用@media 显示/隐藏宽度移动

Answer 3

 .hamburger { cursor: pointer; display: none; } .hamburger span { background: #ccc; width: 2px; height: 18px; display: inline-block; } @media only screen and (min-width : 320px) and (max-width : 480px) { .hamburger { display: block; } }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>menu 1</title> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> </head> <body> <div class="navbar-mega"> <div class="hamburger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> <div class="dropdown-mega"> <button class="dropbtn-mega" style="padding-top: 6px;padding-bottom: 0px;"> <a href=""><i class="fa fa-home" aria-hidden="true"></i></a> </button> </div> <div class="dropdown-mega"> <button class="dropbtn-mega"> Footwear</button> <div class="dropdown-content-mega"> <div class="row-mega"> <div class="column-mega"> <h3>Shoes</h3> <a href="">Casual Shoes</a> <a href="">Sneaker &amp; Sports Shoes</a> <a href="">Formal &amp; Party Shoes</a> <a href="">School Shoes</a> </div> <div class="column-mega"> <h3>Sandals</h3> <a href="">Clogs </a> <a href="">Sandal</a> <a href="">Flip Flop</a> </div> <div class="column-mega"> <h3>Socks</h3> <a href="">Newborn Socks</a> <a href="">Regular Socks </a> <a href="">School Socks</a> <a href="">Fashion Socks</a> <a href="">Stocking &amp; Tights</a> </div> <div class="column-mega"> <h3>Sock Shoes</h3> <a href="">Booties</a> <a href="">Rubber Soles Sock Shoes</a> </div> <div class="column-mega"> <img width="300px" src=""> </div> </div> </div> </div> </div> </body> </html>

hamburger menu only for mobile

Question

3 answers

solution1
0 2021-11-15 09:56:47

solution2
0 2021-11-15 09:56:55

solution3
0 2021-11-15 10:31:50

hamburger menu only for mobile

Question

3 answers

solution1 0 2021-11-15 09:56:47

solution2 0 2021-11-15 09:56:55

solution3 0 2021-11-15 10:31:50

solution1
0 2021-11-15 09:56:47

solution2
0 2021-11-15 09:56:55

solution3
0 2021-11-15 10:31:50