COMO HACER UN MEN DESPLEGABLE EN HTML

Los mens desplegables permiten obtener una vista clara y jerarquizada de todas las secciones principales de una pgina web, como as tambin las subsecciones contenidas en cada una. Todo lo que necesitas hacer para que aparezcan las subsecciones, es pasar el cursor del ratn sobre las secciones principales. Puedes hacer un men desplegable usando solamente HTML y CSS.

PASOS PARA HACER UN MENU DESPLEGABLE EN HTMLCrea la seccin de navegacin. Normalmente es mejor usar para la barra de navegacin de la vista general del sitio, para secciones de enlaces ms pequeos y especficos de una pgina o cuando aparentemente ninguna de las otras opciones encaja mejor.[1][2] Coloca esta seccin dentro de un elemento de modo que puedas aplicarle estilo tanto al contenedor como as tambin al mismo men.

Dale a cada seccin un atributo de clase. El atributo de clase lo usars ms tarde, para aplicarle estilo a estos elementos usando CSS. Dale un atributo de clase al contenedor y otro al men en forma separada.

Agrega una lista de tems de men. La lista desordenada (

) contiene los tems del men superior (tems de la lista

), sobre los cuales el usuario podr pasar el puntero del ratn para ver los mens desplegables. Agrega la clase "clearfix" en tu elemento de la lista, la usars ms adelante, cuando desarrolles la hoja de CSS.

• Inicio
• Colaboradores
• Contctenos

Inserta enlaces. Si los tems de men del nivel superior tambin se vinculan con sus propias pginas, inserta los enlaces correspondientes ahora. Incluso aunque no estn vinculados con ningn otro sitio, incluye enlaces a un ancla inexistente (por ejemplo "#!") de modo que el cursor del usuario cambie su apariencia. En este ejemplo, "Contctenos" no lleva a ningn lugar, pero los otros dos mens s:

• Inicio
• Colaboradores
• Contctenos

Crea sublistas para los tems del men desplegable. Una vez que hayas aplicado los estilos, estas listas se convertirn en un men desplegable. Anida las listas dentro del tem de la lista sobre el cual el usuario pasar el cursor. Incluye un atributo de clase y un enlace, tal como lo hiciste anteriormente.

• Inicio
• Colaboradores
  • Michael Jordan
  • Stephen Hawking
• Contctenos
  • Reportar un error
  • Servicio de soporte

Abre tu hoja de estilos CSS. Agrega un vnculo a la hoja de estilos CSS en la seccin "head" (encabezado) de tu documento HTML, si es que todava no lo has hecho. Este artculo no cubre los aspectos bsicos de CSS, por ejemplo cmo establecer una fuente y un color de fondo.Agrega el cdigo "clearfix". Recuerdas la clase "clearfix" que agregaste en la lista del men? Normalmente los elementos de un men desplegable tienen un fondo transparente y empujan los dems elementos hacia otras direcciones. Puedes resolver este problema con un rpido ajuste con CSS. Aqu tienes una solucin prctica y fcil, aunque no es compatible con Internet Explorer 7 y versiones anteriores:[4] .clearfix:after { content: ""; display: table; }Crea el diseo bsico. Este cdigo ordenar tu men a lo ancho de la parte superior de la pgina y ocultar los elementos del men desplegable. Esto es intencionalmente un ejemplo limitado, para enfocarse solo en el cdigo relevante. Despus puedes mejorarlo agregndole propiedades adicionales de CSS, como por ejemplo, "padding" (relleno) y "margin" (margen).

.nav-wrapper { width:100%; background: #008B8B; } .nav-menu { position:relative; display:inline-block; } .sub-menu { position:absolute; display:none; background: #555; }

Haz que aparezcan los tems desplegables al pasar el cursor. Los elementos de la lista desplegable actualmente estn configurados para no mostrarse. Aqu vers cmo hacer aparecer una sublista completa al pasar el cursor sobre la lista a la que pertenece:

.nav-menu ul li:hover > ul { display:block; }

Nota: si los tems del men desplegable conducen a mens adicionales (controles flotantes), todas las propiedades que agregues aqu los afectarn a todos ellos. Si quieres que el estilo se aplique solamente al primer nivel de mens desplegables, utiliza ".nav-menu > ul".

Ajusta el relleno, el fondo y otras propiedades. Tu men ahora funcionar, pero sera bueno hacerle un tratamiento de belleza. Si no ests familiarizado con las propiedades bsicas de CSS, puedes buscar una gua en lnea sobre cmo programar en CSS. Utiliza estas propiedades para hacer otros cambios en la apariencia y en la posicin de cada clase de elemento.

Consejos:Si quieres agregarle un men desplegable a una forma, con HTML 5 puedes hacerlo fcilmente usando el elemento .[7]El enlace deslizar la pgina hacia la parte superior, mientras que los enlaces que hacen referencia a anclas inexistentes, por ejemplo no deslizarn la pgina. Si te resulta desprolijo, puedes cambiar la apariencia del cursor utilizando CSS.Si vas a copiar y pegar el cdigo de ejemplo, elimina todas las vietas.