Curso HTML | Creación del menú de navegación

Navegación del curso 

En el último artículo, creamos toda la estructura de nuestro sitio web utilizando elementos HTML y etiquetas. Ahora comencemos a construir el sitio web en partes.

La primera parte del sitio web es el encabezado . Entonces, lo primero que crearemos es el menú de navegación en el encabezado de la página web.

La barra de navegación contiene :  

• Un logotipo alineado a la izquierda.
• Un menú de cinco elementos alineados a la derecha.

Veamos la parte del código del menú de encabezado de nuestro archivo index.html . A continuación se muestra la parte del código del menú Encabezado donde la parte resaltada es la barra de navegación superior:  

<!-- Header Menu of the Page -->
<header>
    <!-- Top header menu containing
       logo and Navigation bar -->
    <div id="top-header">
                 
        <!-- Logo -->
        <div id="logo">
  
        </div>   
         
        <!-- Navigation Menu -->
        <nav>
                      
        </nav>
    </div>   
  
    <!-- Image menu in Header to contain an Image and
         a sample text over that image -->
    <div id="header-image-menu">
  
    </div>
</header>

La primera tarea es agregar la imagen para el logotipo. Pasos para incluir imagen y crear logo : 

• Descargar imagen haciendo clic aquí .
• Copie y pegue la imagen en el directorio: root/images. Donde root es el directorio superior de nuestro proyecto. En nuestro caso se denomina como “proyecto de muestra”.
• Incluya la imagen en el código usando la etiqueta img.

La segunda tarea es crear una lista desordenada en HTML dentro de la sección de navegación del menú de encabezado:  

• Agregue una lista desordenada en la sección del menú de navegación con 5 elementos de lista llamados «Inicio», «Acerca de nosotros», «Nuestros productos», «Carreras» y «Contáctenos».

El código de la sección Encabezado después de agregar las dos cosas anteriores se verá como se muestra a continuación:  

<!-- Header Menu of the Page -->
<header>
         
    <!-- Top header menu containing
         logo and Navigation bar -->
    <div id="top-header">
             
        <!-- Logo -->
        <div id="logo">
            <img src="images/logo.png" />
        </div>   
                 
        <!-- Navigation Menu -->
        <nav>
          <div id="menu">
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
        </nav>
    </div>   
 
    <!-- Image menu in Header to contain an Image and
         a sample text over that image -->
    <div id="header-image-menu">
 
    </div>
</header>

Si ahora abre el archivo index.html en un navegador, verá el siguiente resultado: 

Esto se ve muy diferente a lo que vimos en las capturas de pantalla del proyecto final. Esto se debe a que a nuestro sitio web le falta CSS por ahora. Es decir, acabamos de crear la estructura de la barra de navegación, para que se vea hermosa, tendremos que agregar estilos usando CSS .

Diseñaremos la barra de navegación más tarde, pero primero cree un archivo llamado » style.css » y agréguelo a la carpeta » sample project/css «. Incluya también el archivo CSS creado en el archivo «index.html» agregando la siguiente línea entre las etiquetas de encabezado.  

<link rel="stylesheet" href="css/style.css">

Antes de comenzar a diseñar el menú de navegación, lo primero que debe hacer es establecer los valores CSS predeterminados para los elementos HTML. Copie y pegue el siguiente código en su archivo » style.css «: 

html, body{
    height: 100%;
}
     
body{
    margin: 0px;
    padding: 0px;
    background: #FFFFFF;
    font-family: 'Roboto';
    font-size: 12pt;
}
         
h1, h2, h3{
    margin: 0;
    padding: 0;
    color: #404040;
}
     
p, ol, ul{
    margin-top: 0;
}
 
p {
    line-height: 180%;
}
 
ol, ul{
    padding: 0;
    list-style: none;
}
     
.container{   
    /* Set width of container to
        1200px and align center */
    margin: 0px auto;
    width: 1200px;
}

