Barra de menu con CSS e imagen de fondo

Pués este metodo te permite tener una barra de menu de tamaño variable, permitiendo editar al gusto y que sea esteticamente “fino”

2

Esta entrada es una continuación de la anterior de CSS, por lo que las mismas herramientas son usadas.

Crear la barra de menu

Lo que tenemso que hacer, es un diseño de la barra de menu, este se aplicara la misma tecnica que el anterior, una imagene para contener el texto, y una de cada extremo.

Bueno mi imagen quedo asi:

Plantilla de imagen

Si lo desean, creen separadores y textos de prueba para obtener lo deseado:

2

Seccionando la imagen:

Hay que dividir nuestra imagen en 3 partes

  • El marco izquierdo
  • El boton de contenido (se sugiere una anchura constante para evitar problemas)
  • Y el marco derecho

De tal manera que nos queda:


derenlaceizq

El estilo

Ahora el CSS, necesitaremos 6 nuevas clases:

  1. El contenedor del menu
  2. La imagen derecha
  3. La imagen izquierda
  4. El fondo de imagen
  5. Color de los enlaces
  6. Listado de enlaces

Este es el ejemplo del CSS, asumiendo que las imagenes miden lo mismo que las del ejemplo.

#contenido {
              width: 612px;
              background-color: #fff;              

}

#menu {
	position:relative;
	width: 612px;
	margin: 0px auto;
	text-align: center;
	line-height: normal;
}
.menuder {
        float: left;
        height: 62px;
        width: 13px;
        background: url(der.jpg) no-repeat;
}
.menuizq {
        float: left;

        height: 62px;
        width: 21px;
        background: url(izq.jpg) no-repeat;
}

#enlace {
	list-style: none;
	margin: 0 0px;
	padding: 0 0 0 0px;
	float: left;
	height: 62px;

}

#enlace li {
        float: left;
        width: 104px;
	height: 62px;
	background: url(enlace.jpg) no-repeat;
	margin: 0 0px;
        padding: 18px 0 0 0;

}
#enlace li a
{
        color: #838383;
        font-weight: bold;
        text-decoration: none;
}

#izq {
              float: left;
              background-color: #fff;
              width: 400px;
}
#derecha {

              float: right;
              width: 212px;
}

.top {
              height: 47px;
              background: url(top.jpg) no-repeat;

}

.contenido {
              background: url(contenido.jpg) repeat-y;
              padding: 5px 5px 5px 5px;
}

.contenido p {
              margin: 2px 29px 2px 29px;
}
.bottom {
              background: url(bottom.jpg) no-repeat;
              height: 43px;
}

Son las lineas de la 7 a la 54 lo agregado para el menu

El HTML

Casi el final, lo unico que tenemos que hacer es agregar el contenedor del menu, la imagen derecha, los enlaces y la imagen izquierda!.

<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<title> Barra lateral y menu</title>
</head>
<body>

 <div id="contenido">
   <div id="menu">
       <div class="menuder"></div>
              		<ul id="enlace">
                      <li><a href="#">Un enlace</a></li>
                      <li><a href="#">Un enlace</a></li>
                      <li><a href="#">Un enlace</a></li>
                      <li><a href="#">Un enlace</a></li>
                      <li><a href="#">Un enlace</a></li>
                         </ul>
        <div class="menuizq"></div>
   </div>
                 <div id="derecha">
                          <div class="top"></div>
                          <div class="contenido">
                                     <p>
                                                <a href="#">Un enlace</a><br />
                                                <a href="#">Un enlace</a><br />
                                                <a href="#">Un enlace</a><br />
                                                <a href="#">Un enlace</a><br />
                                                <a href="#">Un enlace</a><br />
                                                 Un peque&ntilde;o texto acerca de nada
                                     </p>
                          </div>
                          <div class="bottom"></div>
                 </div>
                 <div id="izq">
                                 <p>
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentacion de un documento estructurado escrito en HTML o XML (y por extension en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacion de las hojas de estilo que serviran de estandar para los agentes de usuario o navegadores.<br />

La idea que se encuentra detras del desarrollo de CSS es separar la estructura de un documento de su presentacion.<br />

                                 </p>
                 </div>

  </div>

</body>
</html>

Son las lineas de la 9 a la 19 lo agregado para el menu

Recuerden comentar cualquier duda o sugerencia ;)

Aqui esta el ejemplo

Versión para descargar

    Posts Relacionados

    2 Comentarios en “Barra de menu con CSS e imagen de fondo”

    1. [...] tutorial se encuentra aquí. Que lo [...]

      WordPress MU WordPress MU
    2. avatar
      pau linus 24 febrero 2010 at 4:38 am #

      muy buena informacion un saludo

      Usando Firefox 3.6 Firefox 3.6 en Windows 7 Windows 7

    Deja un comentario

    Tienes que estar logueado para escribir un comentario.