Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Dropdown con con CSS

Nota: Esta es una actualización de una publicación popular anterior.
En este tutorial, muestro cómo hacer una navegación desplegable usando solo CSS. Este tutorial comienza con el código que presenté en el tutorial Simple Horizontal Navigation .

Método de aprendizaje preferido?

Fragmentos de código
Si solo desea el código y no necesita una descripción.
Mirar un video
Si te gusta que te muestren cómo funciona algo con alguna explicación, mira el video.
Lectura de una descripción
Si aprende mejor leyendo, incluyo la transcripción del video con los fragmentos de código correspondientes incrustados.

Solo código

Código de inicio aquí 

Transcripción

En este video, voy a hablar sobre cómo crear un menú de navegación desplegable usando solo CSS.
Antes de comenzar, debo mencionar que esta técnica no es excelente para pantallas pequeñas o sitios web móviles. Todavía abordaré esto desde una perspectiva móvil primero, pero la solución que presento no es perfecta para pantallas pequeñas. Abordaré cómo mejorarlo en un video futuro.
Estoy comenzando con el código que presenté en mi tutorial de navegación horizontal simple. Es posible que desee ver ese video primero si no comprende todo el código con el que estoy comenzando.
Si desea seguirlo, puede obtener el código de mi repositorio de GitHub llamado "desplegable". Publicaré un enlace.
Estoy usando el editor de código Brackets para poder ver la Vista previa en vivo mientras trabajo. Puede ver que se trata de una navegación simple que tiene diferentes colores en el elemento activo y también cuando se desplaza.
Cuando creé esta navegación, utilicé un enfoque móvil primero y comencé con un menú de navegación vertical simple que cambia a horizontal en pantallas más grandes.

Cambios HTML

Para agregar submenús, simplemente necesita agregar una lista desordenada anidada dentro del elemento del menú superior.
Entonces, si quiero un submenú en Tutoriales, puedo ir a esa lietiqueta y dentro de ella, insertar otra uletiqueta y algunas lietiquetas para cada elemento del menú con un enlace dentro. La sintaxis es como el menú de nivel superior, simplemente anidada en su interior. Estoy agregando 3 elementos de menú con algunos atajos de Emmet.
También crearé un submenú para boletines.
          <ul>
            <li><a href="#">Tutorial #1</a></li>
            <li><a href="#">Tutorial #2</a></li>
            <li><a href="#">Tutorial #3</a></li>
          </ul>
Ahora esto se ve terrible tanto en la pantalla pequeña como en la pantalla más grande.
Trabajaré en la pantalla pequeña primero.

Cambios CSS para la pantalla pequeña

La razón por la que esto no se puede leer es porque los submenús se muestran en la parte superior del menú principal. Eso es porque hay una heightpropiedad debajo .nav liLos elementos de la lista con submenús solo tienen 40px, lo que no es suficiente para contener los submenús.
Si lo elimino, la altura se establecerá de manera predeterminada, lo autoque significa que el navegador calculará la altura necesaria en función de su contenido. Ahora podemos ver todos los elementos del menú.
El nuevo problema es que el tamaño de fuente para el submenú es mayor que el menú superior.
Esto se debe a que especifiqué el tamaño de fuente con la emunidad. Ems se calculan en función del tamaño de fuente del padre. Y cuando tiene elementos anidados, eso puede causar un efecto de multiplicación. En este caso, los submenús obtienen un tamaño de fuente que es 1.2 veces más grande que el menú principal.
Por lo tanto, usar emspuede ser frustrante cuando anida elementos que especifican un tamaño de fuente.
Hay otra unidad de medida llamada remsque significa "root ems" y siempre basará su valor en el elemento raíz en lugar del padre. Eso significa que evitas la cascada y el efecto multiplicador.
Cambiaré la unidad de medida a rem.
Ahora todos los artículos son del mismo tamaño.
Sin embargo, remno funciona en IE8 y versiones posteriores, por lo que si necesita soporte, necesita una solución diferente. Podrías usar pxen su lugar.
De hecho, quiero que los submenús sean texto más pequeño, para ayudar a distinguirlos de los menús superiores. Así que voy a crear un nuevo selector para las lietiquetas del submenú y luego puedo especificar un tamaño de fuente diferente.
Si especifico lique está dentro de otro, solo lise dirigirá a los elementos de las listas anidadas.
Cuando lo configuro en 1em, puedes ver que el tamaño es consistente.
/* Sub Menu code */
.nav li li {
  font-size: 1em;
}
Pero estableceré esto en .8em para que sea un poco más pequeño.
No me gusta el texto centrado con este menú más largo. Esto viene de esto text-align: centeraquí en la lista desordenada. Quiero dejar esto en la uletiqueta porque quiero que este menú se centre en pantallas grandes, pero haré que las lietiquetas hayan quedado alineadas.
Entonces agregaré text-align: left.nav li.
Luego necesito agregar algo de relleno para que no se abrace a la izquierda. Si agrego eso al elemento de la lista, el borde se desordena, por lo que moveré esa línea a las etiquetas de anclaje.
(.nav a)
padding-left: 15px;
El último problema en el menú de pantalla pequeña es que el borde no se muestra entre todas las líneas.
Tengo el borde en la parte inferior de los elementos de la lista, pero dado que la parte inferior de los elementos de la lista Tutoriales o Boletín está debajo del submenú, el elemento de la lista del menú principal no obtiene el borde.
En cambio, también moveré esa línea de código a la aetiqueta.
Ahora el pequeño menú se ve mejor.

Navegación CSS descendente en pantallas más grandes

