Esta entrada también se la debo a aNieto2k que con su post sobre efectos :hover en algunos elementos me inspiró para crear un menu algo extraño. Quiza no sea del todo útil, pero fue un experimento interesante y me gustaría compartirlo con vosotros. Aquí está el ejemplo, por si quieren ver de qué trata antes de leerse todo esto.
El propósito
El propósito de esta entrada es demostrar el poder que CSS tiene y que sinceramente no aprovechamos. Quiza sea algo difícil, pero creanme que vale la pena terminar y ver algo que funciona en casi cualquier ordenador sin importar su navegador, soporte de CSS, resolución, etc. Simplemente algo que FUNCIONA además de ser ÚTIL y ATRACTIVO. Esas tres palabras fueron las que se quedaron en mi mente mientras intentaba crear este menú. Al principio pensé que no serviría en Internet Explorer (pensaba usar pseudo-clases y algunas otras cosillas que IE no soporta bien); pero al final decidí crear algo más amigable al usuario y, sobretodo, más usable.
La cosa ha sido probada en IE6.0, IE7.0, Opera9.10 y Firefox2.0.0.3. En todos funciona como se esperaba. Si pueden probarlo en otros navegadores se los agradeceré. Y ahora si; pasemos al tutorial que empieza en la siguiente página.
Las imagenes
Y bueno, lo primero es tener las imagenes listas. Estas son las imagenes que utilizaré para este tutorial:
Las imagenes de los iconos miden 45px de ancho por 90px de alto. El fondo del menu mide 220px de alto y ancho. Por cierto, los iconos son parte del proyecto Tango.
Firefox 1.5.0.11 en XP también funciona
OMG, me encanta. ;_;
En Safari 2.0.4 y Firefox 2.0.0.2 sobre mac funciona perfecto.
Un saludo!
Firefox 2.0.0.3 en winXP SP2, funciona sin problemas
IE 7.0 en winXP SP2, funciona sin problemas
Realmente muy bueno!
Tengo las mismas herramientas que aerovoyager, así que me ahorro el decir que funciona...
Mis felicitaciones por un muy buen diseño, que (como decís arriba) además de ser atractivo es útil y funcional...
Saludos!
esto funciona en linux
Impresionante. Muy buen trabajo. Funciona muy bien en los navegadores que lo probé (Safari, IE6 winXP, Firefox).
Limpio y semántico tu código. Excelente demo =)
Muy bueno el menu.
Muy bueno este menu circular!! Lo veo en Opera 9.02 en Win XP perfecto, lo unico que cambiaria si se pudiera seria lo extenso que es, uf. Felicitaciones
Impresionante. Es increible ver las cosas que se pueden hacer con algo tan "simple" como CSS
Buenas Hermano,
Muy bueno este menu. Gracias!!!
MENU CIRCULAR EM CSS...
Para provar todo o poder das CSS, dêem uma olhada nesse menu circular, totalmente desenvolvido com HTML e CSS, e nada de JavaScript.
......
Funciona perfectamente en FF 2.0.0.1 bajo Kubuntu Linux y en Konqueror 3.5.2 ( que viene defecto en Kubuntu ).
Una aplicacion que se me ocurre, click en un objeto y que nos aparezca este menu para seleccionar la accion deseada con el mismo (Comprar, Ver mas Datos, Recomendar a un Amigo, etc). Claro que para esto se complementaria posicionandolo exactamente donde este el mouse en ese momento.
Excelente trabajo.
Bien en Opera 9 sobre WinXP SP2
excelente, andaba buscando algo parecido
¡Magnífico! Algo 'sencillo' con una aspecto espectacular. Enhorabuena.
Sensacional menu... sin duda algo espectacular.
Excelênte!!! está funcionando bem.
Meus parabêns.
"O Poder dos CSS"
[...] Menu Circular (CSS) Cada dia o CSS vai me assustando, não tem muito oque falar, apenas clique e mate a curiosidade. [...]
Muy bueno, funciono haciéndolo tal cual lo comentas.
Intente cambiar el tamaño a 440px, y cambie los iconos por otros para mí más útiles, pero me sucedió una cosa extraña, desaparece a la vista la imagen circular de fondo y las imágenes de los iconos, mueves el ratón, por la pantalla y cuando encuentra donde supuestamente esta el icono aparece el tag del contenido, me podías indicar donde puede estar el fallo, gracias
José Manuel El error podría estar en el nombre de los archivos, en algún cambio en las propiedades de los elementos (principalmente en el position), en el tamaño de las imagenes o en las posiciones absolutas de los elementos. Es un código algo delicado y la menor alteración lo afecta todo. Te recomiendo vuelvas a hacerlo, paso por paso, y revisando el resultado final después de cada edición. Así podrás detectar facilmente el cambio que provoca el error.
[...] Circular Menu with CSS [...]
[...] O site metalize.liveonstyle.com publicou um interessante tutorial sobre como criar um menu em forma de circulo utilizando CSS. Veja um exemplo do menu funcionando aqui. [...]
[...] Yukarda gördüğünüz tarz menüleri belki birçok sitede görmüşsünüzdür ancak genelde Flash teknolojisi kullanılarak yapılmışlardır.Ancak bu gördüğünüz menü CSS tekniğiyle oluşturulmuş bir menü.Menünün yapımı bu adresde uzun uzun anlatılmış.Ancak sanırım İspanyolca bir anlatım olduğu için sadece kod yapısını inceleyebilirsiniz.(Belki ispanyolca biliyorsunuzdur.)Yada çeviri sitelerine başvurabilirsiniz… [...]
Can I get the English version help and Demo Page URL please...
Sai: I'm very sorry, but there is no translated version of this tutorial. Yet, I believe the HTML and CSS speaks for themselves. You might as well be able to do something with just the example page. Best of lucks!
Muy lindo menu y muy buena utilización del css, felicitaciones
¡excelente! De verdad muy bueno.
[...] bugune kadar gormus oldugum en yaratici css menulerden birisini. nasil yapildigini ogrenmek icin : [ 1 ] [ 2 ] [ 3 ]. nasil calistigini gormek icinde buraya goz atabilirsiniz.not : belirtmeliyimki yapilan aciklamalarin hepsi ispanyolca. [...]
[...] metal.ize » Blog Archive » Menu circular en CSS (tags: css menu webdesign tutorial web javascript tool howto inspiration) [...]
Maybe you should mention, that the icons are part of the tango project oO?
Holy mother of god... thanks for remembering that. I was pretty sure that the example page included a link... damn. Well, I've already added a link on the first page of this tutorial...
I shall apologize to the Tango Icon Project development team. I seriously thought the link was there. Thanks for an awesome set of icons, by the way.
[...] Circular Menu with CSS This article shows how a beautiful circular navigation menu is created. In Spanish with Source code and an example. [...]
Muito bom mesmo essa dica! Parabéns.
Grato.
muy interesante para hacer un menu circular
Muy bueno para salir de lo comun.....Felicitaciones
Interestante, el artículo. Saludos
i'am really impressed!!
Excelente trabajo, me funciona re bien. Estoy en proceso de agregar íconos y cambiar las imágenes para adapatarlo a mi trabajo... FELICIDADES NUEVAMENTE.
Ola.. Apliquei este menu circular en mi site. http://www.luciane.pro.br/
Gracias por tu ejemplo e Saludos...
Hola acabo de implementarlo en mi página para los distintos boliches xD
http://www.confizona.com.ar/menu/fotos.php
La verdad que hace mucho que queria hacerlo pero recien ahora le dedique a full.
La verdad siempre leo tus articulos
saludos!
Puedo hacer un menu animado solo con ccs
para evitar usar javascript ya que varos usuarios no lo tienen activado ?
Esto era lo que estava buscando para mi web
hola esta padre el menu pero sabes tengo un problema con firefox 2.0.0.7 no me aparese la imagen de que esta selecionado no se si me puedas ayudar gracias
quero fazer um menu estilo icone do desktop clicavel e arrastavel como o da area de trabalho do widowns, é possível?
Alguem pode me ajudar???
[...] Menu en CSS: Menu circular en CSS, muy interesante. [...]
Fantastico
Podrias enviar el codigo en un archivo zip?
Gracias
good work! i am impressed!
OK.. ELEGANTE!
Muy bueno! Gracias!
hi
i found this bug on ur site
my browser is Firefox V:Mozilla/5.0 (Windows; U; Windows NT 5.1; ar; rv:1.8.1.14) Gecko/2008040413 Firefox/2.0.0.14
and i have the "web developer" add ons
when i disable the minimum font size from disable menu ...ur site be a very mess and unreadable ..by the way ur menu dosent work on my browser too.
thnx