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.

↰ Previous page Next page ↱