Foros del Web » Creando para Internet » CSS »

menu css de tres niveles

 Estas en el tema de menu css de tres niveles en el foro de CSS en Foros del Web. de casualidad alguien no tienes un menu de css que tenga tres nives, yo solo he podido con dos niveles y no quiero usar javascript, ...
  #1 (permalink)  
Antiguo 05/11/2011, 04:07
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 6 meses
Puntos: 8
menu css de tres niveles
de casualidad alguien no tienes un menu de css que tenga tres nives, yo solo he podido con dos niveles
y no quiero usar javascript, es una tarea
gracias
este funciona bien en dos niveles pero en tres no se
me pueden decir que mejorar para que agarre el tercer nivel

ah se me olvido debe ser horizontal como este
ya que he encontrado vertical, pero por mas que trato no puedo
____________________________________________



Código PHP: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. <!--
  8. *{ padding:0px; margin:0px;}
  9. .contenedor { width:100%; background-color: #0000FF;}
  10. .contenedor2 { width:600px; background: #333333; margin:auto;  }
  11. .cuerpo{ height:500px;background: #003300;}
  12.  
  13. /*menu pero no he podido de tres niveles pero desde aqui empieza*/
  14. ul {
  15. background-color: #FFFF33 ;
  16. list-style-type: none;
  17. text-align: center;
  18. }
  19. .menu ul li{
  20. background-color: #009900;
  21. display: inline;
  22. float: left;
  23. width:120px;
  24. }
  25. .menu ul li:hover{
  26. background-color: #CCCCCC;
  27. display: inline;
  28. float: left;
  29. width:120px;
  30. }
  31. .menu li ul{
  32. display: none;
  33. position: relative;
  34. left: 0;
  35. top: 0px;
  36. }
  37. .menu li:hover ul{
  38. display: block ;
  39. position: relative;
  40. left: 0;
  41. top: 0px;
  42. }
  43. -->
  44. </style>
  45. </head>
  46.  
  47. <body>
  48. <div class="contenedor">
  49. <div class="contenedor2">
  50.  
  51. <div class="menu">
  52. <ul>
  53.     <li>home<ul>
  54.              <li>jorge  </li>
  55.              <li>jorge  </li>
  56.              <li>jorge  </li>
  57.              </ul>
  58.     </li>
  59.     <li>productos</li>
  60.     <li>local</li>
  61.     <li>diseno</li>
  62.     <li>mapa</li>
  63. </ul>
  64. </div>
  65.  
  66.  
  67. <div class="cuerpo">  </div>
  68.  
  69.  
  70. </div>
  71. </body>
  72. </html>
Última edición por jor_0203; 05/11/2011 a las 04:14
  #2 (permalink)  
Antiguo 05/11/2011, 14:07
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: menu css de tres niveles
prueba con estos
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 06/11/2011, 00:23
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 6 meses
Puntos: 8
Respuesta: menu css de tres niveles
Cita:
Iniciado por IsaBelM Ver Mensaje
[URL="http://araudi.net/ejemplos/menus_desplegables_CSS.html"]prueba con estos[/URL]
ya los había visto
pero ninguno me sirve ya que son de tres niveles horizontalmente y solo
solo hay vertical
ya trate y no sale
es de diferente forma
  #4 (permalink)  
Antiguo 06/11/2011, 08:34
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: menu css de tres niveles
y yo me pregunto, es demasiado trabajo ir al código fuente, dedicarle unos minutos para entender el css y html y de ese modo conseguir lo que pretendes??
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #5 (permalink)  
Antiguo 07/11/2011, 00:08
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 6 meses
Puntos: 8
Respuesta: menu css de tres niveles
del menú de tres niveles es una pequeña explicación, esto es gracias a lo que me dio isabelm , espero que les sirva, y si ven algo que esta mal me lo digan, solo pónganle sus estilo y ya.
no le puse estilo para que no vean tanto código, solo entiendan el código, pero la fuente es de isabel solo yo acorte el código
espero sus comentarios para seguir mejorando esto.


Código PHP: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. <!--
  8. .contenedor {
  9.     background-color: #FFFF00;
  10.     width: 800px;
  11.     margin-right: auto;
  12.     margin-left: auto;
  13.     height: 400px;
  14. }
  15. .menu {
  16.     background-color: #FF9900;
  17.     height: 50px;
  18. }
  19. /*-------------esto  de abajo es para el menu de tres niveles  -----------------*/
  20. ul{ padding:0;
  21.     margin:0;
  22.     list-style-type: none;
  23. }
  24. .menu ul li {
  25.     width: 150px;
  26.     height:30px;           /* tamaño de boton y color*/
  27.     float: left;
  28.     background-color: #009933;
  29.     padding-top: 20px;        /* con esto  muevo las letras a la distancia que quiera*/
  30.     padding-right: 0px;
  31.     padding-bottom: 0px;
  32.     padding-left: 50px;
  33. }
  34. .menu ul li ul { display: none; }  /* este oculta los botones de abajo*/
  35. .menu ul li:hover {position: relative;} /* la primera lista es relativa */ 
  36. .menu ul li:hover  ul.menu2{            /* la segunda lista es absoluta y muestra la segunda lista*/ 
  37. display: block;
  38. position: absolute;
  39. left:0px; 
  40. }
  41. .contenedor .menu .menu1 .menu2 li:hover .menu3 {     /* la tercera lista es absoluta y solo cambia la posicion */ 
  42. display: block;
  43. position: absolute;
  44. left:200px;
  45. top:0px;
  46. }
  47. -->
  48. </style>
  49. </head>
  50.  
  51. <body>
  52. <div class="contenedor">
  53. <div class=" menu">
  54. <ul  class="menu1">
  55.        <li>lista1
  56.          <ul class="menu2">
  57.              <li>lista1a
  58.                         <ul class="menu3">
  59.                         <li>XXXX</li>
  60.                         <li>XXXX</li>
  61.                         <li>XXXX</li>
  62.                         </ul>            
  63.              </li>
  64.              <li>lista1a</li>
  65.              <li>lista1a
  66.                        <ul class="menu3">
  67.                         <li>XXXX</li>
  68.                         <li>XXXX</li>
  69.                         <li>XXXX</li>
  70.                         </ul>
  71.              </li>
  72.          </ul>
  73.       </li>
  74.       <li>lista2</li>
  75.       <li>lista3</li>
  76.         <li>lista4
  77.                   <ul class="menu2">
  78.                         <li>XXXX</li>
  79.                         <li>XXXX</li>
  80.                         <li>XXXX</li>
  81.                         </ul>
  82.         
  83.         </li>
  84.     </ul>
  85.     
  86.     </div>
  87.     
  88.     solo ponganle el estilo y ya esta 
  89. </div>
  90. </body>
  91. </html>
Última edición por jor_0203; 08/11/2011 a las 02:55
  #6 (permalink)  
Antiguo 08/11/2011, 03:50
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 6 meses
Puntos: 8
Respuesta: menu css de tres niveles
me preguntaron que si le quiero poner poner un estilo que dedo hacer
solo esto
primero cambien el estilo del botón y el tamaño, eso depende de su div contenedor
segundo apliquen el hover y listo
.menu ul li:hover {
background-color: #0033FF;

}
  #7 (permalink)  
Antiguo 08/11/2011, 03:56
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 6 meses
Puntos: 8
Respuesta: menu css de tres niveles
esto solo tiene el efecto que me pidieron de hover


Código PHP: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. <!--
  8. .contenedor {
  9.     background-color: #FFFF00;
  10.     width: 800px;
  11.     margin-right: auto;
  12.     margin-left: auto;
  13.     height: 400px;
  14. }
  15. .menu {
  16.     background-color: #FF9900;
  17.     height: 50px;
  18. }
  19. /*-------------esto  de abajo es para el menu de tres niveles  -----------------*/
  20. ul{ padding:0;
  21.     margin:0;
  22.     list-style-type: none;
  23. }
  24. .menu ul li {
  25.     width: 150px;
  26.     height:30px;           /* tamaño de boton y color*/
  27.     float: left;
  28.     background-color: #0000FF;
  29.     padding-top: 20px;        /* con esto  muevo las letras a la distancia que quiera*/
  30.     padding-right: 0px;
  31.     padding-bottom: 0px;
  32.     padding-left: 50px;
  33. }
  34. .menu ul li:hover {
  35.     background-color: #003399;  
  36. }
  37. .menu ul li ul { display: none; }  /* este oculta los botones de abajo*/
  38. .menu ul li:hover {position: relative;} /* la primera lista es relativa */ 
  39. .menu ul li:hover  ul.menu2{            /* la segunda lista es absoluta y muestra la segunda lista*/ 
  40. display: block;
  41. position: absolute;
  42. left:0px; 
  43. top:50px;
  44. }
  45. .contenedor .menu .menu1 .menu2 li:hover .menu3 {     /* la tercera lista es absoluta y solo cambia la posicion del tercer boton */ 
  46. display: block;
  47. position: absolute;
  48. left:200px;
  49. top:0px;                               
  50. }
  51. -->
  52. </style>
  53. </head>
  54.  
  55. <body>
  56. <div class="contenedor">
  57. <div class=" menu">
  58. <ul  class="menu1">
  59.        <li>lista1
  60.          <ul class="menu2">
  61.              <li>lista1a
  62.                         <ul class="menu3">
  63.                         <li>XXXX</li>
  64.                         <li>XXXX</li>
  65.                         <li>XXXX</li>
  66.                         </ul>            
  67.              </li>
  68.              <li>lista1a</li>
  69.              <li>lista1a
  70.                        <ul class="menu3">
  71.                         <li>XXXX</li>
  72.                         <li>XXXX</li>
  73.                         <li>XXXX</li>
  74.                         </ul>
  75.              </li>
  76.          </ul>
  77.       </li>
  78.       <li>lista2</li>
  79.       <li>lista3</li>
  80.         <li>lista4
  81.                   <ul class="menu2">
  82.                         <li>XXXX</li>
  83.                         <li>XXXX</li>
  84.                         <li>XXXX</li>
  85.                         </ul>
  86.         
  87.         </li>
  88.     </ul>
  89.     
  90.     </div>
  91.     
  92.     solo ponganle el estilo y ya esta 
  93. </div>
  94. </body>
  95. </html>

Etiquetas: hover, html, niveles, tres, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:50.