Finalmente, puedo abordar el tema principal de este tutorial y es cómo hacer que los submenús solo se muestren al pasar el mouse sobre pantallas más grandes. Eso en realidad no tomará mucho tiempo.
La siguiente parte del código está sucediendo dentro de la consulta de medios. Estoy usando un punto de interrupción de 650px porque esa es la cantidad de espacio que el menú debe mostrarse horizontalmente en una línea en función del ancho de los elementos del menú. Puede usar emso cualquier punto de interrupción que tenga sentido para su diseño.
Este código dentro de la consulta de medios solo ocurrirá en pantallas que tengan 650 píxeles o más.
Lo primero que haré es establecer el posicionamiento del submenú en absoluto, de modo que el submenú se elimine del flujo del documento y ya no ocupe más altura en la barra de navegación principal.
Apunté las uletiquetas adentro lipara que esto solo se aplique a los menús anidados.
Ahora quiero ocultar estos submenús. Puedo configurar la propiedad de visualización para noneque el submenú no se muestre.
.nav li ul {
  position: absolute;
  display: none;
}
Es un poco difícil de ver, pero el borde inferior se asoma desde la barra de navegación principal, por lo que quiero desactivarlo en pantallas más grandes.
.nav a {
  border-bottom: none;
}
Puedes ver la diferencia cuando activa y desactiva esta línea.
A continuación, queremos mostrar el menú cuando pasamos el mouse sobre el menú principal. Por lo tanto, podemos apuntar con el cursor sobre el padre liy luego la lista desordenada.
.nav li:hover ul {
  display: block;
}
El submenú se muestra al pasar el mouse, pero es un menú horizontal. Eso podría ser lo que quieres. Si es así, puede detenerse y darle un estilo para que se coloque donde desee y se vea mejor.
Pero quiero una navegación vertical.
La razón por la que es horizontal es porque estoy usando display: inline-blocktodas las lietiquetas dentro de .navEso fue para hacer la navegación principal horizontal.
Si quiero que esta navegación secundaria sea vertical, necesito apuntar a las lietiquetas secundarias y mostrarlas como block;
.nav li ul li {
  display: block;
}
El ancho del submenú es un poco corto. Esto se debe a que los li tienen un ancho de 130 px, pero el color de fondo proviene de la uletiqueta, que no tiene un ancho establecido y, por lo tanto, está predeterminado auto.
Quiero que las uletiquetas del submenú tengan el mismo ancho que el padre liSi digo width: inheritque hereda el ancho de su padre, o el elemento de la lista.
Ahora todo se alinea bien.
No me gusta que el texto ahora esté alineado a la izquierda. Recuerde que lo arreglé para la pantalla pequeña.
Si agrego este código en la consulta de medios
  .nav ul  li {
    text-align: center;
  }
Todavía no parece que los elementos estén alineados centrados debido al relleno izquierdo que agregué para el menú de pantalla pequeña. Voy a ignorar eso brevemente y lo arreglaré en un momento.
Ahora todos los elementos del menú están alineados con el centro, incluido el submenú. No es muy notable cuando todo mi texto tiene el mismo ancho, pero si cambio una línea, puede verlo.
Quiero centrar solo el menú superior. Es fácil orientar los menús secundarios agregando más selectores, pero no puedo hacerlo en el menú superior. Podría agregar una clase, o puedo apuntar a los descendientes directos de la clase nav usando el selector secundario, que es el >.
Vea cómo cuando agrego el selector secundario, solo se centra la navegación superior. Bueno, centrado más 15px de relleno a la izquierda.
Puedo usar el selector de niños nuevamente para eliminar ese relleno.
  .nav > ul > li > a {
    padding-left: 0;
  }
Cuando estoy usando este selector secundario, no apuntará a las etiquetas de anclaje del submenú porque no son descendientes directos debajo del .navdiv.
El margen izquierdo de 15 px permanecerá en los menús secundarios.
Por supuesto, el estilo de sus menús depende de su contenido y diseño reales. Es posible que no le gusten los estilos que estoy usando aquí y debe ajustarse a sus propias preferencias y diseño.
El concepto principal es el menú oculto que se muestra al pasar el mouse. Y esa parte del código está aquí. Ocultamos el menú anidado en el estado normal y lo mostramos al pasar el mouse sobre él. Si desea que se muestre verticalmente, desea configurar la visualización para bloquear los elementos del menú.
Lo importante a tener en cuenta en este código es el selector. Estoy seleccionando uletiquetas dentro de las lietiquetas. Eso significa que solo se dirige a los submenús anidados. Se vuelve un poco confuso mirar las diferentes etiquetas li y ul, así que asegúrese de entender eso. Puede agregar clases a los submenús para aclarar las cosas si lo desea.

Soporte de navegador

Esto funcionará en todos los navegadores, excepto IE8. Esto se debe a que IE8 no reconoce las consultas de los medios. Entonces, necesitamos poner todo el código de la consulta de medios en el IE8 y debajo de la hoja de estilo.
Si está utilizando un preprocesador, puede evitar mantener el código duplicado, colocando el código en un archivo separado e importándolo tanto en la hoja de estilo principal como en la hoja de estilo IE.
Entonces las cosas se ven decentes en ambos tamaños.

Que sigue

Hay más cosas que hacer para mejorarlo. Como mencioné, la pequeña pantalla no debería mostrarse en la parte superior de la página como está. En un teléfono, probablemente ocuparía toda la pantalla. Además, algunos indicadores de que hay menús ocultos serían útiles aquí para que el usuario sepa que puede desplazarse para ver más. También sería bueno realizar una transición en los menús desplegables.
Planeo abordar estos conceptos en futuros tutoriales próximamente.
Gracias por mirar, por favor avíseme si tiene alguna pregunta.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas