Te doy la bienvenida a nuestro sitio web, ahora encontrarás la resolución que buscas.
Ejemplo 1: menú de hamburguesas css
/* Link to Codepen in source for PoC */
<style>.containerbackground:dodgerblue;padding:20px;height:70px;#hamburgerwidth:40px;height:40px;display: block;position: relative;float: right;transform:rotate(0deg);transition:.5s ease-in-out;cursor: pointer;#hamburger spandisplay: block;position: absolute;height:4px;width:100%;background:white;border-radius:9px;opacity:1;left:0;transform:rotate(0deg);transition:.25s ease-in-out;#hamburger span:nth-child(1)top:0px;#hamburger span:nth-child(2)top:12px;#hamburger span:nth-child(3)top:24px;#hamburger.open span:nth-child(1)top:14px;transform:rotate(135deg);#hamburger.open span:nth-child(2)opacity:0;left:-60px;#hamburger.open span:nth-child(3)top:14px;transform:rotate(-135deg);style><body><divclass="container"><divid="hamburger"><span>span><span>span><span>span>div>div>body>Ejemplo 2: cómo hacer una hamburguesa de navegación con html css y javascript
doctypehtml><htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, intial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><metahttp-equiv="Content-Type"content="text/html"/><title>burger exampletitle><styletype="text/css">.burgerdisplay: inline-block;cursor: pointer;transform:translate(0,5px);.bar1,.bar2,.bar3width:35px;height:5px;background:#000;margin:6px0;-webkit-border-radius:25%;-moz-border-radius:25%;border-radius:25%;transition: all 0.75scubic-bezier(0.5,-1,0.59,1.88);.opened-nav.bar1-webkit-transform:rotate(-45deg)translate(-9px,6px);transform:rotate(-45deg)translate(-9px,6px);.opened-nav.bar2opacity:0;transform:translate(-17.5px,0);.opened-nav.bar3-webkit-transform:rotate(45deg)translate(-8px,-8px);transform:rotate(45deg)translate(-8px,-8px);style>head><body><divclass="burger"onclick="toggle_burger(this)"><divclass="bar1">div><divclass="bar2">div><divclass="bar3">div>div><scripttype="text/javascript">functiontoggle_burger(x)
x.classList.toggle("opened-nav");script>body>html>Ejemplo 3: menú de hamburguesas
hamburger menuAgradecemos que quieras añadir valor a nuestra información participando con tu experiencia en las referencias.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)