Navegación horizontal

En este capítulo, aprenderemos cómo agregar navegación horizontal o menu items al sitio web.

Step 1 - Para crear elementos de menú o navegación horizontal, agreguemos el siguiente código en <div id = “top-nav”> en el archivo index.html, que contiene la lista de elementos del menú.

<div id = "top-nav"> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2- Es una lista simple con viñetas para el menú superior. 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 ScreenTip….

Step 5 - Introduzca el texto que desee como sugerencia en pantalla y haga clic en Aceptar.

Step 6 - En el Text to display campo, ingrese Home y seleccione el archivo index.html y luego haga clic en Aceptar.

Step 7 - De manera similar, agregue 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"> 
<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"> </div> 
         <div id = "main-content"> </div> 
         <div id = "footer"> </div> 
      </div> 
   </body>  
</html>

Step 8 - Para establecer el estilo de la navegación superior, vaya a la Manage Styles panel.

Step 9 - Haga clic derecho en “#top-nav”y seleccione Modificar estilo. Seleccione la categoría 'Borde' y cambie el ancho a delgado.

Step 10 - Seleccione la categoría Cuadro y desmarque el relleno 'Igual para todos' e ingrese 10 en los campos superior e inferior.

Step 11 - Ir al Position categoría.

Step 12 - Retire el 50 de la heightcampo y haga clic en Aceptar. En el panel Aplicar estilos, haga clic en Nuevo estilo ...

Step 13 - Entrar #top-nav ulen el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en". En la categoría Bloque, seleccione el centro del campo de alineación de prueba y vaya a la categoría Lista.

Step 14 - Seleccionar none desde el list-style-type campo y haga clic en Aceptar.

Step 15 - De nuevo, desde el Apply Styles panel, haga clic en Nuevo estilo ... Entrar #top-nav ul lien el campo Selector. A continuación, seleccione la hoja de estilo existente en el menú desplegable "Definir en" y vaya a la categoría Diseño.

Step 16 - Seleccionar inline desde el display campo y haga clic en Aceptar.

Step 17 - Vaya al panel Aplicar estilos, haga clic en Nuevo estilo ... Entrar #top-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 18 - Ir al Background categoría.

Step 19 - Seleccionar green como color de fondo y vaya al Box category.

Step 20 - Establecer el padding values y haga clic en Aceptar.

Step 21- Ahora vayamos al panel Aplicar estilos nuevamente y hagamos clic en Nuevo estilo. Entrar#topnav ul li a:hover en el campo Selector y seleccione la hoja de estilo existente en el menú desplegable "Definir en" y seleccione black como el font color.

Step 22 - Ahora ve al Background category.

Step 23 - Seleccione el color de fondo para su opción de menú cuando el mouse esté sobre el elemento del menú y vaya a la categoría Borde.

Step 24- Seleccione el estilo, el ancho y el color del borde y haga clic en Aceptar. Para comprobar cómo se ve, vaya al menú Archivo y seleccione Vista previa en el navegador.

Cuando pasa el mouse sobre cualquier elemento del menú, cambiará el fondo y el color de la fuente.

↰ Previous page Next page ↱