¿Estas absolutamente seguro de que un piso no puede ser un techo?
« Notepad2
Código resaltado »

Menu circular en CSS

Jueves 22 de Marzo del 2007 Compártelo

Páginas: 1 2 3

Creando el HTML

Y como siempre, empezaremos creando el esqueleto de nuestro HTML.

TEXTO PLANO
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  5. <title>Menu extraño</title>
  6. <meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
  7. </head>
  8.  
  10.  
  11.  
  12. </body>
  13. </html>

Ahora tenemos que crear nuestro menu. Si recordamos los contenidos semánticos, sabremos que un menu no es más que una lista de links. así que eso crearemos; una lista de links. Por lo tanto, nuestro menu debe ser una lista.

TEXTO PLANO
HTML:
  1. <div id="menwrap">
  2.     <ul id="menu">
  3.         <li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
  4.         <li><a href="#" id="tutos" class="menitem"><strong>Tutoriales</strong> <span>Tutoriales de CSS y HTML.</span></a></li>
  5.         <li><a href="#" id="files" class="menitem"><strong>Archivos</strong> <span>Archivos para descargar.</span></a></li>
  6.         <li><a href="#" id="search" class="menitem"><strong>Buscar</strong> <span>Formulario para buscar.</span></a></li>
  7.         <li><a href="#" id="mail" class="menactive"><strong>Mail</strong> <span>Envíanos un mail.</span></a></li>
  8.         <li><a href="#" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
  9.         <li><a href="#" id="write" class="menitem"><strong>Escribir</strong> <span>Escribir una entrada.</span></a></li>
  10.         <li><a href="#" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
  11.     </ul>
  12.     </div>

Como pueden ver, nuestra lista contiene 3 elementos en cada <li>: un anchor (<a>), un <strong> y un <span>. El anchor contiene al <strong> y al <span>; el <strong> contiene el título de la sección y el <span> contiene una descripción breve de la sección. También he agregado un ID y una clase a cada anchor para poder identificar de qué sección del menu se trata y si está activa(menactive) o no(menitem).

Ahora vamos a agregar un pequeño código que nos creará el header o título de la sección que actualmente estamos visitando. Tambien agregaré un div extra que se requiere para arreglar un pequeño bug en IE5.5.

TEXTO PLANO
HTML:
  1. <div id="menwrap">
  2. <div id="ie_height_fix">
  3. <h2 class="mail">Mail <span>Envíanos un mail</span></h2>
  4. <ul id="menu">
  5.     <li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
  6.     <li><a href="#" id="tutos" class="menitem"><strong>Tutoriales</strong> <span>Tutoriales de CSS y HTML.</span></a></li>
  7.     <li><a href="#" id="files" class="menitem"><strong>Archivos</strong> <span>Archivos para descargar.</span></a></li>
  8.     <li><a href="#" id="search" class="menitem"><strong>Buscar</strong> <span>Formulario para buscar.</span></a></li>
  9.     <li><a href="#" id="mail" class="menactive"><strong>Mail</strong> <span>Envíanos un mail.</span></a></li>
  10.     <li><a href="#" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
  11.     <li><a href="#" id="write" class="menitem"><strong>Escribir</strong> <span>Escribir una entrada.</span></a></li>
  12.     <li><a href="#" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
  13. </ul>
  14. </div>
  15. </div>

Con esto podrás ver que, como ejemplo, estoy usando la sección de Mail como activa. Tambien hay que destacar que la tag <h2> contiene un <span> el cual contiene la breve descripción de la sección actual.

Ya con todo esto, nuestro HTML debe haber quedado algo así:

TEXTO PLANO
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  5. <title>Menu extraño</title>
  6. <meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
  7. </head>
  8.  
  10.  
  11. <h1 id="header">Tutorial: Menu circular en CSS</span></h1>
  12.  
  13. <h2>Ejemplo de menu</h2>
  14.  
  15. <div id="menwrap">
  16. <div id="ie_height_fix">
  17. <h2 class="mail">Mail <span>Envíanos un mail</span></h2>
  18. <ul id="menu">
  19.     <li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
  20.     <li><a href="#" id="tutos" class="menitem"><strong>Tutoriales</strong> <span>Tutoriales de CSS y HTML.</span></a></li>
  21.     <li><a href="#" id="files" class="menitem"><strong>Archivos</strong> <span>Archivos para descargar.</span></a></li>
  22.     <li><a href="#" id="search" class="menitem"><strong>Buscar</strong> <span>Formulario para buscar.</span></a></li>
  23.     <li><a href="#" id="mail" class="menactive"><strong>Mail</strong> <span>Envíanos un mail.</span></a></li>
  24.     <li><a href="#" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
  25.     <li><a href="#" id="write" class="menitem"><strong>Escribir</strong> <span>Escribir una entrada.</span></a></li>
  26.     <li><a href="#" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
  27. </ul>
  28. </div>
  29. </div>
  30.  
  31. </body>
  32. </html>

Ahora pasemos a lo divertido, el CSS.

Páginas: 1 2 3

Posts relacionados:

