Tema: sencillo menú desplegable
Ver Mensaje Individual
  #15 (permalink)  
Antiguo 05/10/2011, 12:49
Avatar de humanista
humanista
 
Fecha de Ingreso: abril-2005
Mensajes: 878
Antigüedad: 19 años, 7 meses
Puntos: 15
Respuesta: sencillo menú desplegable
Keseso? paso a detallar lo que señalas (aunque ya lo hice antes).

- Para todos los navegadores (los 5 "grandes"),
- Una opción que sea un icono y un texto "ver opciones", q se pueda pinchar en cualquier de ellos y te despliegue en vertical y justo debajo una lista de unas pocas opciones (links), uno en cada línea para que se pueda pinchar.
- Sólo un nivel, algo sencillo.

El código lo he cogido de uno de los ejemplos que me proponíais (como os decía, lo de pinchar en el icono.gif no me iba):

Código HTML: 
Ver original
  1. <script type="text/javascript" src="menudesplegableaccesible.js"></script>
  2. <link href="estilosmenu.css" rel="stylesheet" type="text/css" />
  3. <link type="text/css" title="estilosMenusinjs" rel="stylesheet" href="estilosmenusinjs.css" />
  4.  
  5. <ul id="menu">
  6.   <li><b>XML</b><img src="icono.gif">
  7.     <ul>
  8.       <a href="#">Historia</a><br>
  9.       <a href="#">Especificaci&oacute;n</a><br>
  10.       <a href="#">Esquemas XML</a><br>
  11.       <a href="#">XML DOM</a><br>
  12.     </ul>
  13.   </li>
  14. </ul>
  15. <div id="contenidos">
  16. <script type="text/javascript">
  17.     iniciaMenu();
  18. </script>
  19. </div>


__________________________________________________ ___


