Una barra de navegación ayuda a sus visitantes el acceso todas las áreas de su sitio web o blog. Si desea crear una barra de navegación horizontal, en vez de una vertical, puede hacerlo mediante la creación de un HTML básico (Hypertext Markup Language) lista y aplicar CSS (Cascading Style Sheets) estilos al código. Esta lista no requiere de secuencias de comandos especiales y mostrará en cualquier navegador que soporte CSS, incluyendo navegadores de dispositivos móviles.
Instrucciones
1
Inserte el siguiente código después de la apertura "<head>" etiqueta en su documento HTML y antes del cierre </ head>.
<Style type = "text / css">
li navbar
{
display: inline;
margen: 5px 0;
-style-type lista: none;
}
navbar un
{
text-decoration: none;
}
</ Style>
2
Pegue el código siguiente después de la etiqueta "<body>" en su elemento HTML para crear la lista que será la base de su barra de navegación.
<Ul id = "navbar">
<Li> <a href="URL1"> Link 1 </a> </ li>
<Li> <a href="URL1"> Link 2 </a> </ li>
<Li> <a href="URL1"> Link 3 </a> </ li>
<Li> <a href="URL1"> Enlace 4 </a> </ li>
</ Ul>
3
Cambie los valores de "URL1", "URL2" y así sucesivamente para los enlaces reales en los que desea dirigir a sus visitantes. Cambie el texto del enlace - "Link1" y "Link2", entre otros - a un texto descriptivo que informar a sus visitantes, donde conducen los enlaces. Puede añadir texto sin enlaces añadiendo una línea similar a esto en su lista:
<Li> Su texto va aquí </ li>
4
Personaliza tu barra de navegación mediante la adición de estilos en el CSS en la cabeza de su documento. Por ejemplo, puede agregar un color básico de fondo (negro), color de fuente (rojo) y el borde (gris) con los siguientes cambios:
li navbar
{
display: inline;
margen: 5px 0;
-style-type lista: none;
padding: 5px;
frontera: 1px solid # 808080;
background: # 000;
color: # FF0000;
}
navbar un
{
text-decoration: none;
color: # FF0000;
}
5
Guarde el documento HTML / Web.
Consejos y advertencias
- Si la lista es más ancha que la pantalla de su visitante, que se ajustará a la siguiente línea.
- Se puede aplicar a casi cualquier propiedad CSS a su lista, lista de piezas o de prueba de enlace contenido.
- Nombres Enlace expliquen con claridad la página de destino.
- Si usted tiene un archivo CSS independiente, inserte el CSS de navegación en ese archivo y guardarlo. Añadir su lista de HTML a su archivo de página / HTML Web.