Menu hamburguesa css sin javascript

Menu hamburguesa css sin javascript

Menú hamburguesa css responsive bootstrap

Observa que he sustituido .menu>li:hover por .menu li:hover. Eso le dice al navegador que busque todos los elementos li debajo del menú principal (no sólo los descendientes inmediatos) y muestre su submenú al pasar el ratón por encima. También me he librado de usar la clase submenú porque no es realmente necesaria si se basa el CSS en los descendientes. Esto te permitirá añadir tantos niveles como quieras.

Lo que no conseguirás (todavía) con el CSS son roll-outs animados, etc. – el menú simplemente cambiará entre visible y oculto. Si quieres animar los roll-outs, jQuery puede ser una mejor opción. Dicho esto, la animación CSS existe. Sólo está implementada en uno o dos navegadores, pero puedes añadirla a tu hoja de estilos de todos modos; no romperá los navegadores que no la soportan; simplemente no tendrán la animación.

La compatibilidad entre navegadores para los menús CSS es relativamente fácil, siempre que se ignore IE6. IE7/8 puede funcionar sin demasiados problemas, pero IE6 está muy mal para prácticamente todas las técnicas de menús con CSS. Si es posible, intenta evitar tener que soportar IE6. Es un navegador antiguo y hay que dejarlo morir en paz.

Menú desplegable de hamburguesa sólo css

Observa que he sustituido .menu>li:hover por .menu li:hover. Eso le dice al navegador que busque todos los elementos li debajo del menú principal (no sólo los descendientes inmediatos) y muestre su submenú al pasar el ratón por encima. También me he librado de usar la clase submenú porque no es realmente necesaria si se basa el CSS en los descendientes. Esto te permitirá añadir tantos niveles como quieras.

Lo que no conseguirás (todavía) con el CSS son roll-outs animados, etc. – el menú simplemente cambiará entre visible y oculto. Si quieres animar los roll-outs, jQuery puede ser una mejor opción. Dicho esto, la animación CSS existe. Sólo está implementada en uno o dos navegadores, pero puedes añadirla a tu hoja de estilos de todos modos; no romperá los navegadores que no la soportan; simplemente no tendrán la animación.

La compatibilidad entre navegadores para los menús CSS es relativamente fácil, siempre que se ignore IE6. IE7/8 puede funcionar sin demasiados problemas, pero IE6 está muy mal para prácticamente todas las técnicas de menús con CSS. Si es posible, intenta evitar tener que soportar IE6. Es un navegador antiguo y hay que dejarlo morir en paz.

Responsive hamburger menu css

One of my biggest pet peeves in looking at code from other developers is how needlessly convoluted they make the simplest of tasks, and how much garbage they put in the markup to do something simple. One of the best examples of such pointless code is the current practice of «hiding the menu» for mobile devices.

Worse you have some folks out there saying to make two copies of the same menu, one to be shown on mobile, one for desktop… What in blazes are they doing that couldn’t simply have been handled by restyling the SAME markup? What do they think they need that extra copy for?!?

The practice itself is a good one. Mobile devices don’t have a lot of screen space, you need larger buttons for «finger sized» tap targets, and hiding the menu behind a selection button means users can get at what they SHOULD be going to a website for — the CONTENT — all that much faster!

Laughably, all that code and junk they piss all over the markup with? I can do it with a normal unordered list menu, with a <input type=»checkbox»> and <label> before it! You see, CSS 3 has this wonderful new attribute called «checked» that checkboxes have, which you can use to target other elements alongside it with. Likewise there’s the «adjacent sibling» selector of «+», and the «all siblings selector» of «~» that we can leverage to not have to bloat out the markup with a bunch of classes to fill it out with. Mejor aún, podemos utilizar el contenido generado para introducir nuestro texto o imágenes dentro de la etiqueta. El atributo for de la etiqueta tiene esta capacidad mágica de hacer que al hacer clic en ella se comporte como si se hiciera clic en el elemento de entrada para el que está.

El mejor menú hamburguesa responsivo

Además, establecemos el selector hover a la clase de línea; por favor, tenga en cuenta que el valor por defecto de la clase de línea-1 y línea-3 son más cortos que la clase de línea-2. Así que cada vez que pasamos el ratón sobre el menú hamburguesa, el ancho de todas las líneas se establecerá en 2.5rem. Vea la demostración aquí para su referencia.

.checkbox:checked ~ .navigation{izquierda: 8rem;}.checkbox:checked ~ .sidebar .line-1{transformación: rotate(-405deg) translate(-5px, 6px);ancho: 2.5rem;}.checkbox:checked ~ .sidebar .line-2{opacidad: 0;}.checkbox:checked ~ .sidebar .line-3{transformación: rotate(405deg) translate(-5px, -6px);ancho: 2.5rem;}code-box

.menu-icon{margin-top: 3rem;cursor: puntero;}.line{height: .2rem;width: 2.5rem;margin-bottom: .6rem;background-color: #222;}.line-1, .line-3{width: 1.8rem;transition: all .4s;}.menu-icon:hover .line{width: 2.5rem ;}.checkbox:checked ~ .navigation{left: 8rem;}.checkbox:checked ~ .sidebar . line-1{transform: rotate(-405deg) translate(-12px, 6px);width: 2.5rem;}.checkbox:checked ~ .sidebar .line-2{opacity: 0;}.checkbox:checked ~ .sidebar .line-3{transform: rotate(405deg) translate(-12px, -6px);width: 2.5rem;}code-box

Support-help2web

El equipo de Support-help2web publica un amplio contenido sobre informática, noticias y artículos de interés sobre proyectos electrónicos.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.Más información
Privacidad