Código Javascript: 
Ver original
  1. /****************************************************************************
  2. Menú desplegable accesible. 05-10-06
  3. Autor: tunait http://javascript.tunait.com/ [email protected]
  4. Script de libre uso mientras se mantengan los créditos de autor intactos.
  5. No permitida su re-distribución.
  6. *****************************************************************************/
  7. var retardoEnCerrar = 5000
  8. var menuActivo = false
  9. var zindex = 1000
  10. var tiempoCierre
  11. function nodoHijo(obj){
  12.     if(obj.hasChildNodes){
  13.         for(m=0; m<obj.childNodes.length; m++){
  14.             if(obj.childNodes[m].nodeType == 1 && obj.childNodes[m].tagName.toLowerCase() == 'ul') {
  15.                 return obj.childNodes[m]
  16.                 break
  17.             }
  18.         }
  19.     }
  20. }
  21. function recorre(elems, obj){
  22.     for(s=0; s<elems-1; s++){
  23.         if(obj.childNodes[s].nodeType == 1 && obj.childNodes[s].tagName.toLowerCase() == 'li'){
  24.             alert(obj.childNodes[s].tagName + ": " + obj.childNodes[s].childNodes.length)
  25.         }
  26.     }
  27. }
  28.     H = document.documentElement.childNodes[0]
  29.     tagLink = document.createElement('link')
  30.     tagLink.type = "text/css"
  31.     tagLink.rel = "stylesheet"
  32.     tagLink.href = "estilosmenujs.css"
  33.     H.appendChild(tagLink)
  34. function iniciaMenu(){
  35.     for(s in document.getElementsByTagName('link')){
  36.         hoja = document.getElementsByTagName('link')[s]
  37.         if(hoja.title == 'estilosMenusinjs') hoja.disabled = true
  38.         if(hoja.title == 'estilosMenujs') hoja.disabled = false
  39.  
  40.     }
  41.     /*if(document.styleSheets && document.styleSheets.length > 0){*/
  42.     for(s in document.styleSheets){
  43.         hoja = document.styleSheets[s]
  44.         if(hoja.title == 'estilosMenusinjs') hoja.disabled = true
  45.         if(hoja.title == 'estilosMenujs') hoja.disabled = false
  46.     }
  47.     Menu = document.getElementById('menu')
  48.     as = document.getElementById('menu').getElementsByTagName('a')
  49.     for(var m in as){
  50.         as[m].className = 'menuSecundario'
  51.     }
  52.     li = document.getElementById('menu').getElementsByTagName('li')
  53.     for(m in li){
  54.         if(li[m].parentNode == Menu){
  55.             li[m].firstChild.className = 'menuSecundario'
  56.             li[m].style.cssFloat  = 'left'
  57.             li[m].style.styleFloat  = 'left'
  58.             }
  59.     }
  60.     uls = document.getElementById('menu').getElementsByTagName('ul').length
  61.     for(m=0; m < uls ; m++){
  62.         ul = document.getElementById('menu').getElementsByTagName('ul')[m]
  63.         if(ul.parentNode.parentNode == Menu){
  64.             ul.parentNode.style.cssFloat  = 'left'
  65.             ul.parentNode.style.styleFloat  = 'left'
  66.             ul.parentNode.firstChild.className = 'menuPrincipal'
  67.             ul.parentNode.firstChild.style.cursor = 'pointer'
  68.             if(ul.parentNode.firstChild.nodeName.toLowerCase() != 'a'){
  69.                 txt = ul.parentNode.firstChild.firstChild.nodeValue
  70.                 lin = document.createElement('a')
  71.                 lin.href = '#menu'
  72.                 lin.className = 'menuPrincipal'
  73.                 lin.title ="Haga click para abrir más opciones";
  74.                 lin.appendChild(document.createTextNode(txt))
  75.                 ul.parentNode.replaceChild(lin,ul.parentNode.firstChild)
  76.             }
  77.         }
  78.         else{
  79.             if(ul.parentNode.firstChild.nodeName.toLowerCase() != 'a'){
  80.                 txt = ul.parentNode.firstChild.firstChild.nodeValue
  81.                 lin = document.createElement('a')
  82.                 lin.href = '#menu'
  83.                 lin.className = 'menuSecundario'
  84.                 lin.title ="Haga click para abrir más opciones";
  85.                 lin.appendChild(document.createTextNode(txt))
  86.                 ul.parentNode.replaceChild(lin,ul.parentNode.firstChild)
  87.             }
  88.         }
  89.         ul.style.visibility = 'hidden'
  90.         ul.style.position = 'absolute'
  91.         ul.className = 'cajaMenuDesp'
  92.         ul.parentNode.firstChild.style.display = 'block'
  93.         ul.parentNode.style.zIndex = zindex--
  94.         ul.parentNode.firstChild.title ="Haga click para abrir más opciones"
  95.         ul.parentNode.firstChild.setAttribute('visible','off') //atributo en A
  96.         if(ul.offsetParent && ul.parentNode.parentNode != Menu){
  97.             posIzq = 0
  98.             derecha = 0
  99.             ul2 = ul
  100.             while(ul2 = ul2.offsetParent){
  101.                 posIzq += ul2.offsetLeft
  102.             }
  103.             anchoDoc = document.body.offsetWidth
  104.             derecha = anchoDoc - (posIzq + ul.offsetWidth)
  105.             if(derecha < 0) ul.style.marginLeft = derecha + "px"
  106.         }
  107.         ul.parentNode.firstChild.onclick = function(){ //click en el A
  108.             hijo = nodoHijo(this.parentNode) //devuelve el UL del LI
  109.             if(this.parentNode.parentNode == Menu){
  110.                 actMenus(this, hijo)
  111.             }
  112.             else{
  113.                 actSubMenus(this, hijo)
  114.             }
  115.             return false
  116.         }
  117.     }
  118.         Menu.onmouseover = function(){
  119.             menuActivo = true
  120.         }
  121.         Menu.onmouseout = function(){
  122.             menuActivo = false
  123.             clearTimeout(tiempoCierre)
  124.             tiempoCierre = setTimeout('cierraMenu()',retardoEnCerrar)
  125.         }
  126.  
  127.     /*}*/
  128. }
  129. function actMenus(obj,hijo){
  130.     var uls = document.getElementById('menu').getElementsByTagName('ul').length
  131.     for(var m=0; m < uls ; m++){
  132.         var ul = document.getElementById('menu').getElementsByTagName('ul')[m]
  133.         ul.style.visibility = 'hidden'
  134.         ul.parentNode.firstChild.className = 'menuPrincipal'
  135.         ul.parentNode.firstChild.title="Haga click para mostrar más opciones"
  136.         if(ul.parentNode.firstChild == obj) continue
  137.         ul.parentNode.firstChild.setAttribute('visible','off')
  138.     }
  139.     if(obj.getAttribute('visible') == 'off'){
  140.                 hijo.style.visibility = 'visible'
  141.                 obj.setAttribute('visible','on')
  142.                 obj.className = 'menuSeleccionado'
  143.                 obj.title = "Haga click para ocultar las opciones"
  144.             }
  145.     else{
  146.         hijo.style.visibility = 'hidden'
  147.         obj.setAttribute('visible','off')
  148.         obj.className = 'menuPrincipal'
  149.         obj.title = "Haga click para mostrar más opciones"
  150.     }
  151.     obj.focus()
  152. }
  153.  
  154.  
  155. function actSubMenus(obj, hijo){
  156.     ulspadre = obj.parentNode.parentNode
  157.     var uls = ulspadre.getElementsByTagName('ul').length
  158.     for(var m=0; m < uls ; m++){
  159.         var ul = ulspadre.getElementsByTagName('ul')[m]
  160.         ul.style.visibility = 'hidden'
  161.         ul.parentNode.firstChild.className = 'menuPrincipal'
  162.         ul.parentNode.firstChild.title="Haga click para mostrar más opciones"
  163.         if(ul.parentNode.firstChild == obj) continue
  164.         ul.parentNode.firstChild.setAttribute('visible','off')
  165.     }
  166.     if(obj.getAttribute('visible') == 'off'){
  167.                 hijo.style.visibility = 'visible'
  168.                 obj.setAttribute('visible','on')
  169.                 obj.className = 'menuSeleccionado'
  170.                 obj.title = "Haga click para ocultar las opciones"
  171.             }
  172.     else{
  173.         hijo.style.visibility = 'hidden'
  174.         obj.setAttribute('visible','off')
  175.         obj.className = 'menuPrincipal'
  176.         obj.title = "Haga click para mostrar más opciones"
  177.     }
  178.     obj.focus()
  179. }
  180. function cierraMenu(){
  181.     if(!menuActivo){
  182.         var uls = document.getElementById('menu').getElementsByTagName('ul').length
  183.         for(var m=0; m < uls ; m++){
  184.             var ul = document.getElementById('menu').getElementsByTagName('ul')[m]
  185.             ul.style.visibility = 'hidden'
  186.             ul.parentNode.firstChild.className = 'menuPrincipal'
  187.             ul.parentNode.firstChild.title="Haga click para mostrar más opciones"
  188.             ul.parentNode.firstChild.setAttribute('visible','off')
  189.         }
  190.     }
  191. }


