sencillo menú desplegable

[humanista]

Hola, estoy buscando algún sencillo menú vertical desplegable compatible con todos los navegadores.

La idea es que al pinchar en una imagen se me despliegue justo debajo un recuadro con una serie de opciones (links).

He encontrado cosas con jquery y así pero son muy pesadas. Seguro que hay alguna manera mucho más sencilla de hacerlo.

Salu2 y gracias de antemano.

[daPhyre]

A fuerza se debe hacer con JavaScript. La idea es agregar un escuchador al enlace, y que cuando se haga clic sobre él, se despliegue la lista. Suerte

[IsaBelM]

lee este post

[tunait]

Te dejo algo que hice hace tiempo. Tiene más años que la injusticia pero bueno http://tunait.com/javascript/scripts...accesible.html

[kseso?]

Iniciado por humanista

Hola, estoy buscando algún sencillo menú vertical desplegable compatible con todos los navegadores.

La idea es que al pinchar en una imagen se me despliegue justo debajo un recuadro con una serie de opciones (links).

He encontrado cosas con jquery y así pero son muy pesadas. Seguro que hay alguna manera mucho más sencilla de hacerlo.

Salu2 y gracias de antemano.

Iniciado por daPhyre

A fuerza se debe hacer con JavaScript. La idea es agregar un escuchador al enlace, y que cuando se haga clic sobre él, se despliegue la lista. Suerte

Iniciado por IsaBelM

lee este post

¿Qué pasó?
Dejaron de dar soporte los navegadores y css a las pseudoclases?
Un momento que lo verifique, por favor.

Edito:
Pues los de http://www.cssplay.co.uk/menus/ siguen funcionando perfectamente. Por ejemplo.

[IsaBelM]

estoy de acuerdo contigo con que la mejor manera es usar pseudoclases, pero no las recomiendo por que nunca he logrado que funcionase :focus en ningún elemento que no fuese un <a> o <input>. por otro lado :target entra en conflicto con navegadores antiguos.

puedes aplicarle :focus a una lista?? te dejo un ejemplo de los intentos que he hecho, a ver si es que fallo en algo

ul li {color: green;}
ul li:focus {background: green; color: yellow;}
ul li:focus:hover { background: red;}

<ul>
<li>haz click</li>
<li>haz click</li>
</ul>

gracias

[daPhyre]

Usar :focus para hacer menus desplegables sigue siendo un no-estándar para todos los navegadores, por eso aseguro que se debe hacer con Javascript. Claramente humanista lo pidió al hacer clic; si fuera con :hover, sería más sencillo de usar con CSS puro

[IsaBelM]

es verdad que no está totalmente standarizado, creo que es css2.1, pero funciona en ie8+, ff, chrome, opera y safari. el caso es no logro que funcione en un bloque, lista,... cuando este puede recibir el foco

[kseso?]

Ya siento insistir, pero sigo discrepando de lo que afirman:
http://www.librosweb.es/css_avanzado...active_y_focus

Y unos casos prácticos bastante veteranos de unos menús que muestran las opciones (submenús) al ser pulsados, realizados únicamente con css, se pueden encontrar, además de en la página que referencié en #5, en www.araudi.net

[ETB2011]

Te recomiendo utilizar siempre CSS no coloques menues con links en Java pues google y el resto de los crawlers no son capaces de seguir esos links con lo que tu site tendra muy poca relevancia desde el punto de vista SEO.

Espero te sirva

[humanista]

Hola, he estado revisando lo que mandáis y quería concretar un poco más lo que necesito.

El tema es que he visto menús con listas (<ul>, <li>...) pero el problema (o es que no he sabido hacerlo...) (y funcionan muy bien) es que no puedo incluir una imagen.

Es decir que lo que busco es que al pinchar en un pequeño icono (también podría ir acompañado de texto), se me abra un menú vertical con una serie de links (uno debajo de otro). Se debería cerrar el menú al pinchar en el mismo icono o fuera (si son posibles las 2 mucho mejor).

Graciasss ;)

PD: uno de los problemas que tengo con la jquery es que para lanzarla no debo usar el <body... OnLoad> ya que uso iframes y tal y como lo tengo diseñado no me va a funcionar. Quizá se podría lanzarla desde dentro del iframe con alguna instrucción que no sea OnLoad.

