Menú lateral avanzado IV

Parte inferior del menú

bottom significa inferior. Por lo cual si ponemos la imagen de la parte inferior con esta palabra, se expandira automáticamente cuando pongamos algo en el menú. Claro que también tenemos que poner de background-image la imagen inferior. En resumen, tenemos que escribir esto:

#menulateral{background-color:#0033FF ; width: 150px ; float:left; text-align:left ; background-image: url(http://comoconstruirtuweb.blogcindario.com/ficheros/menu-parte-inferior-2.JPG); background-position: bottom }
#menulateral2 h1 {color:#000000; text-decoration:none ; font-size:12px ; background-image: url(http://comoconstruirtuweb.blogcindario.com/ficheros/menu-curva-superior-2.JPG) }
#menulateral li{text-decoration:none}

 

<div id="menulateral">
<h1>men&uacute; lateral</h1>
<ul>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
</ul>
</div>


Y en html:

Y ya terminado el menú saldría:








Al fin terminamos el menú. A continuación, haremos una barra superior.

Tags: menú lateral, css, html, div, <div>