Navegación vertical
En este capítulo, aprenderemos cómo agregar navegación vertical o elementos de menú al sitio web. Vayamos paso a paso.
Step 1 - Para crear elementos de menú o navegación vertical, agreguemos el siguiente código en <div id = “left-nav”> en el archivo index.html que contiene la lista de elementos del menú.
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>Step 2- Es una lista simple con viñetas para su menú principal. Para crear un hipervínculo, vaya a ladesign view o code view.
Step 3 - Seleccione el elemento que desea usar como hipervínculo y presione Ctrl + K.
Step 4- Haga clic en el botón Información en pantalla…. Introduzca el texto que desee comoscreentip y haga clic en Aceptar.
Step 5 - En el Text to display campo, ingrese Home y seleccione el archivo index.html y luego haga clic en Aceptar.
En esta etapa, nuestra página index.html tiene el siguiente aspecto:
Step 6 - Agregue más hipervínculos para otros elementos del menú, como se muestra en el siguiente código.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
<li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
<li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
</ul>
</div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>Step 7- Para configurar el estilo para la navegación superior, vaya al panel Administrar estilos. Haga clic derecho en#left-nav y seleccione Modificar estilo ...
Step 8 - Ingrese el valor 0.9 en el campo de tamaño de fuente y seleccione em de la lista desplegable junto al tamaño de fuente y vaya a la categoría Cuadro.
Step 9- Marque el relleno 'Igual para todos' e ingrese 5 en el campo superior y haga clic en Aceptar. En el panel Aplicar estilos, haga clic en Nuevo estilo ...
Step 10 - Entrar #left-nav ulen el campo Selector. Seleccione la hoja de estilo existente en el menú desplegable "Definir en" y en la categoría Lista, no seleccione ninguna del campo de tipo de estilo de lista y haga clic en Aceptar.
Step 11 - De nuevo, desde el Apply Styles panel, haga clic en New Style. Desmarque el relleno 'Igual para todos'. Ingrese 0.2 en el campo inferior y haga clic en Aceptar.
Step 12 - Entrar #left-nav ul li en el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en" y vaya a la categoría Cuadro.
Step 13 - Vaya al panel Aplicar estilos y haga clic en Nuevo estilo.
Step 14 - Entrar #left-nav ul li a en el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en" y seleccione blanco como color de fuente.
Step 15- Vaya a la categoría Fondo. Seleccione el color como color de fondo
Step 16 - Ir al Box categoría y establezca los valores de relleno.
Step 17 - Ir al Layoutcategoría. Seleccioneblock desde el display menú desplegable y haga clic en Aceptar.
Step 18- Ahora vayamos al panel Aplicar estilos nuevamente y hagamos clic en Nuevo estilo. Entrar#left-nav ul li a:hoveren el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en". Seleccione negro como color de fuente.
Step 19- Ahora ve a la categoría Fondo. Seleccione el color de fondo para su opción de menú cuando el mouse esté sobre el elemento del menú y haga clic en Aceptar.
Step 20 - Para comprobar cómo se ve, vaya al menú Archivo y seleccione Vista previa en su navegador.
Cuando coloca el mouse sobre cualquier elemento del menú, cambiará su fondo y color de fuente.