[daPhyre]

Hacerlo con imágenes es lo mismo que con texto. Solo incluye la IMG dentro del LI.

Creo que existe una función onload para los iFrame, pero... ¿Qué es lo que tienes dentro? Espero no sea tu página, ya que eso no se estila hoy día por varios motivos, principalmente accesibilidad y posicionamiento...

[humanista]

Vaya... pues yo pensaba que los iframe aún se usaban aunque es cierto q para el posicionamiento no son buenos.
El tema es que necesito un menú fijo horizontal y nada de lo q probé me funcionó, sólo el iframe pero es cierto que con iframes se hace más difícil programar...
Vale, lo de meter la imagen en el <li> ya lo probé pero nada... hice algo así

Código HTML:

<ul>
   <li><img src=....>
 

y nada... ;(

[kseso?]

@Humanista

Un menú con imágenes es lo mismo que con texto en sus opciones o ambos:
ul/li --> a (texto o img o ambos)

Creo que debería ser más explícita:
Navegadores y versiones para los que necesita.
Despliegue de las opciones (debajo, a la derecha, izquierda... de la de primer nivel)
Y lo que es más importante: sus códigos css+html implicados.

Con ello tendríamos una base común sobre l que responder y proponer solucciones.

Y ahora sí estoy de acuerdo con la opinión de daPhyre sobre los iframes.


Edito y amplío:
http://bit.ly/nMxKG1
Mire el ejemplo de ese tuit. No se si se ajustará a lo que necesita. Pero es un buen ejemplo.
Note que las flechas de la izquierda (triángulo invertido) son imágenes.

[humanista]

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:

<script type="text/javascript" src="menudesplegableaccesible.js"></script>
<link href="estilosmenu.css" rel="stylesheet" type="text/css" />
<link type="text/css" title="estilosMenusinjs" rel="stylesheet" href="estilosmenusinjs.css" />
 
<ul id="menu">
  <li><b>XML</b><img src="icono.gif">
    <ul>
      <a href="#">Historia</a><br>
      <a href="#">Especificaci&oacute;n</a><br>
      <a href="#">Esquemas XML</a><br>
      <a href="#">XML DOM</a><br>
    </ul>
  </li>
</ul>
<div id="contenidos">
<script type="text/javascript">
    iniciaMenu();
</script>
</div>
 

__________________________________________________ ___

Código Javascript:

/****************************************************************************
Menú desplegable accesible. 05-10-06
Autor: tunait http://javascript.tunait.com/ [email protected]
Script de libre uso mientras se mantengan los créditos de autor intactos.
No permitida su re-distribución.
*****************************************************************************/
var retardoEnCerrar = 5000
var menuActivo = false
var zindex = 1000
var tiempoCierre
function nodoHijo(obj){
    if(obj.hasChildNodes){
        for(m=0; m<obj.childNodes.length; m++){
            if(obj.childNodes[m].nodeType == 1 && obj.childNodes[m].tagName.toLowerCase() == 'ul') {
                return obj.childNodes[m]
                break
            }
        }
    }
}
function recorre(elems, obj){
    for(s=0; s<elems-1; s++){
        if(obj.childNodes[s].nodeType == 1 && obj.childNodes[s].tagName.toLowerCase() == 'li'){
            alert(obj.childNodes[s].tagName + ": " + obj.childNodes[s].childNodes.length)
        }
    }
}
    H = document.documentElement.childNodes[0]
    tagLink = document.createElement('link')
    tagLink.type = "text/css"
    tagLink.rel = "stylesheet"
    tagLink.href = "estilosmenujs.css"
    H.appendChild(tagLink)
function iniciaMenu(){
    for(s in document.getElementsByTagName('link')){
        hoja = document.getElementsByTagName('link')[s]
        if(hoja.title == 'estilosMenusinjs') hoja.disabled = true
        if(hoja.title == 'estilosMenujs') hoja.disabled = false
 
    }
    /*if(document.styleSheets && document.styleSheets.length > 0){*/
    for(s in document.styleSheets){
        hoja = document.styleSheets[s]
        if(hoja.title == 'estilosMenusinjs') hoja.disabled = true
        if(hoja.title == 'estilosMenujs') hoja.disabled = false
    }
    Menu = document.getElementById('menu')
    as = document.getElementById('menu').getElementsByTagName('a')
    for(var m in as){
        as[m].className = 'menuSecundario'
    }
    li = document.getElementById('menu').getElementsByTagName('li')
    for(m in li){
        if(li[m].parentNode == Menu){
            li[m].firstChild.className = 'menuSecundario'
            li[m].style.cssFloat  = 'left'
            li[m].style.styleFloat  = 'left'
            }
    }
    uls = document.getElementById('menu').getElementsByTagName('ul').length
    for(m=0; m < uls ; m++){
        ul = document.getElementById('menu').getElementsByTagName('ul')[m]
        if(ul.parentNode.parentNode == Menu){
            ul.parentNode.style.cssFloat  = 'left'
            ul.parentNode.style.styleFloat  = 'left'
            ul.parentNode.firstChild.className = 'menuPrincipal'
            ul.parentNode.firstChild.style.cursor = 'pointer'
            if(ul.parentNode.firstChild.nodeName.toLowerCase() != 'a'){
                txt = ul.parentNode.firstChild.firstChild.nodeValue
                lin = document.createElement('a')
                lin.href = '#menu'
                lin.className = 'menuPrincipal'
                lin.title ="Haga click para abrir más opciones";
                lin.appendChild(document.createTextNode(txt))
                ul.parentNode.replaceChild(lin,ul.parentNode.firstChild)
            }
        }
        else{
            if(ul.parentNode.firstChild.nodeName.toLowerCase() != 'a'){
                txt = ul.parentNode.firstChild.firstChild.nodeValue
                lin = document.createElement('a')
                lin.href = '#menu'
                lin.className = 'menuSecundario'
                lin.title ="Haga click para abrir más opciones";
                lin.appendChild(document.createTextNode(txt))
                ul.parentNode.replaceChild(lin,ul.parentNode.firstChild)
            }
        }
        ul.style.visibility = 'hidden'
        ul.style.position = 'absolute'
        ul.className = 'cajaMenuDesp'
        ul.parentNode.firstChild.style.display = 'block'
        ul.parentNode.style.zIndex = zindex--
        ul.parentNode.firstChild.title ="Haga click para abrir más opciones"
        ul.parentNode.firstChild.setAttribute('visible','off') //atributo en A
        if(ul.offsetParent && ul.parentNode.parentNode != Menu){
            posIzq = 0
            derecha = 0
            ul2 = ul
            while(ul2 = ul2.offsetParent){
                posIzq += ul2.offsetLeft
            }
            anchoDoc = document.body.offsetWidth
            derecha = anchoDoc - (posIzq + ul.offsetWidth)
            if(derecha < 0) ul.style.marginLeft = derecha + "px"
        }
        ul.parentNode.firstChild.onclick = function(){ //click en el A
            hijo = nodoHijo(this.parentNode) //devuelve el UL del LI
            if(this.parentNode.parentNode == Menu){
                actMenus(this, hijo)
            }
            else{
                actSubMenus(this, hijo)
            }
            return false
        }
    }
        Menu.onmouseover = function(){
            menuActivo = true
        }
        Menu.onmouseout = function(){
            menuActivo = false
            clearTimeout(tiempoCierre)
            tiempoCierre = setTimeout('cierraMenu()',retardoEnCerrar)
        }
 
    /*}*/
}
function actMenus(obj,hijo){
    var uls = document.getElementById('menu').getElementsByTagName('ul').length
    for(var m=0; m < uls ; m++){
        var ul = document.getElementById('menu').getElementsByTagName('ul')[m]
        ul.style.visibility = 'hidden'
        ul.parentNode.firstChild.className = 'menuPrincipal'
        ul.parentNode.firstChild.title="Haga click para mostrar más opciones"
        if(ul.parentNode.firstChild == obj) continue
        ul.parentNode.firstChild.setAttribute('visible','off')
    }
    if(obj.getAttribute('visible') == 'off'){
                hijo.style.visibility = 'visible'
                obj.setAttribute('visible','on')
                obj.className = 'menuSeleccionado'
                obj.title = "Haga click para ocultar las opciones"
            }
    else{
        hijo.style.visibility = 'hidden'
        obj.setAttribute('visible','off')
        obj.className = 'menuPrincipal'
        obj.title = "Haga click para mostrar más opciones"
    }
    obj.focus()
}
 
 
function actSubMenus(obj, hijo){
    ulspadre = obj.parentNode.parentNode
    var uls = ulspadre.getElementsByTagName('ul').length
    for(var m=0; m < uls ; m++){
        var ul = ulspadre.getElementsByTagName('ul')[m]
        ul.style.visibility = 'hidden'
        ul.parentNode.firstChild.className = 'menuPrincipal'
        ul.parentNode.firstChild.title="Haga click para mostrar más opciones"
        if(ul.parentNode.firstChild == obj) continue
        ul.parentNode.firstChild.setAttribute('visible','off')
    }
    if(obj.getAttribute('visible') == 'off'){
                hijo.style.visibility = 'visible'
                obj.setAttribute('visible','on')
                obj.className = 'menuSeleccionado'
                obj.title = "Haga click para ocultar las opciones"
            }
    else{
        hijo.style.visibility = 'hidden'
        obj.setAttribute('visible','off')
        obj.className = 'menuPrincipal'
        obj.title = "Haga click para mostrar más opciones"
    }
    obj.focus()
}
function cierraMenu(){
    if(!menuActivo){
        var uls = document.getElementById('menu').getElementsByTagName('ul').length
        for(var m=0; m < uls ; m++){
            var ul = document.getElementById('menu').getElementsByTagName('ul')[m]
            ul.style.visibility = 'hidden'
            ul.parentNode.firstChild.className = 'menuPrincipal'
            ul.parentNode.firstChild.title="Haga click para mostrar más opciones"
            ul.parentNode.firstChild.setAttribute('visible','off')
        }
    }
}
 

___________________________

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

Código CSS:

#menu{
    font-family: verdana;
    padding-bottom: 25px;
    font-size: .9em;
    margin-left: auto;
    margin-right: auto;
    width: 560px;
}
#menu li{
    border: 1px solid #ffffff;
    list-style-type: none;
    min-width: 130px;
    width: 130px;
    position: relative;
    padding: 0 0px;
    font-weight: bold;
}
html > body #menu li{
    width: auto;
}
#menu li a{
    background-color: #6699FF;
    color: #ffffff;
}
#menu li ul {
    margin-left: 0;
    padding: 0;
    left: 0;
    background-color: #ffffff;
}
#menu li ul li{
    float: none;
    font-weight: normal;
}
#menu li ul li ul{
    margin-left: 20px;
    background-color: #ffffff;
}
#menu li a{
    color: #111199;
    text-decoration: none;
    display: block;
    margin: 0;
}
#menu li a:hover, #menu li a:focus{
    background-color: #C4D7FF;
}
#menu li ul a{
    background-color: #ffffff;
}
#menu li a.menuSeleccionado{
    background-color: #6699FF;
    border: 1px solid #cccccc;
    background-image: url(flecha1.png);
    background-position: 5px 4px;
    background-repeat: no-repeat;
    padding-left: 20px;
    white-space: nowrap;
    font-weight: bold;
    color: #ffffff;
}
#menu li a.menuPrincipal{
    font-size: 1em;
    border: 1px solid #6699FF;
    background-image: url(flecha.png);
    background-position: 5px 4px;
    background-repeat: no-repeat;
    padding-left: 20px;
    display: block;
    white-space: nowrap;
    font-weight: bold;
    
    
}
#menu li ul li a.menuPrincipal, #menu li ul li a.menuSeleccionado{
    width: 100%;
}
.cajaMenuDesp{
    padding: 0;
    
}
.menuSecundario{
    font-size: 1em;
    border: 1px solid #6699FF;
    background-position: 5px 4px;
    background-repeat: no-repeat;
    padding-left: 20px;
    display: block;
    min-width: 130px;
    width: 100%;
    white-space: nowrap;
    background-color: #ffffff;
}
p{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
 

[kseso?]

Lo siento Humanista

Si participé en el tema (en un foro de css) fue para indicarle que también son posibles y funcionales menús desplegables activados al hover construidos sólo con css. Sin necesitar de js.
Y así le enlacé 2 páginas que contienen multitud de ejemplos al respecto.

Pero si al final su realización está basada en el uso de otros lenguajes me quedo totalmente fuera de la discusión por mi ignorancia sobre el particular.
También el tema sale de las competencias de este foro y debería pasar al correspondiente. Creo.