Los últimos tutoriales de desarrollo web
 

Edificio web - Adición de navegación


La construcción de un sitio web desde cero Parte V:. Adición de navegación.


Lo que haremos

En este capítulo vamos a:

  • Añadir un menú de navegación

Añadir un menú de navegación

En la carpeta demoweb, editar los script.js archivo JavaScript.

Agregue lo siguiente a la secuencia de comandos:

document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>";

Editar la hoja de estilo

En la carpeta demoweb, editar su site.css hoja de estilos

Agregue el siguiente al contenido del archivo:

Además de site.css

ul#menu {
    padding: 0;
    margin-bottom: 11px;
}

ul#menu li {
    display: inline;
    margin-right: 3px;
}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    color: white;
    background-color: black;
}

Editar la página inicial

En la carpeta demoweb, editar su página de inicio index.html.

index.html

<!DOCTYPE html>

<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>

<nav id="nav01"></nav>

<div id="main">
  <h1>Welcome to Our Company</h1>
  <h2>Web Site Main Ingredients:</h2>

  <p>Pages (HTML)</p>
  <p>Style Sheets (CSS)</p>
  <p>Computer Code (JavaScript)</p>
  <p>Live Data (Files and Databases)</p>

  <footer id="foot01"></footer>
</div>

<script src="script.js"></script>

</body>
</html>
Inténtalo tú mismo "

La página de arriba, es una copia de la página de los capítulos anteriores, con un elemento de navegación añadido.


Todas las páginas de edición

En la carpeta demoweb, agregue el elemento de navegación para las otras páginas (customers.html y about.html).


Lee mas

Más información acerca de las listas HTML en nuestro Tutorial de HTML .