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 .