Como puede ver en el CSS anterior, hemos establecido los valores predeterminados para casi todos los elementos HTML útiles necesarios para el proyecto. Además, hemos creado una clase CSS llamada » contenedor «. Básicamente, esto define un contenedor con un ancho de 1200 px y todo el texto dentro de él alineado al centro. Agregue este contenedor con nombre de clase a la etiqueta <header> .
El siguiente paso es asignar algunas identificaciones a nuestros elementos HTML y luego usar esas identificaciones en el archivo CSS para darles estilo . Aquí, ya hemos asignado identificadores a los elementos HTML, como puede ver en el código anterior. Comencemos a agregarles estilos.

A continuación se muestra la guía paso a paso para diseñar la barra de navegación: 

• Estilo general del encabezado : no se necesita mucho estilo para la etiqueta del encabezado. Solo se necesita configurar la etiqueta del encabezado en «desbordamiento: oculto» para evitar que la ventana se desborde al cambiar el tamaño del navegador. 
  Agregue el siguiente código a style.css: 

header{
     
    overflow: hidden;
}

• Aplicar estilo a la barra de navegación (#top-header) : establezca una altura fija de 60 px para la barra de navegación y alinee los textos al centro. 
  Agregue el siguiente código a style.css: 

#top-header{
         
    text-align: center;
    height: 60px;
}

• Diseño de logotipo (#logotipo) : elimine el relleno del div principal del logotipo. Haga que tanto el padre como la imagen floten hacia la izquierda y asígneles anchos. 
  Agregue el siguiente código a style.css: 

#logo{
    float: left;
    padding: none;
    margin: none;
    height: 60px;
    width: 30%;
}
 
#logo img{
    width: 60%;
    float: left;
    padding: 10px 0px;
}   

• Estilo del menú de navegación (#menú) : 
  agregue el siguiente código a style.css: 

#menu{
    float: right;
    width: 70%;
    height: 100%;
    margin: none;
}
     
#menu ul{
    text-align: center;
    float: right;
    margin: none;
    background: #0074D9;
}
     
#menu li{
    display: inline-block;
    padding: none;
    margin: none;
}
     
#menu li a, #menu li span{
    display: inline-block;
    padding: 0em 1.5em;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
}
     
#menu li a{
         
    color: #FFF;
}
     
#menu li:hover a, #menu li span{
    background: #FFF;
    color: #0074D9;
    border-left: 1px solid #0074D9;
    text-decoration: none;
}

A continuación se muestra el código CSS general que combina todas las clases e ID anteriores para la barra de navegación:  

/*************************/
/*    Styling  Header    */
/*************************/
header{
     
    overflow: hidden;
}
 
#top-header{
         
    text-align: center;
    height: 60px;
}
 
/****************/   
/* Styling Logo */
/****************/
#logo{
    float: left;
    padding: none;
    margin: none;
    height: 60px;
    width: 30%;
}
 
#logo img{
    width: 60%;
    float: left;
    padding: 10px 0px;
}   
 
/***************************/
/* Styling Navigation Menu */
/***************************/
#menu{
    float: right;
    width: 70%;
    height: 100%;
    margin: none;
}
     
#menu ul{
    text-align: center;
    float: right;
    margin: none;
    background: #0074D9;
}
     
#menu li{
    display: inline-block;
    padding: none;
    margin: none;
}
     
#menu li a, #menu li span{
    display: inline-block;
    padding: 0em 1.5em;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
}
     
#menu li a{
         
    color: #FFF;
}
     
#menu li:hover a, #menu li span{
    background: #FFF;
    color: #0074D9;
    border-left: 1px solid #0074D9;
    text-decoration: none;
}

Abra el archivo index.html en el navegador ahora, ¿puede ver algo como se muestra en la imagen a continuación? De lo contrario, cuente y vuelva a verificar su código con el nuestro, debe haberse perdido algo: 

Entonces, hemos creado con éxito la barra de navegación para el encabezado de nuestro sitio web. Lo siguiente es insertar la imagen y un texto sobre la imagen justo debajo de la barra de navegación en el encabezado.

Navegador compatible:

• Google Chrome
• Borde de Microsoft
• Firefox
• Ópera
• Safari