Menú con transparencia e imagen de fondo

Hoy les traigo unos muy llamativos menúes para usarlos en tu blog. Lo especial que tienen es que utilizan opacidad para el fondo lo que le otorga una apariencia más profesional. Para poder apreciar la opacidad de los botones, es imprescindible una imagen de fondo, o un textura o un patrón. Por lo que deberás empezar a buscar una buena imagen que además combine con la imagen de fondo de tu blog o los colores que utilizas.

Puedes ver las demostraciones de cada ejemplo en este blog de pruebas.

Debes pegar el código en un gadget HTML/Javascript, y luego ubicarlo debajo de la cabecera, no sé cómo se verán estos menúes en la sidebar ya que los diseñé de manera que sean horizontales.

Ejemplo 1

<div id="contenedor-menu">
<div id="menu2">
<ul>
<li><a href="#">seccion1</a></li>
<li><a href="#">seccion2</a></li>
<li><a href="#">seccion3</a></li>
<li><a href="#">seccion4</a></li>
<li><a href="#">seccion5</a></li>
</ul>
</div>
</div>
<style>
#contenedor-menu  {
background:url(http://2.bp.blogspot.com/-WfbmrcVlt1s/UDvIazXs-CI/AAAAAAAABPg/ulnMwz-0ZVw/s1600/fondo+ladrillos.jpg) bottom;
background-size:cover;
width:100%;
border-radius:3px;
margin:10px auto;
box-shadow:0 5px 15px rgba(0,0,0,.2);
height:80px;  /* Alto del contenedor */
overflow:hidden;
}
#menu {
height:40px;  /* Alto del menú */
float:right;
padding:25px 20px 0 0;
font-size:18px;
}
#menu ul {
float:right;
}
#menu ul li {
display:inline-block;
margin:0 10px 0 0;
padding:4px 6px;
background:rgba(255,255,255,.2);  /* Fondo del enlace */
cursor:pointer;
border-radius:4px;
-webkit-transition:.2s;
-moz-transition:.2s;
-o-transition:.2s;
-ms-transition:.2s;
}
#menu ul li:hover {
background:rgba(255, 170, 0, 0.3);  /* Fondo al pasar el cursor por encima */
-webkit-transform:scale(1.1);
}
#menu ul li a {
display:inline-block;
color:white;  /* Color del enlace */
}
</style>

Ejemplo 2

<div id="contenedor-menu">
<div id="menu2">
<ul>
<li><a href="#">seccion1</a></li>
<li><a href="#">seccion2</a></li>
<li><a href="#">seccion3</a></li>
<li><a href="#">seccion4</a></li>
<li><a href="#">seccion5</a></li>
</ul>
</div>
</div>
<style>
#contenedor-menu  {
background:url(http://1.bp.blogspot.com/-arSD_CecF0U/UDpV_NdaxJI/AAAAAAAABOQ/PT5PxNcPbw0/s1000/fondo-mar-piedras.jpg) bottom;
background-size:cover;
width:100%;
margin:10px auto;
box-shadow:0 5px 15px rgba(0,0,0,.2);
height:80px;  /* Alto del contenedor */
overflow:hidden;
position:relative;
}
#menu {
position:absolute;
display:block;
bottom:0;
right:15px;
}
#menu ul {
float:right;
}
#menu ul li {
display:inline-block;
margin:0 10px 0 0;
padding:5px 10px;
background:rgba(0,0,0,.2);  /* Fondo del enlace */
cursor:pointer;
border-radius:8px 8px 0 0;
cursor:pointer;
border-radius:4px;
-webkit-transition:.2s;
-moz-transition:.2s;
-o-transition:.2s;
-ms-transition:.2s;
}
#menu ul li:hover {
background:rgba(0, 173, 255, 0.41);  /* Fondo al pasar el cursor por encima */
}
#menu ul li a {
display:inline-block;
color:white;  /* Color del enlace */
}
</style>

Ejemplo 3

<div id="contenedor-menu">
<div id="menu2">
<ul>
<li><a href="#">seccion1</a></li>
<li><a href="#">seccion2</a></li>
<li><a href="#">seccion3</a></li>
<li><a href="#">seccion4</a></li>
<li><a href="#">seccion5</a></li>
</ul>
</div>
</div>
<style>
#contenedor-menu  {
background:url(http://3.bp.blogspot.com/-KRveoMNvDs0/UDpZSB0rzOI/AAAAAAAABOk/Bcmren6Xfm0/s1600/fondo-colorres.jpg) bottom;
background-size:cover;
width:100%;
border-radius:3px;
margin:10px auto;
box-shadow:0 5px 15px rgba(0,0,0,.2);
height:70px;  /* Alto del contenedor */
overflow:hidden;
}
#menu {
margin:0 0 0 10px;
}
#menu ul {
text-align:center;
}
#menu ul li {
display:inline-block;
height:70px;
margin:0 10px 0 0;
padding:10px 20px;
background:rgba(255, 247, 0, .5);  /* Fondo del enlace */
color:rgba(0,0,0,.8);
cursor:pointer;
-webkit-transition:.2s;
-moz-transition:.2s;
-o-transition:.2s;
-ms-transition:.2s;
}
#menu ul li:hover {
background:rgba(0, 173, 255, 0.41);  /* Fondo al pasar el cursor por encima */
}
#menu ul li a {
display:inline-block;
color:rgba(0,0,0,.8);  /* Color del enlace */
}
#menu15 ul li:hover a {
color:white;  /* Color del enlace al pasar el cursor por encima */
}
</style>

Debes reemplazar los nombres de las secciones y en los # coloca la URL correspondiente. Para agregar otra sección, coloca otra línea así antes de </ul>.

<li><a href="#">seccion</a></li>

También resalté las URL de las imágenes en rojo que puedes cambiar por la imagen que prefieras.
Si quieres cambiar los colores pero no sabes cómo obtenerlos en formato rgba, aquí encontré un práctico convertidor de códigos de colores. Sólo coloca en el cuadro el código hexadecimal del color que puedes encontrar aquí en el cuadrito blanco, presiona "Convert" y abajo aparecerá el código en rgba:

Para aplicar opacidad al color, reemplaza el último 1 por un valor decimal para variar la transparencia. Por ejemplo, transformé el color #FFAA00...

rgba(255,170,0,1)

lo cambio por

rgba(255,170,0,0.5)

Eso seguramente es todo. Adios :)