___________________________

menu css (el de sin css no lo pongo para no hacerlo más largo pero si os hiciera falta decidme)

Código CSS: 
Ver original
  1. #menu{
  2.     font-family: verdana;
  3.     padding-bottom: 25px;
  4.     font-size: .9em;
  5.     margin-left: auto;
  6.     margin-right: auto;
  7.     width: 560px;
  8. }
  9. #menu li{
  10.     border: 1px solid #ffffff;
  11.     list-style-type: none;
  12.     min-width: 130px;
  13.     width: 130px;
  14.     position: relative;
  15.     padding: 0 0px;
  16.     font-weight: bold;
  17. }
  18. html > body #menu li{
  19.     width: auto;
  20. }
  21. #menu li a{
  22.     background-color: #6699FF;
  23.     color: #ffffff;
  24. }
  25. #menu li ul {
  26.     margin-left: 0;
  27.     padding: 0;
  28.     left: 0;
  29.     background-color: #ffffff;
  30. }
  31. #menu li ul li{
  32.     float: none;
  33.     font-weight: normal;
  34. }
  35. #menu li ul li ul{
  36.     margin-left: 20px;
  37.     background-color: #ffffff;
  38. }
  39. #menu li a{
  40.     color: #111199;
  41.     text-decoration: none;
  42.     display: block;
  43.     margin: 0;
  44. }
  45. #menu li a:hover, #menu li a:focus{
  46.     background-color: #C4D7FF;
  47. }
  48. #menu li ul a{
  49.     background-color: #ffffff;
  50. }
  51. #menu li a.menuSeleccionado{
  52.     background-color: #6699FF;
  53.     border: 1px solid #cccccc;
  54.     background-image: url(flecha1.png);
  55.     background-position: 5px 4px;
  56.     background-repeat: no-repeat;
  57.     padding-left: 20px;
  58.     white-space: nowrap;
  59.     font-weight: bold;
  60.     color: #ffffff;
  61. }
  62. #menu li a.menuPrincipal{
  63.     font-size: 1em;
  64.     border: 1px solid #6699FF;
  65.     background-image: url(flecha.png);
  66.     background-position: 5px 4px;
  67.     background-repeat: no-repeat;
  68.     padding-left: 20px;
  69.     display: block;
  70.     white-space: nowrap;
  71.     font-weight: bold;
  72.     
  73.     
  74. }
  75. #menu li ul li a.menuPrincipal, #menu li ul li a.menuSeleccionado{
  76.     width: 100%;
  77. }
  78. .cajaMenuDesp{
  79.     padding: 0;
  80.     
  81. }
  82. .menuSecundario{
  83.     font-size: 1em;
  84.     border: 1px solid #6699FF;
  85.     background-position: 5px 4px;
  86.     background-repeat: no-repeat;
  87.     padding-left: 20px;
  88.     display: block;
  89.     min-width: 130px;
  90.     width: 100%;
  91.     white-space: nowrap;
  92.     background-color: #ffffff;
  93. }
  94. p{
  95.     width: 80%;
  96.     margin-left: auto;
  97.     margin-right: auto;
  98.     text-align: justify;
  99. }