Cómo hacer un menú desplegable con dos columnas

Organizar el contenido en múltiples columnaspara ahorrar espacio.

 

COLUMNAS desplegable

Menús desplegables se han convertido en un elemento básico en el diseño Web, proporcionando una manera ordenada para presentar una gran cantidad de opciones de navegación en un espacio horizontal o vertical compacto. Hay varias razones por las que se quiere romper sus desplegable listas en varias columnas. Si sus listas de vínculos son cada vez más elementos de diseño oscurecedores demasiado tiempo y, o si desea agregar imágenes o títulos subcategoría, múltiples columnas son una solución perfecta. Esta técnica se puede implementar sin el uso de secuencias de comandos adicionales, pero requiere un conocimiento básico de HTML y CSS.

 

Cree un contenedor para su menú con un DIV y darle una clase especial. Por ejemplo:

 

div class = menu - UL va aquí - / div

 

La clase de menú se puede utilizar para controlar cómo aparece el recipiente y el estilo de la lista desordenada creará siguiente.

 

Introduzca una lista desordenada (UL) entre las etiquetas DIV donde - UL va aquí - se muestra en el último ejemplo. La lista debe contener los principales enlaces de navegación que, al hacer clic, se producen los desplegable menús. Por ejemplo:

 

div class = menu ul lia href = objetivo link1.html = _selfMain Enlace 1/a/li lia href = objetivo link2.html = _selfMain Link 2 / a - Submenú va aquí - / li lia href = # target = _self Artículo principal 1/a/li / ul / div

 

Observe que el segundo elemento de la lista (LI) contiene un comentario que indica dónde se debe insertar el submenú. Colocación de la lista de submenús dentro de la etiqueta la lista de su elemento principal vínculo le permitirá controlar su visibilidad y lo rompe en columnas.

 

Vuelva a colocar la - Submenú va aquí - Comentar con una lista desordenada contiene los enlaces del submenú. Por ejemplo:

 

div class = menu ul lia href = objetivo link1.html = _selfMain Enlace 1/a/li lia href = objetivo link2.html = _selfMain Link 2 / a ul lia href = objetivo sub1.html = _selfSub Enlace 1/a/li lia href = objetivo sub2.html = _selfSub Enlace 2/a/li lia href = objetivo sub3.html = _selfSub Enlace 3/a/li lia href = sub4.html target = _selfSub Enlace 4/a/li lia href = sub5.html target = _selfSub Enlace 5/a/li lia href = objetivo sub6.html = _selfSub Enlace 6/a/li / ul / li lia href = # target = _self Artículo principal 1/a/li / ul / div

 

Añadir estilos a la hoja de estilos para la clase de menu o insertar en el encabezado del documento usando etiquetas de estilo. Su primer estilo se debe definir el aspecto general de su barra de navegación y la fuente. Por ejemplo:

 

. Menu {border: none; border: 0px; margen: 0px; padding: 0px; font-family: "Arial", sans-serif; font-size: 16px; font-weight: bold;}

 

Dale a tu estilo ul una lista de estilo de nada para crear una barra horizontal. También debe definir una altura: Menú ul {height: 35px; list-style: none;}.

 

Dé a cada li principal un flotador izquierdo: menu li. {Float: left;}

 

Terminar añadiendo estilos de la barra de navegación principal, añadiendo una definición de enlace. Como mínimo, sus propiedades de vínculo deben incluir lo siguiente:

 

. Menu li a {line-height: 35px; display: block; padding: 25px 0px; text-align: center; text-decoration: none;}

 

La propiedad line-height Centra el texto verticalmente en el bar, mientras que el relleno crea un amplio espacio entre cada enlace. La propiedad display de bloque convierte la parte de hacer clic en el enlace en un espacio rectangular para una mejor experiencia de usuario.

 

Crear un estilo para el ul submenú y darle las siguientes propiedades:

 

. Menu li ul {display: none; altura: auto; padding: 0px; margen: 0px; position: absolute; ancho: 450px; z-index: 200;}

 

La posición absoluta y z-index son esenciales para permitir el submenú que aparece debajo de la barra de navegación principal y por encima de cualquier otro elemento de diseño. Al definir una anchura, a mantener el menú de asfixia su contenido.

 

Añadir estilos para la li submenú que contiene cada enlace submenú. Definir una anchura de 50% para permitir que los elementos de lista fluyan en dos columnas. Recuerde que debe dar a cada uno una propiedad display de bloque para toda la fila se puede hacer clic en lugar de sólo texto.

 

. Menu li li {display: block; float: left; margen: 0px; padding: 0px; anchura: 50%;}

 

Terminar añadiendo un estilo de la lista de submenú para definir la fuente, el tamaño, el color, el comportamiento estacionario y una pantalla de bloqueo.

 

Consejos y advertencias

Mejore su menú mediante un script menú jQuery para añadir retrasos gráciles y se ciernen efectos a su menú.