100 tutoriales para 100 tipos distintos de menús | Oloblogger Esto más que un post es una simple referencia, pero me ha parecido tan completo y práctico este artículo de Noupe , que creo que merece la p...

25 de agosto de 2011

100 tutoriales para 100 tipos distintos de menús

Esto más que un post es una simple referencia, pero me ha parecido tan completo y práctico este artículo de Noupe, que creo que merece la pena que lo conozcáis al tiempo que lo dejo grabado en mi bitácora para mi propia memoria.

Se trata de una genial recopilación con 100 tipos de menús distintos de la que destaco que incluye siempre un tutorial sobre cómo construirlos y, en la mayoría de casos, una demo para comprobar previamente cómo van a funcionar una vez instalados.


Hay incluso algunos que anteriormente ya vimos sólo como fuente de inspiración, pero que en esta ocasión aparecen también explicados. Varios funcionan con resultados espectaculares gracias a jQuery u otras librerías, pero muchos de los que están hechos simplemente con CSS tampoco le van a la zaga.

Los agradecimientos, en su caso, deben ir para @DanielUlczyk (Diseniorweb y Ulczyk), que nos dió a conocer esta entrada mediante un tweet.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

15 comentarios :

  1. Este post es sin duda muy interesante, pero mi verdadero motivo de escribirte aquí es que espero recibir tu ayuda. He leído muchísimas de tus entradas y bueno, como muchísima gente ya te habrá dicho, felicidades por tan buen espacio. Soy un principiante en esto de los blogs (me hice el mío hace dos días) y he estado haciendo pequeñas chapucillas para intentar personalizarlo más.

    Pero algo que me trae de cabeza es la dichosa sombra que se ve detrás de mis imágenes laterales, widgets, etcetera..
    aquí te dejo mi dirección para que lo compruebes tú mismo:
    casadelocuras.blogspot.com

    Ya lo he intentado por este método:
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

    es decir, cambiando los valores, pero nada, me da error y no me deja guardar plantilla, si lo hago me sale la pestaña en blanco y un "about:blank"

    Por eso, por favor, espero tu ayuda urgente!! Felicitaciones una vez más por tan estupendo blog, es de gran ayuda :) Saludos!

    ResponderEliminar
  2. Hola Amigo que buen post! oye a mi super gusto el rocking and Rolling Rounded Menu, y la verdad no tengo los conocimientos necesarios para instalarlo, talvez algun dia puedas publicar algo para poderlo instalar.. aca el link http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/ ... la verdad ya lo habia intentado instalar hace tiempo pero sin un buen resultado.. espero tu puedas lograrlo.. saludos!

    ResponderEliminar
  3. wawww me cae de perlas preciso iba a buscar algo de eso, lo veo y te cuento como me fue, como siempre grande oloman.

    ResponderEliminar
  4. Otro dato! He estado informándome y al parecer desde un sistema windows las imágenes se ven correctamente, sin sombra, pero no es así desde mi mac.
    No sé si esto es cierto y siendo así si habría que actuar de otra forma con los códigos. Gracias por adelantado por tu ayuda, espero con ansia la respuesta!

    ResponderEliminar
  5. Hola Oloman!
    Me encontre el otro dia esta pagina -->http://www.keshasparty.com/es
    Me encanto ese efecto luces de neon que tienen todos los post y la sidebar (en el contorno)
    Como es una pagina web, no se si se podra poner de alguna forma en la plantilla blogger.
    Muchisimas gracias adelantadas!

    ResponderEliminar
  6. A., busca esto...

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    padding: 5px;
    background: white;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    }

    ...y cambia los valores a cero. Así:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    padding: 5px;
    background: white;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
    -goog-ms-box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .5);
    }

    También podrías borrar esas cuatro últimas líneas, pero de esta manera podrás volver a poner sombras fácilmente si alguna vez te arrepientes.

    ResponderEliminar
  7. Está chulo ese tipo de menú Rob X. No lo conocía. Supongo que habrás tenido en cuenta que hay que tener la librería jQuery para que funcione. Ese es el único problema que se me ocurre que puedas tener, porque en la página que me pasaste lo explican con detalle.

    Dreamare hay tantos que lo difícil es elegir uno solo. Suerte.

    Laura, eso seguro que se hace con la propiedad BOX-SHADOW, pero ahora mismo no sabría decirte con precisión con qué valores concretos. Puedes hacer pruebas con esto: http://css3generator.com/

    ResponderEliminar
  8. Lo he probado cambiando y borrando, pero nada! No me deja guardar y me sale error.
    Muchas gracias igualmente, encontré una solución temporal que es subir gadgets de tipo html/javascript, y así no me sale la imagen recuadrada y sombreada :)

    Saludos!

    ResponderEliminar
  9. Muchas gracias por el aporte, me encantan los menús estilo "collage" :)

    ResponderEliminar
  10. Te felicito por tus fotografías, son muy buenas e interesantes. Yo estoy haciendo un blog también pero aun me queda mucho que aprender.
    Si quieres puedes visitar mi blog para darme tu opinión y mejorar en lo que pueda.
    Todo fotografía: www.pereprime1978.blogspot.com
    un saludo.

    ResponderEliminar
  11. A pesar de tomarme un tiempo sin escribir en mi blog sigo leyendote.
    Apenas pueda me adentro en este nuevo tema que posteaste.
    Gracias!

    ResponderEliminar
  12. pues no veo los tutoriales cual es el link?

    ResponderEliminar
  13. Va de ciència a un servidor también :)

    Lo veo Pere Primé, pero prometo NO darte mi opinión. No acostumbro a hacerlo ;)

    Sin prisa,Joan, sin prisa.

    Andoni, en la palabra con el nombre del sitio (Noupe), al principio del post.

    ResponderEliminar
  14. Saludos Oloman... He descubierto este sitio hace muy poco y la verdad que me ha encantado, estoy aprendiendo mucho. El caso que mirando los menús, me ocurre lo mismo que Rob X con ROCKING AND ROLLING ROUNDED MENU WITH JQUERY , No puedo hacer que funciones correctamente, y además despues de intentar colocar las librerias JQuery se me pisa con otros Gadget sin lograr un buen resultado... En mi caso, hace muy poco que estoy con esto de un blog y se puede decir q soy "de los mas torpes".... ¿Podrías por favor decirme como poder poner Este menú en Blogger? Te agradezco mucho la ayuda y felicitaciones por este sitio.

    ResponderEliminar
    Respuestas
    1. Como puedes imaginar no los conozco todos, pero ese me ha gustado también a mí. En cuanto tenga un rato a ver si puedo traducir, interpretar y hacer que funcione en Blogger el contenido de ese artículo.

      Eliminar