The server is temporarily unavailable. Please try again later.jpg «& gt ;

& lt; / img & gt ;
hardik pethani / Getty Images & amp; amp; nbsp ;

Comenzando

Para diseñar una lista para la navegación, debe usar una lista. Puede ser una lista desordenada estándar de & amp; nbsp que se ha identificado como la navegación. Por ejemplo:

Video destacado

• Inicio
• Productos
• Servicios
• Contáctenos

Al mirar el HTML, el enlace Inicio tiene una ID de

& lt; pre & gt; youarehere & lt; / pre & gt ;

Esto le permite crear un menú que identifica la ubicación actual de sus lectores. Incluso si no planea tener ese tipo de señal visual en su sitio en este momento, puede incluir esa información. Si decide agregar la señal más adelante, usted & amp; apos; tendrá menos codificación para preparar su sitio.

Sin ningún estilo CSS, este menú XHTML parece una lista estándar sin ordenar. Hay viñetas y los elementos de la lista están ligeramente sangrados. Cuando se usan enlaces de marcador de posición, la mayoría de los navegadores no muestran los enlaces como clicables (subrayados y en azul). Cuando pega el HTML en una página web, su navegación se ve así:

• Inicio
• Productos
• Servicios
• Contáctenos

Esto no se parece mucho a un menú. Sin embargo, con algunos estilos CSS agregados a la lista, puede crear un menú que lo haga sentir orgulloso.

Si usted y amp; apos; d desea más ejemplos de menús verticales, realice una búsqueda en la web de lo siguiente:

• Un menú vertical con estilo
• Una plantilla de menú vertical básica
• Un menú vertical con estilo con You Are Here
• Una plantilla de menú vertical básica con You Are Here

Menú de navegación vertical

Un menú de navegación vertical es fácil de escribir porque se muestra de la misma manera que una lista normal: arriba & amp; amp; nbsp; y abajo. Los elementos de la lista se muestran verticalmente en la página.

Al diseñar menús, comience por fuera y trabaje. Primero, diseñe la navegación:

& lt; pre & gt; ul # navigation & lt; / pre & gt ;

Luego, muévase a los elementos y enlaces. Primero, defina el ancho del menú. Esto garantiza que si los elementos del menú son largos, los elementos won & amp; apos; t empujan el resto del diseño o causan desplazamiento horizontal.

& lt; pre & gt; ul # navigation {ancho: 12em; } & lt; / pre & gt ;

Después de establecer el ancho, trabaje en los elementos de la lista. Esto le permite establecer cosas como colores de fondo, bordes, alineación de texto y márgenes.

& lt; pre & gt; ul # navigation li {& lt; br & gt ;
estilo de lista: ninguno; & lt; br & gt ;
color de fondo: # 039; & lt; br & gt ;
borde superior: sólido 1px # 039; & lt; br & gt ;
texto-alinear: izquierda; & lt; br & gt ;
margen: 0; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; / br & gt; & lt; / pre & gt;

Después de establecer los conceptos básicos para los elementos de la lista, trabaje en cómo se ve el menú en el área de enlaces. First & amp; amp; nbsp; style the navigation:

& lt; pre & gt; UL # navegación LI A & lt; / pre & gt ;

Luego, diseñe lo siguiente:

& lt; pre & gt; A: link & lt; br & gt ;
A: visitado & lt; br & gt ;
A: hover & lt; br & gt ;
A: activo & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;

Para los enlaces, haga que los enlaces sean un elemento de bloque (en lugar del predeterminado en línea). Esto obliga a los enlaces a ocupar todo el espacio de la LI y actuar como un párrafo, lo que facilita el estilo de los enlaces como botones de menú. Luego, elimine lo siguiente:

& lt; pre & gt; underline, text-decoration: none; as & lt; / pre & gt ;

Esto hace que los botones se parezcan más a los botones. Tu diseño puede ser diferente.

