Agregando menu de navegación

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

Lo que haremos

En este capítulo vamos a:

Agregar menu de navegacion web

En la carpeta DemoWeb, edite el archivo llamado script.js.

Coloque el siguiente código dentro del archivo script.js

script.js
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 estilos css

En la carpeta DemoWeb, editar el archivo llamado site.css

Insertar el siguiente contenido al archivo site.css:

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;
}

Edite la página inicial

En la carpeta DemoWeb, editar su página principal index.html.

index.html
<!DOCTYPE html>
<html>
<head>
<title>PHP Demo</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>

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.

Editar Todas las páginas

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


Privacidad | Legal | Sitemap | Google+