Décimo post de ayuda. En este tutorial veremos cómo añadir un menú en la parte superior de nuestra página.
Nuestro menú constará de 2 partes. La primera (que llamaré cabecera1) irá dedicada a publicidad, banner o similares y la segunda (cabecera2) contendrá una lista horizontal de enlaces.
Como queremos que el menú se sitúe arriba de todo, tendremos que poner el código justo debajo de la etiqueta <body>. Usaremos lo siguiente:
<div class="cabecera1">
CONTENIDO DE LA CABECERA 1
</div>
<div class="cabecera2">
CONTENIDO DE LA CABECERA 2
</div>
Como ejemplo, en la cabecera 1 pondremos una imagen de 800x100:
<div class="cabecera1">
<a href="/"><img src="http://lorempixel.com/output/technics-q-c-800-100-6.jpg" /></a>
</div>
Y en la cabecera 2 un listado de URLs:
<div class="cabecera2">
<a href="URL">URL 1</a> |
<a href="URL">URL 2</a> |
<a href="URL">URL 3</a> |
<a href="URL">URL 4</a> |
<a href="URL">URL 5</a> |
<a href="URL">URL 6</a> |
<a href="URL">URL 7</a> |
<a href="URL">URL 8</a> |
<a href="URL">URL 9</a> |
<a href="URL">URL 10</a> |
<a href="URL">URL 11</a> |
<a href="URL">URL 12</a>
</div>
Esto es lo que tenemos por ahora:
Ahora que tenemos el contenido, vamos a modificar un poco su diseño, para ello, nos vamos al CSS (antes de la etiqueta </style>) y pegamos lo siguiente (iré explicanco cada línea con un comentario):
.cabecera1 {
background: #000; /* define el color de fondo */
height: 100px; /* define la altura de la cabera 1 */
color: #fff; /* define el color del texto que no es enlace */
text-align: center; /* centra el contenido */
font-size: 13px; /* define el tamaño de la fuente */
padding: 5px; /* añade márgenes, para que el contenido no esté tan pegado a los lados */
}
.cabecera1 a {
color: #fff; /* define el color de los enlaces */
}
.cabecera2 {
height: 20px; /* define la altura de la cabera 2 */
background: #333; /* define el color de fondo */
color: #fff; /* define el color del texto que no es enlace */
text-align: center; /* centra el contenido */
font-size: 13px; /* define el tamaño de la fuente */
padding: 2px; /* añade márgenes, para que el contenido no esté tan pegado a los lados */
}
.cabecera2 a {
color: #fff; /* define el color de los enlaces */
}
El resultado sería:
Ahora ya sólo os queda cambiar el contenido por lo que queráis mostrar y personalizar el diseño a vuestro gusto.
Nota: La idea del menú superior es de finofilipino . He creado este tutorial desde 0 (nada de copy/paste), previa autorización de Fino, ya que la idea era suya, porque me lo han pedido por privado.