& lt; pre & gt; ul # navigation li a {& lt; br & gt ;
visualización: bloque; & lt; br & gt ;
decoración de texto: ninguno; & lt; br & gt ;
acolchado: .25em; & lt; br & gt ;
fondo del borde: sólido 1px # 39f; & lt; br & gt ;
borde-derecha: sólido 1px # 39f; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; & lt; / pre & gt;

Con la pantalla : bloque; establecido en los enlaces, se puede hacer clic en el cuadro completo del elemento del menú, no solo en las letras. Esto también es bueno para la usabilidad. Establezca los colores del enlace (enlace, visitado, flotante y amp; nbsp; y activo) si desea que los enlaces sean diferentes del azul, rojo y morado predeterminado.

& lt; pre & gt; a: link, a: visited {color: #fff; } & lt; br & gt ;
a: hover, a: active {color: # 000; } & lt; / br & gt; & lt; / pre & gt ;

También puede prestar un poco de atención al estado flotante cambiando el color de fondo.

& lt; pre & gt; a: hover {fondo-color: #fff; } & lt; / pre & gt ;

Menú de navegación horizontal

Crear & amp; amp; nbsp; menús de navegación horizontal & amp; amp; nbsp; es un poco más difícil que los menús de navegación vertical porque debe compensar el hecho de que las listas HTML prefieren mostrarse verticalmente. Al igual que con el menú horizontal, cree la lista del menú de navegación:

• Inicio
• Productos
• Servicios
• Contáctenos

Para crear un menú horizontal, trabaje igual que lo hizo con el menú vertical. Comience con el exterior y trabaje en. Para iniciar la navegación en la esquina izquierda, configúrela con 0 margen izquierdo y relleno, y flote hacia la izquierda.

Acostúmbrese a establecer el ancho para que su menú no tenga más o menos espacio del que desea. Para menús horizontales, este suele ser el ancho completo del diseño. También puede agregar & amp; amp; nbsp; a color de fondo & amp; amp; nbsp; a la lista para facilitar la lectura.

& lt; pre & gt; ul # navigation {& lt; br & gt ;
flotador: izquierda; & lt; br & gt ;
margen: 0; & lt; br & gt ;
acolchado: 0; & lt; br & gt ;
ancho: 100%; & lt; br & gt ;
color de fondo: # 039; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; & lt; / pre & gt;

El secreto del menú de navegación horizontal está en los elementos de la lista. Los elementos de lista son normalmente elementos de bloque & amp; amp; nbsp; lo que significa que estos elementos tienen una nueva línea colocada antes y después de cada uno. Al cambiar la pantalla de & amp; amp; nbsp; block & amp; amp; nbsp; a & amp; amp; nbsp; en línea, obliga a los elementos de la lista a alinearse horizontalmente uno al lado del otro.

& lt; pre & gt; ul # navigation li {show: inline; } & lt; / pre & gt ;

Trate los enlaces exactamente como el menú de navegación vertical, con los mismos colores y decoración de texto. Agregue un borde superior para delinear los botones cuando el usuario se cierne sobre un botón. Luego, elimine pantalla: bloque; & amp; amp; nbsp; como eso vuelve a colocar las nuevas líneas y destruye el menú horizontal.

Usted está aquí Información de ubicación

Otro aspecto de HTML es este identificador:

& lt; pre & gt; youarehere & lt; / pre & gt ;

Si desea modificar su menú para indicar la ubicación actual de sus usuarios, use esta ID para definir un color de fondo diferente u otro estilo. Mueva esa ID de atributo al elemento de menú correcto en otras páginas para que la página actual esté siempre resaltada.

Si reúne estos estilos en su página, puede crear una barra de menú horizontal o vertical que funcione con su sitio y se descargue rápidamente y sea fácil de actualizar. El uso de XHTML + CSS & amp; amp; nbsp; convierte sus listas en una herramienta poderosa para el diseño.

Si usted y amp; apos; desea más ejemplos de menús horizontales, busque en la web lo siguiente:

• Un menú horizontal con estilo
• Una plantilla de menú horizontal básica
• Un menú horizontal con estilo con You Are Here
• Una plantilla de menú horizontal básica con You Are Here

& amp; # x203A; Informática