Menu web multinivel con HTML y CSS

19 Julio, 2008 |Comentarios (1)

Un recurso muy utilizado en web son los menús horizontales y verticales, y realmente los que más problemas nos presentan son estos últimos debido a la incompatibilidad de algunos navegadores que no siguen los estándares. Existen diversas formas de llevar a cabo los menús horizontales con elementos anidados: desde mostrar los submenús con javascript, hasta hacerlo directamente con CSS. En esta ocasión trataré de explicar como se crea un menú con esta última opción, por su portabilidad además que nos va a ser indiferente que el cliente tenga o no Javascript en su navegador. Menu multinivel en CSS y HTMLEl resultado final debería ser algo como lo que se ve en la imagen. El nivel de anidamiento es indiferente y tengo comprobado que funciona en todos los navegadores (salvo lógicamente links). El código HTML es bastante simple, para anidar sub-menús simplemente se inserta una estructura <ul><li></li></ul> dentro de los <li> así la hoja de estilos (que también adjunto) recoja la estructura correcta y muestre nuestro precioso menú. Ahí va el código html.

  1.  
  2. <ul id="menu">
  3.   <li><a class="selected" title="Acceder a  Inicio" href="#">Inicio</a></li>
  4.   <li><a href="#">Descargas</a>
  5. <ul>
  6.   <li><a title="Acceder a  Datos de la empresa" href="#">Soft Desktop</a></li>
  7.   <li><a title="Acceder a  Descargas" href="#">Soft M&oacute;vil</a></li>
  8. </ul>
  9. </li>
  10.   <li><a title="Acceder a  Nuestro Chef" href="#">Localizaci&oacute;n</a></li>
  11.   <li><a title="Contacte con nosotros" href="#">Contacto</a></li>
  12. </ul>
  13. <!– Menu ends –>

 Y aquí el código CSS:

  1. body{
  2.   background:#fff;
  3. }
  4.  
  5. /* Root = Horizontal, Secondary = Vertical */
  6. ul#menu {
  7.   ba
  8.   margin: 0;
  9.   border: 0 none;
  10.   padding: 0;
  11. /*  width: 500px;*/ /*For KHTML*/
  12. width:360px;
  13.   list-style: none;
  14.   height: 20px;
  15.   border:1px solid #eee;
  16.   padding-bottom:5px;
  17. }
  18.  
  19. ul#menu li {
  20.   margin: 0;
  21.   border: 0 none;
  22.   padding: 0;
  23.   float: left; /*For Gecko*/
  24.   display: inline;
  25.   list-style: none;
  26.   position: relative;
  27.   height: 20px;
  28. }
  29. ul#menu li{
  30.   padding-bottom:5px;
  31. }
  32. ul#menu li:hover{
  33.   background:#ddd;
  34. }
  35.  
  36. ul#menu  ul {
  37.   margin: 0;
  38.   border: 0 none;
  39.   padding: 0;
  40.   width: 160px;
  41.   list-style: none;
  42.   display: none;
  43.   position: absolute;
  44.   top: 25px;
  45.   left: 10px;
  46.   background: #eee;
  47.   border: none;
  48.   opacity: 0.8;
  49.   -moz-opacity: 0.8;
  50.   filter:alpha(opacity=80);
  51. }
  52.  
  53. ul#menu ul:after /*From IE 7 lack of compliance*/{
  54.   clear: both;
  55.   display: block;
  56.   font: 1px/0px serif;
  57.   content: ".";
  58.   height: 0;
  59.   visibility: hidden;
  60. }
  61.  
  62. ul#menu ul li {
  63.   width: 160px;
  64.   float: left; /*For IE 7 lack of compliance*/
  65.   display: block !important;
  66.   display: inline; /*For IE*/
  67. }
  68.  
  69. /* Root Menu */
  70. ul#menu a {
  71.   padding: 5px 15px 5px;
  72.   float: none !important; /*For Opera*/
  73.   float: left; /*For IE*/
  74.   display: block;
  75.   color: #9fcf21;
  76.   text-decoration: none;
  77.   font-weight: bold;
  78.   font-family:Arial, Helvetica, sans-serif;
  79.   font-size:12px;
  80.   font-weight:bold;
  81. /*  border-right:1px solid #818181;*/
  82.   text-decoration: none;
  83.   height: auto !important;
  84.   height: 1%; /*For IE*/
  85. }
  86.  
  87. /* Root Menu Hover Persistence */
  88. ul#menu a:hover,
  89. ul#menu li:hover a,
  90. ul#menu li.iehover a {
  91. color: #003300;
  92.  
  93. }
  94.  
  95. /* 2nd Menu */
  96. ul#menu li:hover li a,
  97. ul#menu li.iehover li a {
  98.   float: none;
  99.   border:none;
  100. }
  101.  
  102. /* 2nd Menu Hover Persistence */
  103. ul#menu li:hover li a:hover,
  104. ul#menu li:hover li:hover a,
  105. ul#menu li.iehover li a:hover,
  106. ul#menu li.iehover li.iehover a {
  107.  background:#ddd;
  108.   color: #003300;
  109. }
  110.  
  111. /* 3rd Menu */
  112. ul#menu li:hover li:hover li a,
  113. ul#menu li.iehover li.iehover li a {
  114.   background: #EEE;
  115.   color: #666;
  116. }
  117.  
  118. /* 3rd Menu Hover Persistence */
  119.  
  120. ul#menu li:hover li:hover li a:hover,
  121. ul#menu li:hover li:hover li:hover a,
  122. ul#menu li.iehover li.iehover li a:hover,
  123. ul#menu li.iehover li.iehover li.iehover a {
  124. background:#ddd;
  125.   color: #FFF;
  126. }
  127.  
  128. /* 4th Menu */
  129. ul#menu li:hover li:hover li:hover li a,
  130. ul#menu li.iehover li.iehover li.iehover li a {
  131. background:#ddd;
  132.   color: #666;
  133. }
  134.  
  135. /* 4th Menu Hover */
  136. ul#menu li:hover li:hover li:hover li a:hover,
  137. ul#menu li.iehover li.iehover li.iehover li a:hover {
  138.   background: #CCC;
  139.   color: #FFF;
  140. }
  141.  
  142. ul#menu ul ul,
  143. ul#menu ul ul ul {
  144.   display: none;
  145.   position: absolute;
  146.   top: 0;
  147.   left: 160px;
  148. }
  149.  
  150. /* Do Not Move – Must Come Before display:block for Gecko */
  151. ul#menu li:hover ul ul,
  152. ul#menu li:hover ul ul ul,
  153. ul#menu li.iehover ul ul,
  154. ul#menu li.iehover ul ul ul {
  155.   display: none;
  156. }
  157.  
  158. ul#menu li:hover ul,
  159. ul#menu ul li:hover ul,
  160. ul#menu ul ul li:hover ul,
  161. ul#menu li.iehover ul,
  162. ul#menu ul li.iehover ul,
  163. ul#menu ul ul li.iehover ul {
  164.   display: block;
  165. }
  166. ul#menu .selected{
  167.   color: #003300;
  168. }


Archivado en... General, Web
← Migración de datos de sqlite3 a MySQL Configuración de MySQL para rendimiento →

1 Comentario --> Formulario de contacto

  • ChristianNo Gravatar
  • 7 Mayo 2009
  • 04:34

Comentarios

NO funciona en IE 6.0 hummm


RSS feed para los comentarios de este post. URI TrackBack.

Deja tu comentario


This site is using OpenAvatar based on




: