 Este menú en diapositiva, cuya explicación (en inglés) para su creación, encontramos en tympanus.net, tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos. 1.- Vamos a Editar HTML:  Para ponerlo en nuestro blog:
2.- Para obtener la librería jQuery localizamos la etiqueta </head>, poníéndola dentro del rectángulo de búsqueda (Search), y pegamos, entes de la misma, el siguiente código: 3.- Para animar el efecto agregamos el script correspondiente pegando, después del código anterior, el siguiente:
-85px corresponde a la parte de los elementos del menú que no se oculta. Si queremos ocultar más o menos, aumentamos o disminuimos esa cifra. Los números 500 corresponden a la velocidad del efecto slide que, en el caso del DEMO, es de 500 milisegundos. Podemos cambiarlos si queremos que la velocidad sea mas lenta o más rápida. 4.- Para darle estilo al menú localizamos la etiqueta ]]></b:skin>; y, antes de la misma, pegamos el siguiente código:
Las URLs resaltadas en rojo corresponden a las imágenes utilizadas en la DEMO. Las cambiamos por las URLs de nuestras imágenes. 6.- Finalmente, para que funcionen el CSS y el Script, Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript, y en este gadget pegamos el siguiente código HTML:
Reemplazamos todos los # por las URLs de las páginas enlazadas, y las descripción por una descripción resumida de las mismas, que se verá al poner el cursor sobre dada elemento.
|
Mostrando entradas con la etiqueta menu. Mostrar todas las entradas
Mostrando entradas con la etiqueta menu. Mostrar todas las entradas
27.3.13
Menú lateral con CSS y Jquery para Blogger
13.6.12
Menú horizontal con CSS3, envolvente
Este menú se presenta a la vista como si estuviera envolviendo el blog. Queda bien en blogs que tienen bien definido el borde del Outer Wrapper (envoltura principal del blog).  1.- Vamos a Editar HTML:
2.- Localizamos, poniéndola dentro del rectángulo de busqueda (Search), la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código:
En las líneas con comentarios (resaltados en rojo) podemos modificar los conceptos a los que se refieren dichos comentarios: número de pixeles (xxpx) y código del color (#xxxxxx). Los comentarios los podemos eliminar, si queremos; no afectan en nada. 3.- Localizamos el siguiente código:
...y debajo del mismo pegamos éste:
4.- Reemplazamos # por las URLs de los enlaces, y Pestaña x por los textos que servirán de enlaces. El menú de este tutorial está hecho para seis pestañas, pero podemos aumentar o disminuír el número, en el segundo código. Quedará ubicado debajo de la cabecera del blog, que es el sitio más apropiado.
|
11.6.12
Menú vertical con CSS y jquery, efecto acordeón
Cómo poner en nuestro blog un menú vertical con CSS y jquery, efecto acordeón: 1.- Vamos a Editar HTML:
2.- Para obtener el script Jquery y la librería Jquery localizamos la etiqueta </head>, poiéndola dentro del rectángulo de búsqueda (Search) y, antes de la misma, pegamos el siguiente código:
3.- Para agregarle la funcionalidad al menú, con Jquery, pegamos, antes de la etiqueta </body>, el siguiente código:
4.- Para darle estilo al menú pegamos, antes de la etiqueta
En el anterior código CSS podemos hacer las modificaciones a los colores y caracteres del menú, para adaptarlo al diseño de nuestro blog. El color de los enlaces no los podemos modificar en el menú, ya que nos son dados por defecto en la plantilla; para modificarlo debemos acudir al Diseñador de plantillas. 5.- Guardamos plantilla. 6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript; quedará bien en la barra lateral (Sidebar). En este gadget pegamos el siguiente código:
En todos los El anterior código lo podemos modificar agregando o quitando menús y submenús, según convenga a nuestro blog. En los blogs diseñados con plantillas nuevas (Diseñador de PLantillas) esta clase de menús pueden presentar problemas para su funcionamiento, ya que esas plantillas tienen estilos predefinidos. Si tenemos ese problema sigamos el siguiente procedimiento: 1.- Vamos a Editar HTML:
2.- Localizamos, poniendo dentro del rectángulo de búsqueda (Search) algunos caracteres de la misma, la siguiente línea:
...y eliminamos la parte resaltada; si aparece en otras líneas también la eliminamos. 3.- Localizamos la siguiente sección:
...que puede variar dependiendo de la plantilla, y eliminamos todo su contenido, excepto el encabezado:
4.- El contenido que eliminamos en la anterior sección lo reemplazamos por éste:
5.- Vista previa y Guardar plantilla.
|
Menú horizontal desplegable con Ajax, actualizado
 Éste es un menú de múltiples niveles. Vamos a crear dos: Uno con cinco menús principales y otro con nueve menús principales. 1.- Vamos a Editar HTML:
2.- Localizamos, poniéndola dentro del rectángulo de búsqueda (Search), la etiqueta </head> y, antes de la misma, pegamos el siguiente código:
Con esto obtendremos la librería Jquery. 3.- Para usar la librería Jquery con Ajax y lograr que se muestren los submenús, pegamos, después del código anterior, el siguiente:
4.- Para darle estilo al menú, pegamos, antes de la etiqueta ]]></b:skin>, el siquiente código CSS:
En el anterior código resaltamos:
5.- Vista previa y Guardar plantilla Los códigos agregados hasta aquí aplican para cualquiera de los dos menús 6.- Vamos a Diseño ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera). En este gadget pegamos el siguiente código:
Resaltados en los dos códigos HTML anteriores:
Siguiendo estrictamente la estructura del anidamiento podemos agregar todos los submenús y subsubmenús que queramos. Podemos agregar más menús principales, pero teniendo en cuenta el ancho de la barra del menú (en nuestro caso es de 718px) Plantillas nuevas En los blogs diseñados con plantillas nuevas (Diseñador de PLantillas) esta clase de menús no funcionan correctamente, ya que esas plantillas tienen estilos predefinidos que impiden su funcionamiento. Podemos solucionar ese problema así: 1.- Vamos a Editar HTML:
2.- Localizamos, poniendo dentro del rectángulo de búsqueda (Search) algunos caracteres de la misma, la siguiente línea:
...y eliminamos la parte resaltada; si aparece en otras líneas también la eliminamos. 3.- Localizamos la siguiente sección:
...que puede variar dependiendo de la plantilla, y eliminamos todo su contenido, excepto el encabezado:
4.- El contenido que eliminamos en la anterior sección lo reemplazamos por éste:
5.- Vista previa y Guardar plantilla.
|
6.2.11
Menú de Navegación Lateral con Efecto Slide
| Este menú en diapositiva, tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos.
Para ponerlo en nuestro blog:1.- Vamos a Editar HTML:
2.- Para obtener la librería jQuery localizamos la etiqueta </head> y pegamos, entes de la misma, el siguiente código:
3.- Para animar el efecto agregamos el script correspondiente pegando, después del código anterior, el siguiente:
-85px corresponde a la parte de los elementos del menú que no se oculta. Si queremos ocultar más o menos, aumentamos o disminuimos esa cifra. Los números 500 corresponden a la velocidad del efecto slide que, en el caso del DEMO, es de 500 milisegundos. Podemos cambiarlos si queremos que la velocidad sea mas lenta o más rápida. 4.- Para darle estilo al menú localizamos la etiqueta ]]></b:skin>; y, antes de la misma, pegamos el siguiente código:
Las URLs resaltadas en rojo corresponden a las imágenes utilizadas en la DEMO. Las cambiamos por las URLs de nuestras imágenes. 6.- Finalmente, para que funcionen el CSS y el Script, Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript, y en este gadget pegamos el siguiente código HTML:
Reemplazamos todos los # por las URLs de las páginas enlazadas, y las descripción por una descripción resumida de las mismas, que se verá al poner el cursor sobre dada elemento.
|
31.1.11
Menú horizontal dinámico, con submenús
 Vamos a crear un menú horizontal dinámico, con submenús. El resultado será una barra navegable cuyos elementos cambian de color al poner el cursor sobre los mismos. Para ponerlo en nuestro blog: 1.- Vamos a Editar HTML:
2.- Localizamos la etiqueta ]]></b:skin>, poniéndola dentro del rectángulo de búsqueda (Search), e inmediatamente antes pegamos el siguiente código CSS:
En este código podemos hacer cambios en los colores, para ajustar el menú al diseño de nuestro blog, teniendo en cuenta los resaltados, así:
text-transform: uppercase; transforma todas las letras del menú en mayúsculas. Si queremos evitar eso, la eliminamos. 3.- Vista previa y Guardar plantilla 4.- Vamos a:
En el gadget añadido pegamos el siguiente código:
En el anterior código reemplazamos:
Nota Se han recibido algunas inquietudes en el sentido de que el menú no se visualiza en su totalidad porque se despliega por detrás del cuerpo de las entradas del blog. Para quienes tengan este problema la solución es la siguiente:
 Con esta modificación vamos a tener una pequeña limitación: El menú no podrá ser más ancho que el cuerpo de las entradas del blog.
|
19.1.11
Menú horizontal desplegable con Ajax
| Este tutorial fue actualizado: Ir a la actualizacion. Éste es un menú de múltiples niveles. Vamos a crear dos: Uno con cinco menús principales y otro con nueve menús principales. 1.- Vamos a Edición de HTML:  2.- Para obtener la librería Jquery localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código:
3.- Para usar la librería Jquery con Ajax y lograr que se muestren los submenús, pegamos, después del código anterior, el siguiente:
4.- Para darle estilo al menú, pegamos, antes de la etiqueta ]]></b:skin>, el siquiente código CSS:
En el anterior código resaltamos:
5.- Vista previa y Guardar plantilla Los códigos agregados hasta aquí aplican para cualquiera de los dos menús 6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera). En este gadget pegamos el siguiente código:
Resaltados en los dos códigos HTML anteriores:
Siguiendo estrictamente la estructura del anidamiento podemos agregar todos los submenús y subsubmenús que queramos. Podemos agregar más menús principales, pero teniendo en cuenta el ancho de la barra del menú (en nuestro caso es de 718px)
|
Suscribirse a:
Entradas
(
Atom
)
