Cómo crear un suspendidos en HTML y CSS Menú: 11 pasos

2 Partes:Ajuste del código HTML Ajuste del código CSS

Un menú desplegable proporciona una vista jerárquica, clara de la sección principal de una página y subsecciones de la misma. Todo lo que necesita hacer para que el inciso a aparecer es ciernen sobre la sección principal. Usted puede hacer esto mediante el uso de las lenguas sólo HTML y CSS de programación.

parte 1

Ajuste del código HTML

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 1

Crear la sección de navegación. En general, la gente usa

si no hay otra opción de ajuste. Coloque la sección dentro de un elemento

para estilizar no sólo el recipiente, sino también el menú.

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 2

Tome un atributo de clase de cada sección. Vamos a utilizar el atributo de la clase más tarde con el estilo de estos elementos usando CSS. Dar atributos de clase para separar el recipiente y el menú.

class ="NAV-envoltura"gt;

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 3

Añadir una lista de elementos de menú. Una lista desordenada (

) Contiene los elementos del menú superior (artículos de la lista

), En la que los usuarios mover el puntero del ratón para ver los menús desplegables. Añade clase "clearfix" el elemento de la lista (que volverá más adelante sobre este tema en la hoja de estilo CSS).

Página de inicio

colaboradores

contacto

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 4

Insertar enlaces. Si los menús de nivel superior también tiene enlaces a sus propias páginas, introduzca ahora. Si no hay enlaces, uno para crear una página que no existe (como "#!") Para que el cursor de usuario cambia su apariencia. En este ejemplo, el enlace "contacto" No conduce a ninguna página, pero los otros dos elementos de menú que sí:

La página de Iinicial

colaboradores

contacto

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 5

Crear una sub-lista de los elementos colgantes. Después de terminar el estilo, estas listas se convertirán en el menú desplegable. Almacenarlo en la lista de elementos en la que va a mover el ratón. Al igual que antes, añadir un atributo de clase y un enlace.

parte 2

Ajuste del código CSS

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 6

Abra la hoja de estilos CSS. Enlace a la sección de estilos CSS "cabeza" Caso documento HTML no se ha hecho todavía este artículo no enseña lo básico de lenguaje de programación CSS, como la configuración de la fuente y el color de fondo.

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 7

Agregue el código "clearfix". Recuerde que la clase "clearfix" que ha agregado a la lista del menú? Normalmente, los elementos del menú desplegable tienen un fondo transparente y se pueden combinar otros elementos alrededor. Un código CSS pequeña puede solucionar este problema. Aquí es una solución simple y fácil, pero eso no es compatible con Internet Explorer 7 o una versión anterior:

.clearfix: tras {

contenido: "";

display: table;

}

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 8

Crear el diseño básico. Este código organiza el menú en la parte superior de la página y oculta los elementos suspendidos. Esto es estrictamente funcional para mantener la atención en código relevante- a continuación, puede decorar con propiedades CSS adicionales, tales como relleno y el margen.

.nav-wrapper {

width: 100%;

background: # 999;

}

.NAV-menú {

position: relative;

display: inline-block;

}

.NAV-menú li {

display: inline;

list-style-type: none;

}

.submenú {

position: absolute;

display: none;

fondo: #ccc;

}

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 9

Crea un elemento de arriba aparece cuando se pasa sobre ella. Los elementos de la lista desplegable están configurados para no aparecer. Así es como toda una sub-lista parece flotar sobre la lista a la que pertenece:

.NAV-menú ul li: hover gt; ul {

display: inline-block;

}

Nota: Si los elementos del menú principal desplegable de menús adicionales (controles flotantes), cualquier propiedad adicional de esto afectará a todos ellos. Si desea estilizar sólo el primer nivel de menú desplegable, el uso ".nav-menú gt; ul".

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 10

Entrar en el menú desplegable con una flecha. Los diseñadores de páginas web por lo general indican que un elemento se abre un menú desplegable con una flecha apuntando hacia abajo. El siguiente código añade esta flecha para cada elemento del menú:

.NAV-menú gt; ul gt; li: tras {

contenido: " 25bC"- / * Código Unicode para la flecha que apunta hacia abajo * /

font-size: .5em;

display: inline;

position: relative;

}

Nota: hacer ajustes a la posición de la flecha utilizando las propiedades "top" (Arriba) "fondo" (Continuación), "derecho" (Derecha) o "izquierda" (Izquierda).

Nota: Si no todos los elementos de menú se suspenden, no estilizar toda la clase "NAV-menú". En su lugar, añadir otra clase (como clase suspendido) para cada elemento HTML "leí" en la que desea colocar la flecha. En lo anterior, se hace referencia a esta clase.

Imagen titulada Crear un menú desplegable en HTML y CSS Paso 11

Establecer el relleno, de fondo y otras propiedades. Ahora, el menú debe ser funcional, pero tendrá que ser estilizado. Si usted no está familiarizado con las propiedades básicas de CSS, buscar alguna guía en Internet. Utilice estas propiedades para que cambia de apariencia y posicionamiento de cada clase de elemento.