Menu Vertical con Buscador usando CSS con Transiciones y Zoom

Anterior mente había publicado como crear un menu basado solamente en Css, es esta ocasión he creado un menu Vertical al cual le he agregado un Buscador usando únicamente CSS.

Además usando la declaración hover le he agregado otros efectos de transición, Zoom y movimiento esperando que les guste.

Este menu es uno de muchos ejemplos de como agregando le un poco de estilo css a un objeto,
podemos darle un estilo distinto y agradable.


Para agregar Este Menu Vertical tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style>
#menuWrapper {
width:200px;/*ancho de menu*/
height:230px;/*alto de menu*/
padding-left:15px;
background:#F9F8F6;/*color de fondo de menu*/
box-shadow: 0 1px 5px #808080;
border-radius:3px;/*radio de menu*/
}

.menu {
margin-top: 5px;
width:100%;
float:left;
font-size:13px;/*tamaño de txto*/
font-weight:bold;
}

.menu li a{
display:block;
font-weight:bold;
line-height:35px;
margin:0px;
padding:0px 25px ;
text-align:left;
text-decoration:none;
border-radius: 0px 5px 0px 5px;
color:#000;/*color de texto*/
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}

.menu li a:hover{
font-size:14px;
padding:4px 0px 4px 50px;
background:#E51431;/*color de fondo de texto al pasar en cursor*/
color:#ffffff;
text-decoration:none;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-o-transition: all 0.6s;
}

.menu ul {
height:0px;
list-style:none;
margin:0;
margin-left: -15px;
padding:0;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 5px #808080;
}
#search {
width: 215px;
height:22px;
float: right;
text-align: center;
margin-top: 6px;
}

#search-box {
margin-top:-2px;
text-align:center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAACXBIWXMAAA7BAAAOwQG4kWvtAAAAIGNIUk0AAG2YAABzjgAA+swAAIXsAABsVwAA49UAADE1AAAX2tF76rUAAAEESURBVHjalNJLM0NBEIbhJzkhRxIEJRaoYuH//x8UG5uIRSIljsjFpk+ZipGiNz2X7ne+7umGb+viDH004qzCC0ZYyVgdeIKrWC/wjh2UcTbFHdabgAId3MR+iIfk1VncdwM42QQ0MUiSn7BM7id4TFR2coCjkDaStxmeo9zDHKAZzfr0u30k8T8Aa7TR2gLYDb/KAV7DH29JPo31OAeoaz9PAmsrcR1xi5yCeg4GuIz1POagiO9rJPEVbtN+FeHfImkvXi1Deg1rR1wLB1H20ga93peRsAzwChcx5umv3KMqMk1bhNR5Mrp1o3uJkj7Ghb/bNEruJeVX/wHUSmA/lA6/BgCJ0z3LSqvQSQAAAABJRU5ErkJggg==);
background-repeat:no-repeat;
background-position:98% 50%;
padding: 6px 6px 6px 8px;
width: 202px;
height:32px;
border: solid 1px #bcbbbb;
outline: none;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

</style>
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href='http://mdtutoriales.blogspot.com'>Inicio</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/mapa-de-sitio.html'>Mapa del Blogs</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/contacto.html'>Contacto</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/mapa-de-sitio.html'>Mapa del Blogs</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/contacto.html'>Contacto</a></li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</ul></div></div>

 Las partes que estan de Color puedes editar Tanto los Url como los nombres. tambien he dejado señalado la parte del codigo a editar para cualquier gusto.

Menú horizontal flotante que se expande al pasar en cursor

En estos días he estado jugando un poco con CSS3, y bueno se me ocurrió hacer un menú horizontal usando únicamente CSS3, esto para no hace que nuestro blogs se cargue mucho de script, a diferencia de muchos menús que ya has visto, (espero no allás visto ya uno igual) este menú estará flotando y oculto momentaneamente en nuestro blogs de tal manera que con solo pasar en cursor sobre la en botón "menú"se expande mostrando todas las opciones de nuestro menú, como si fuera una armónica (al menos yo así lo veo), y por si fuera poco le he agregado un ángulo de rotación de -30 grados para darle mas elegancia, claro que todo esto lo puedes editar puedes ver el ejemplo: que flota en tutoblogger o en la imagen de arriba.

Para agregar este menú a nuestro blogs ve a la Edición HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:

ul.menuflotante {
position: relative;
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font-family: "Arial";
font-size: 13pt;/* tamaño de letras*/
color: white;
}
ul.menuflotante li {
display: inline;
margin: 0;
padding: 0;
}
ul.menuflotante li a {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 5px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
padding: 5px;
position: absolute;
opacity: 0;
display: inline-block;
left: 50%;
margin-left: -50px;
text-decoration: none;
color: white;
background:#e51431;/* Color de botones*/
width:100px;/*ancho de botones */
height:70px;/* alto de botones*/
transition: all .8s ease;
}
ul.menuflotante li:last-of-type a {
opacity: 1;
}
ul.menuflotante a span {
position: relative;
top:40%;
padding: 5px;
text-align: center;
}
ul.menuflotante:hover li a {
color: white;
background:#e51431 ;
opacity: 1;
-webkit-transition:all .8s ease;
-o-transition:all .8s ease;
-moz-transition:all .8s ease;
-ms-transition:all .8s ease;
transition:all .8s ease;
}

ul.menuflotante:hover li:nth-of-type(1) a {
margin-left: -50px;/*posicion del boton 1*/
}
ul.menuflotante:hover li:nth-of-type(2) a {
margin-left: 50px;/*posicion del boton 2*/
}
ul.menuflotante:hover li:nth-of-type(3) a {
margin-left: 150px;/*posicion del boton 3*/
}
ul.menuflotante:hover li:nth-of-type(4) a {
margin-left: 250px;/* posicion del boton 4*/
}
ul.menuflotante:hover li:nth-of-type(5) a {
margin-left: 350px;/* posicion del boton 5*/
}
ul.menuflotante:hover li:last-of-type a {
opacity: 0;
top: -1000px;/* posicion del boton menu*/
}
ul.menuflotante a:hover {
transform: rotate(-30deg);/* angulo de rotacion*/
}
#flotador {
position:fixed;
bottom:100px;
left:60px;
}
/* menu flotante creado por tutoblogger*/

Ahora en Diseño,ve a Añadir Gadget,HTML/Javascript y pega lo siguiente:

<div id="flotador">
<ul class="menuflotante">
<li><a href="Url de Enlace">Inicio</a></li>
<li><a href="Url de Enlace">Mapa del blogs</a></li>
<li><a href="Url de Enlace">Contacto</a></li>
<li><a href="Url de Enlace">Enlazanos</a></li>
<li><a href="Url de Enlace">sobre nosotros</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div> 

guardas los cambios y listo. toma en cuanta que este menú se vera bien usando navegadores resientes, y claro no funciona con IE. Lo que se encuentra en rojo y azul pueden editar.

• Inicio
• Mapa del blogs
• Contacto
• Enlazanos
• sobre nosotros
• Menu