Empecemos por el menú que aparece en la parte superior de la ventana.
Ya has hecho algún trabajo preparatorio para este menú. Sin duda recordará el bonito degradado de color que se guardó como gráfico de un píxel. Esto es exactamente lo que se utilizará ahora. Sin embargo, primero hay que crear la estructura HTML correspondiente para el área del menú. Podría tener este aspecto
<div class="header"> <div class="header-top"> <h1>Tu asesor fiscal</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Página de inicio</a></li> <li><a href="#">Quiénes somos</a></li> <li><a href="#">Cómo trabajamos</a></li> <li><a href="#">Contacto</a></li> <li><a href="#">Impresión</a></li> </ul> </div> <div class="header-img"> </div> </div> </div>
Para diseñar el fondo, se incluye el gráfico de un píxel y se repite verticalmente hasta rellenar todo el elemento.
.topmenu { background-image: url(../images/menue.jpg); background-repeat: repeat-x; width: 978px; height: 37px; float: left; }
A continuación, se puede dar formato al menú. En principio, no hay que tener en cuenta ninguna característica especial. Sólo los siguientes aspectos son decisivos para este tipo de menús:
- Blender las viñetas mediante list-style-type: none;.
- Garantiza que las entradas de la lista se muestren unas junto a otras.
Como ya sabe, en este punto trabajo con un gradiente de color, que se implementa mediante un gráfico. Por supuesto, ahora hay muchas otras opciones disponibles para los menús. Piense, por ejemplo, en frameworks de JavaScript como jQuery. Por supuesto, presentar todas estas posibilidades excedería el ámbito de este artículo. Sin embargo, existen desde hace tiempo numerosos generadores en línea que permiten crear menús con unos pocos clics. Puedes encontrar uno de ellos -sin juzgar si es el más ingenioso de su clase- en http://www.cssmenubuilder.com/.
En cualquier caso, me he decidido por la siguiente variante:
.topmenu ul { width: 100%; height: 37px; list-style-type: none; } .topmenu ul li { height: 37px; float: left; padding-right: 25px; padding-left: 25px; } .topmenu ul li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 37px; color: #fff; text-decoration: none; display: block; height: 37px; float: left; padding-right: 20px; padding-left: 20px; } .topmenu ul li a:hover { background-image: url(../images/menue-hover.jpg); background-repeat: repeat-x; background-position: left top; }
Sólo el estado hover es realmente decisivo. Si se produce este evento, se muestra un gráfico de fondo diferente.
El menú de la derecha
El sitio web no sólo tiene un menú en la parte superior, sino que también se muestra uno en la zona derecha de la ventana.
Este menú pertenece al área div con la clase content-right. Para la fase de desarrollo de la página, sólo he almacenado contenido ficticio allí.
<div class="content-right"> <h2>Menú principal</h2> <ul> <li><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li><a href="#">Enlace 3</a></li> <li><a href="#">Enlace 4</a></li> <li><a href="#">Enlace 4Enlace 5</a></li> <li><a href="#">Enlace 6</a></li> <li><a href="#">Enlace 7</a></li> <li><a href="#">Enlace 8</a></li> <li><a href="#">Enlace 9</a></li> <li><a href="#">Enlace 10</a></li> </ul>
Primero se posiciona el área en el lugar adecuado y con el tamaño deseado.
.content-right { width: 210px; float: right; padding-right: 20px; margin-top: 20px; border: 1px solid #eee; }
Continuamos con la definición del menú propiamente dicho. Esta vez, sin embargo, las entradas están una debajo de la otra. Así que sólo tienes que asegurarte de que las viñetas están ocultas. El resto del diseño del menú depende de ti.
.content-right ul { list-style-type: none; } .content-right ul li { padding-left: 45px; padding-top: 4px; padding-bottom: 4px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ccc; } .content-right ul li a { font-family: Arial, Helvetica, Serif; font-size: 12px; color: #000; text-decoration: none; text-align: left; display: block; } .content-right ul li a:hover { color: #0b90d6; }Ahora debería aparecer la siguiente imagen en el navegador:
El menú inferior
Habrá otro menú en la parte inferior de la página web. Aquí en PSD-Tutorials.de tal menú también se utiliza para proporcionar enlaces a información general.
También hay un aviso de copyright en nuestro sitio web. Ambas cosas son en realidad bastante típico para los sitios web. En primer lugar, la estructura HTML de nuevo.
<div class="bottom"> <ul> <li><a href="index.html">Página principal</a></li> <li><a href="#">Sobre nosotros</a></li> <li><a href="#">Noticias</a></li> <li><a href="#">Centro de control</a></li> <li><a href="#">Contacto</a></li> <li><a href="#">Impresión</a></li> <lili><a href="#">Mapa del sitio</a></li> </ul> <p>© Copyright 2014 by PSD-Tutorials.es</p> </div>
Esta es una simple lista ul. Cada entrada de la lista contiene una entrada de menú. Debajo de la lista ul hay un elemento p que contiene el aviso de copyright. Lo que falta, por supuesto, es la sintaxis CSS.
.bottom { background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-position: left top; text-align: center; width: 1000px; height: 110px; float: left; }
Por supuesto, el diseño del pie de página depende de ti. Yo vuelvo a utilizar un degradado de color. Sin embargo, también puedes utilizar un simple color de fondo o una sintaxis CSS3, por ejemplo. En el caso de mi variante gráfica, sin embargo, es crucial que se evite la repetición mediante background-repeat: no-repeat;.
Primero eche un vistazo al resultado:
Lo que destaca aquí son las barras blancas que aparecen junto a cada uno de los elementos del menú. Éstas se definen utilizando varias especificaciones border-left, lo que en última instancia significa que las especificaciones se refieren al borde izquierdo del elemento.
En general, la sintaxis para el menú inferior tiene este aspecto:
.bottom ul { margin-top: 30px; list-style-type: none; } .bottom ul li { display: inline; border-left-width: 1px; border-left-style: solid; border-left-color: #fff; } .bottom ul li a { font-size: 12px; color: #fff; text-decoration: none; padding-right: 15px; padding-left: 15px; } .bottom ul li a:hover { text-decoration: underline; } .bottom p { font-size: 12px; color: #fff; margin-top: 40px; } .bottom a { font-size: 12px; color: #fff; margin-top: 40px; } .bottom a:hover { text-decoration: none; }
A diferencia del menú superior, aquí hay una característica especial. De hecho, no se carga ningún otro gráfico en el caso hover. Sin embargo, para dejar claro a los visitantes que están pasando el ratón por encima de un enlace, los enlaces individuales aparecen subrayados cuando se produce el evento hover.
Al final de este tutorial, se han completado los pasos básicos del sitio web. Lo que falta ahora es el embellecimiento de la página. Más sobre esto en los próximos tutoriales.
