Generador de menús desplegables sin javascript

Jebú me comentaba sobre Pure CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko Jovanovic.

Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.

Cómo instalar un menú (en Blogger)

El fichero “purecssmenu-com.zip” contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:

1. Abrir el archivo purecssmenu.html. Éste se abre en una nueva pestaña de tu navegador.

2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción “Ver código fuente de la página“. Esos son los correspondientes códigos a ser pegados en la plantilla.

3. El código CSS comprendido entre las etiquetas <style> y </style> (excluidas éstas), debe ser pegado en la Edición de HTML de la plantilla, ]]></b:skin>. Guardar los cambios.

4. El código HTML comprendido entre los comentarios <!– Start PureCSSMenu.com MENU –> y <!– End PureCSSMenu.com MENU –> debe ser copiado antes o después del cierre del div ‘header-wrapper‘ (en la plantilla Mínima de Blogger), reemplazando las dobles comillas por comillas simples (‘). Una manera más simple de hacerlo, es creando un nuevo gadget de HTML/Javascript desde Diseño /Elementos de la página, en la sección llamada “crosscol-wrapper” que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.

5. Como últimos pasos, queda hospedar en tu hosting las imágenes contenidas en la carpeta images y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de pruebas, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:

#crosscol-wrapper { background:#E62E6B; width: 100%;}

Fuente: chicablogger.com

2 comentarios:

Prof. de Música dijo...

No funciona, nada, que puedo hacer he intentado todo, pero nunca se ve sobre la plantilla en IE, en firefox si se ve sobre la plantilla, pero tiene un tamaño muy exagerado, aulafunse.blogspot.com quien puede ayudarme, quizas es la plantilla que no admite barra de menu nosé...

Prof. de Música dijo...

lo ultimo sobre las comillas simples ' se refiere a que despues de copiar el codigo html en el gadget html/java... en diceño, todas las "del codigo html deben ser remplasadas???, me refiero al codigo donde se crea la listas anidadas...

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika