Describimos todo lo necesario para crear un theme WordPress a partir de un archivo de imagen
Todo para aprender a instalar, personalizar y gestionar la plataforma de foros mas popular del mercado
El menu de una web es uno de los elementos mas importantes. Debe ser bonito, accesible, liviano, ligeramente animado y facil de agregar y retirar links.
Aquí les dejamos una selección de 42 tutoriales para tener un menú fantástico, utilizando CSS2, CSS3 o Javascript. La mayoría de ellos ofrecen un demo para descargar y poder apreciarlos funcionando.
Utilizando unicamente CSS3 podemos lograr este menu a partir de una lista desordenada de enlaces. Esto incluye el uso de la técnica de sprites, en donde a partir de un archivo de imagen obtenemos todas las imagenes necesarias para el menú.
El tutorial nos ofrece el código completo para descargar, que incluye lo referente a imagenes en formato JPG y PSD, totalmente libres para ser utilizados en tus proyectos.
Artículo en español | TutorialZine [EN] | Demo
Elegante menú CSS3 con algunos trucos para que se vea bien en navegadores antiguos. Si el navegador no soporta CSS3, sólo se pierde el efecto de redondeado de bordes. El autor deja disponible una versión que utiliza una imagen para lograr el degradado, y otra que utiliza CSS3 (con una propiedad soportada por escasos navegadores).
WebDesignerWall Tutorial [EN] | Demo
En muy pocas líneas se puede lograr este menú que no lleva imágenes ni javascript alguno. Se vale de las propiedades gradient (linear, radial) y transition para lograr el efecto. Claro que este mismo menú puede crearse utilizando sprites y jQuery como pueden ver en este tutorial.
Llamativo menú animado que sólo se basa en CSS3 para sus efectos. Lamentablemente solo los navegadores webkit pueden ver todos los efectos en funcionamiento, los menos modernos pueden ver el menu pero con algunas discrepancias. El autor se inspiró en menues que utilizan jQuery para sus efectos y logró un gran trabajo que demuestra las aplicaciones de CSS3.
tobypitman tutorial [EN] | Demo
Todos los tutoriales de Codrops ofrecen para descargar un .zip con el ejercicio completo y funcionando.
Recientemente comentamos la existencia de este tutorial que nos permite colocar diversos tipos de contenido dentro de un menu, ideal para websites que necesitan guiar con mayor precisión a sus navegantes. Tutsplus ofrece descargar en un .zip todos los archivos de su ejercicio funcionando.
Con una hermosa animación cada item se despliega para dejarnos ver determinado contenido antes de ingresar a una nueva sección. Utiliza el plugin easing para lograr un efecto mas profesional.
Buildinternet tutorial [EN] | Demo
Menu basado en la creación de Ganesh con jQuery y CSS3.
insicdesign tutorial [EN] | Demo
Sólo utilizando CSS3 estos botones tienen hermosas animaciones que hacen uso de la propiedad transition. El autor ofrece un comprimido con el demo funcionando.
El original menu LavaLamp utiliza Mootools para su animación. Esta adaptación utiliza jQuery. Recientemente en SummArg realizamos un tutorial explicando cómo implementar este tipo de menues en WordPress.
Ganesh Tutorial [EN] | LavaLamp y WordPress [ES] | Demo
Dos opciones, una sólo con CSS3 (navegadores webkit) y otra con jQuery (todos los navegadores).
Con jQuery y su plugin easing se puede lograr un menu colapsable que tenga un efecto de rebote al abrir cada item. Está disponible todo el ejemplo en un archivo comprimido.
webdesignerdesk tutorial [EN] | Demo
alistapart tutorial [EN] y Demo
Los items de este menu se deslizan verticalmente y esto permite ubicar gran cantidad de elementos.
Designshack tutoria [EN] | Demo
Tutorial que nos muestra paso a paso cómo construir este elegante menú. También ofrecen para la descarga todos los archivos con el demo funcionando en un .zip.
kriesi.at tutorial [EN] | Demo
ndesign-studio tutorial [EN] | Demo
skyrocketlabs tutorial [EN] | Demo
Buildinternet tutorial [EN] | SummArg [ES]
jankoatwarpspeed tutorial [EN] | Demo
Buildinternet tutorial [EN] | Demo
Marcofolio tutorial [EN] | Demo
designlovr tutorial [EN] | Demo
Con un poco de javascript y CSS podemos hacer aparecer el menu en la posición top aún cuando hayamos hecho scroll hacia abajo en busca de otros contenidos. Interesante opción!
Aholatechsupport tutorial [EN] | Demo
berndmatzner tutorial [EN] y demos
Codrops tutorial y download [EN] | Demo
plugin para jQuery download y demo
sitepoint tutorial [EN] | Demo
Utilizando CSS y jQuery este menu se redimensiona de acuerdo al ancho que se le indique.
jeremymartin resources [EN] | Demo
gayadesign tutorial [EN] | Demo
Emprendedora incansable, fundadora de SummArg y de SiteFun.
15-12-10
Información Bitacoras.com…
Valora en Bitacoras.com: No hay resumen disponible para esta anotación…
29-3-12
Muy buenos tutoriales y recursos !.. sigan así, es muy buena la web