La vista del menú de mi escritorio es perfecta ahora quiero arreglar el menú de hamburguesas solo para la versión móvil; ¿Cómo puedo agregar un menú de hamburguesas con CSS y 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 & Sports Shoes</a> <a href="">Formal & 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 & 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 .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 & Sports Shoes</a> <a href="">Formal & 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 & 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>Primero, oculta el menú de hamburguesas y muéstralo solo en dispositivos móviles:
.hamburger { display: none; } @media (max-width: 1000px) { .hamburger { display: block; } }Use @media para mostrar/ocultar con ancho móvil