55 Comentarios

  1. #1 gravatar Uan 22 de Marzo del 2007, 9:32

    Firefox 1.5.0.11 en XP también funciona

  2. #2 gravatar Sikaffy 22 de Marzo del 2007, 9:51

    OMG, me encanta. ;_;

  3. #3 gravatar isaac 22 de Marzo del 2007, 11:48

    En Safari 2.0.4 y Firefox 2.0.0.2 sobre mac funciona perfecto.
    Un saludo!

  4. #4 gravatar aerovoyager 22 de Marzo del 2007, 13:00

    Firefox 2.0.0.3 en winXP SP2, funciona sin problemas
    IE 7.0 en winXP SP2, funciona sin problemas

  5. #5 gravatar Milton! 22 de Marzo del 2007, 14:26

    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!

  6. #6 gravatar mary 22 de Marzo del 2007, 15:27

    esto funciona en linux

  7. #7 gravatar Roberto R. 22 de Marzo del 2007, 15:51

    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 =)

  8. #8 gravatar antonio3407 22 de Marzo del 2007, 17:49

    Muy bueno el menu.

  9. #9 gravatar diego 23 de Marzo del 2007, 9:18

    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

  10. #10 gravatar macklus 23 de Marzo del 2007, 9:39

    Impresionante. Es increible ver las cosas que se pueden hacer con algo tan "simple" como CSS

  11. #11 gravatar Pedro Rogério 23 de Marzo del 2007, 9:42

    Buenas Hermano,

    Muy bueno este menu. Gracias!!!

  12. #12 gravatar Pinceladas da Web 23 de Marzo del 2007, 9:59

    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.

    ......

  13. #13 gravatar Adrian Ramiro 23 de Marzo del 2007, 11:50

    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.

  14. #14 gravatar penyaskito 24 de Marzo del 2007, 14:46

    Bien en Opera 9 sobre WinXP SP2 :D

  15. #15 gravatar jav 26 de Marzo del 2007, 11:37

    excelente, andaba buscando algo parecido :D

  16. #16 gravatar Jose L. 26 de Marzo del 2007, 23:59

    ¡Magnífico! Algo 'sencillo' con una aspecto espectacular. Enhorabuena.

  17. #17 gravatar GetronX 28 de Marzo del 2007, 19:10

    Sensacional menu... sin duda algo espectacular.

  18. #18 gravatar Nandocot 29 de Marzo del 2007, 9:38

    Excelênte!!! está funcionando bem.
    Meus parabêns.

    "O Poder dos CSS"

  19. #19 gravatar Web 2.0: Lista (Parte 1) « % absolute ? 6 de Abril del 2007, 23:04

    [...] Menu Circular (CSS) Cada dia o CSS vai me assustando, não tem muito oque falar, apenas clique e mate a curiosidade. [...]

  20. #20 gravatar José Manuel 7 de Abril del 2007, 20:31

    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

  21. #21 gravatar MeTaL_oRgY 7 de Abril del 2007, 23:27

    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.

  22. #22 gravatar Best of March 2007 | Smashing Magazine 11 de Abril del 2007, 10:57

    [...] Circular Menu with CSS [...]

  23. #23 gravatar Menu circular em CSS 11 de Abril del 2007, 19:49

    [...] 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. [...]

  24. #24 gravatar Dairesel CSS Menü 11 de Abril del 2007, 22:01

    [...] 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… [...]

  25. #25 gravatar Sai 11 de Abril del 2007, 23:17

    Can I get the English version help and Demo Page URL please...

  26. #26 gravatar MeTaL_oRgY 12 de Abril del 2007, 9:50

    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!

  27. #27 gravatar Pablo 12 de Abril del 2007, 10:16

    Muy lindo menu y muy buena utilización del css, felicitaciones

  28. #28 gravatar kerberoS 13 de Abril del 2007, 13:49

    ¡excelente! De verdad muy bueno.

  29. #29 gravatar dairesel css menu : İnternet ve Yaşam 13 de Abril del 2007, 15:52

    [...] 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. [...]

  30. #30 gravatar mcdave.net » links for 2007-04-14 14 de Abril del 2007, 1:25

    [...] metal.ize » Blog Archive » Menu circular en CSS (tags: css menu webdesign tutorial web javascript tool howto inspiration) [...]

  31. #31 gravatar Well .. 14 de Abril del 2007, 18:09

    Maybe you should mention, that the icons are part of the tango project oO?

  32. #32 gravatar MeTaL_oRgY 14 de Abril del 2007, 21:01

    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.

  33. #33 gravatar Webdesign (css, grafica e altro) » Blog Archive » Best of March 2007 18 de Abril del 2007, 11:28

    [...] Circular Menu with CSS This article shows how a beautiful circular navigation menu is created. In Spanish with Source code and an example. [...]

  34. #34 gravatar Antonio Silva 25 de Abril del 2007, 18:50

    Muito bom mesmo essa dica! Parabéns.

    Grato.

  35. #35 gravatar Peter 26 de Abril del 2007, 16:18

    muy interesante para hacer un menu circular

  36. #36 gravatar Rick! 29 de Abril del 2007, 23:02

    Muy bueno para salir de lo comun.....Felicitaciones

  37. #37 gravatar Web 1 de Mayo del 2007, 22:57

    Interestante, el artículo. Saludos

  38. #38 gravatar troie 16 de Junio del 2007, 4:21

    i'am really impressed!!

  39. #39 gravatar EfraNET 29 de Junio del 2007, 13:33

    Excelente trabajo, me funciona re bien. Estoy en proceso de agregar íconos y cambiar las imágenes para adapatarlo a mi trabajo... FELICIDADES NUEVAMENTE.

  40. #40 gravatar Luciane 19 de Julio del 2007, 0:24

    Ola.. Apliquei este menu circular en mi site. http://www.luciane.pro.br/

    Gracias por tu ejemplo e Saludos...

  41. #41 gravatar NicoElojo 25 de Julio del 2007, 23:19

    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!

  42. #42 gravatar Omar 7 de Agosto del 2007, 16:12

    Puedo hacer un menu animado solo con ccs
    para evitar usar javascript ya que varos usuarios no lo tienen activado ?

  43. #43 gravatar Omar 7 de Agosto del 2007, 16:18

    Esto era lo que estava buscando para mi web :D

  44. #44 gravatar gabriel 6 de Octubre del 2007, 19:15

    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

  45. #45 gravatar moisesrlima 22 de Noviembre del 2007, 12:22

    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???

  46. #46 gravatar Recursos para un Webmaster | DesignPro 3 de Diciembre del 2007, 8:52

    [...] Menu en CSS: Menu circular en CSS, muy interesante. [...]

  47. #47 gravatar David Jacques-Louis 24 de Febrero del 2008, 12:14

    Fantastico

  48. #48 gravatar Ravid 28 de Febrero del 2008, 2:24

    Podrias enviar el codigo en un archivo zip?

    Gracias

  49. #49 gravatar joe2 17 de Marzo del 2008, 8:03

    good work! i am impressed!

  50. #50 gravatar Hadt 30 de Abril del 2008, 9:36

    OK.. ELEGANTE!

  51. #51 gravatar Luis Henrique 2 de Mayo del 2008, 11:42

    Muy bueno! Gracias!

  52. #52 gravatar mossad 11 de Mayo del 2008, 16:04

    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 :)

  53. #53 gravatar Roy 21 de Mayo del 2008, 9:27

    please could you have this in english please and thank you

  54. #54 gravatar sd 23 de Mayo del 2008, 7:00

    muy bueno, encantado por esto menu

  55. #55 gravatar Johan