Pure CSS Menu es un generador de menús desplegables en CSS con el cual podremos generar menús desplegables en HTML y CSS y no tendremos la necesidad de utilizar JavaScript. No necesitamos ningún tipo de conocimientos para crear estos menús, es muy sencillo y no tendremos que complicarnos mucho. Tan sólo deberemos agregarle las pestañas al menú y posteriormente podremos seleccionar una plantilla de diseño para el menú, luego podremos modificar la plantilla seleccionada de una forma muy sencilla.
I
nsertar los menús generados en BloggerSeguramente esta sea la duda más grande que se planteen luego de generar los menús con Pure CSS Menu, por eso les explicaré en pocos pasos, como insertar los menús generados en Blogger.
[1] Primero debemos decsragar un archivo que contiene los estilos, imágenes y el HTML del menú generado. Para eso debemos registrarnos y posteriormente generar el menú. Luego de esto, haremos click en el botón Download:
[2] Descomprimiremos el archivo obtenido y veremos que hay un archivo llamadopurecssmenu.html y también hay una carpeta llamada images. Todas las imágenes que hay en esa carpeta, las tendremos que alojar en nuestro servidor de imágenes preferido, incluso podremos alojar las imágenes en Blogger. Luego de alojar todas las imágenes, necesitaremos guardar en algún lugar la url de cada una de ellas.
[3] Ahora comenzaremos a agregar los estilos del menú, para eso daremos click derecho sobre el archivo purecssmenu.html > Abrir con > Bloc de Notcas, copiaremos todo el código ubicado entre <style> y </style>, obtendremos algo como esto:
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#ffffff;
background-repeat:repeat;
border-color:#AAAAAA;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:160.65px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#ffffff;
border-width:0px;
border-color:#6655ff;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:normal 11px Verdana;
color: #444444;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#AAAAAA; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 11px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 11px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_anim_1.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:11px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_double_1o.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(./images/arr_double_1o.gif)}
ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(./images/arr_double_1.gif)}
Luego de copiar el código, lo pegaremos en un bloc de notas ya que le tendremos que hacer unos cambios antes de publicarlo en Blogger. Debemos sustituir la url de cada imagen (identificadas con rojo en mi ejemplo), por la url de cada imagen alojada en nuestro servidor. Es muy sencillo identificar dónde va cada imagen, te puedes guíar por el nombre. Yo marqué en rojo las imágenes de mi código, pero las imágenes del tuyo seguramente estén en otra ubicación y en distinto orden.
Luego de modificar la url de cada imagen, debemos ir a nuestro panel del blog y posteriormente nos dirigiremos a Diseño > Edición de HTML y vamos a pegar el código antes de ]]</b:skin>.
[3] Por último nos queda pegar el código HTML del menú en el blog, para eso iremos aDiseño > Elementos de la página y pegaremos en un gadget HTML/Javascript el código situado entre <!-- Start PureCSSMenu.com MENU --> y <!-- End PureCSSMenu.com MENU -->, en el caso de mi menú, el código es:
<ul>
<li><a href="#">PureCSSMenu.com</a></li>
<li><a href="#"><span>Product Info</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">What is New?</a></li>
<li><a href="#"><span>Menu Features</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Free Online Generator</a></li>
<li><a href="#">100% Pure CSS Menu</a></li>
<li><a href="#">No Javascript Required</a></li>
<li><a href="#">Multi Level Submenus</a></li>
<li><a href="#">Search-Engine Friendly</a></li>
<li><a href="#">Advanced Styling</a></li>
<li><a href="#">Horizontal & Vertical</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#"><span>How To Use</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">1. Select Template</a></li>
<li><a href="#">2. Customize Items</a></li>
<li><a href="#">3. Download Zip</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#"><span>Supported Browsers</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#"><span>Windows OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Internet Explorer</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Chrome</a></li>
<li><a href="#">Safari</a></li>
<li><a href="#">Mozilla</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">Netscape Navigator</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#"><span>MAC OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Firefox</a></li>
<li><a href="#">Safari</a></li>
<li><a href="#">Internet Explorer</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#"><span>Unix/Linux OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Firefox</a></li>
<li><a href="#">Konqueror</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#"><span>Templates</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Template 1</a></li>
<li><a href="#">Template 2</a></li>
<li><a href="#">Template 3</a></li>
<li><a href="#">Template 4</a></li>
<li><a href="#">Template 5</a></li>
<li><a href="#">Template 6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
Recomiendo eliminar el código que aparece luego del último </ul> (lo marqué en rojo), ya que es un enlace apuntando a Pure CSS Menu y no servirá de nada ya que es para promocionar a Pure CSS Menu.
Publicar un comentario