menu de despliegue

xlos_mas_pro · #1 (**permalink**) 21/09/2011, 16:42

hola bueno si se hacer un menu de despliegue pero quiero saber como puedo hacer que para que se abra aya que darle clik y para cerrarce tambien

cristian_cena · #2 (**permalink**) 21/09/2011, 17:47

El evento "onclick" no puede capturarse con css (salvo algunos trucos que podrás encontrar en araudi.net). Podrías usar un interruptor, en jquery (librería javascript) hay un método que te puede ser útil: toggle();
Aquí un ejemplo simple ;)

Saludos.

IsaBelM · #3 (**permalink**) 22/09/2011, 08:18

yo, antes de usar un librería, probaría con

Cita:

function fnc(cual) {
obj = document.getElementById(cual);
obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
}

cristian_cena · #4 (**permalink**) 22/09/2011, 09:55

Adaptando al ejemplo anterior tendrías que:

Código HTML:

Ver original<ul>
    <li class="top">
        <a href="#" id="item">item 1</a>
        <ul id="cont">
            <li><span>item 1.1</span></li>
            <li><span>item 1.2</span></li>
        </ul>
    </li>
    <li><span>item 2</span></li>
</ul>

Código Javascript:

Ver originalvar item = document.getElementById("item");
var cont = document.getElementById("cont");
item.onclick = function(){
cont.style.display = (cont.style.display == 'none') ? 'block' : 'none';
}

Aunque perdes mucha potencia si lo haces "a pelo" salvo que estés dispuesto a escribir mucho :)

IsaBelM · #5 (**permalink**) 22/09/2011, 13:45

no hay que escribir tanto y no se pierde nada de potencia. con esto prácticamente lo único que hay que hacer es agregar mas opciones al menú y editar el css a conveniencia

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}

#navigation > li:hover {
cursor:pointer;
border: 1px solid #eee;
}

#navigation li > ul {
display: none;
}
</style>
</head>
<body>
<div id="menu">
* * <ul id="navigation">
* * * * <li>Coches
* * * * * * <ul>
* * * * * * * * <li><a href="#">Seat</a></li>
* * * * * * * * <li><a href="#">Fiat</a></li>
* * * * * * * * <li><a href="#">Mercedes</a></li>
* * * * * * </ul>
* * * * </li>
* * * * <li>Motos
* * * * * * <ul>
* * * * * * * * <li><a href="#">Yamaha</a></li>
* * * * * * * * <li><a href="#">Honda</a></li>
* * * * * * * * <li><a href="#">JJ Cobas</a></li>
* * * * * * </ul>
* * * * </li>
* * * * <li>Bandas
* * * * * * <ul>
* * * * * * * * <li><a href="#">Extremoduro</a></li>
* * * * * * * * <li><a href="#">Barricada</a></li>
* * * * * * * * <li><a href="#">Ñu</a></li>
* * * * * * </ul>
* * * * </li>
* * * * <li>Redes Sociales
* * * * * * <ul>
* * * * * * * * <li><a href="#">Facebook</a></li>
* * * * * * * * <li><a href="#">Hi5</a></li>
* * * * * * * * <li><a href="#">Twitter</a></li>
* * * * * * </ul>
* * * * </li>
* * </ul>
</div>
<script type="text/javascript">
function addListener(element, type, expression, bubbling)
{
bubbling = bubbling || false;

if(window.addEventListener) {
element.addEventListener(type, expression, bubbling);
return true;
} else if(window.attachEvent) {
element.attachEvent('on' + type, expression);
return true;
} else return false;
}

elem = document.getElementById('menu').firstChild;
while(true){
switch(elem.nodeName){
case 'UL':
elem = elem.firstChild;
break;
case 'LI':
addListener(elem, 'click', function(e){
childElem = this.firstChild;

// <-- Evitar que cuando se pulse sobre los hijos (submenus) se cierren -->

var event = e || window.event;
if(!event.target){
event.target = event.srcElement;
}
if(this != event.target){
//alert(this + ' - ' + event.target)
return false;
}
// <-- Fin -->

while(true){
if(childElem.nodeName == 'UL'){
break;
}
* * * * * * *
childElem = childElem.nextSibling;
if(childElem == null){ break; }
}
if(childElem != null){
childElem.style.display = childElem.style.display == 'block' ? 'none' : 'block';
}
});
break;
}
elem = elem.nextSibling;
if(elem == null){ break; }
}
</script>
</body>
</html>

cristian_cena · #6 (**permalink**) 22/09/2011, 14:13

Cita:

Iniciado por IsaBelM

no hay que escribir tanto

pues, acabas de escribir una biblia cuando con jquery lo escribes en dos lineas XD.

Cita:

Iniciado por IsaBelM

no se pierde nada de potencia.

No probé tu código pero apuesto a que no se desliza (salvo que escribas a mano una función para eso lo que contradice tu primer argumento XD) y que decir de las posibilidades de selección de nodos.

En fín, cada cual con su cada quien.

IsaBelM · #7 (**permalink**) 22/09/2011, 14:32

es verdad que puede dar la falsa impresión que se ha de usar mucho código para hacer algo tan sencillo, pero en realidad no es así. habría que escribir miles de líneas de código para llegar alcanzar el peso que tiene la librería

no subestimes las posibilidades de javascript

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
#capa1 {
width: 70px;
height: 70px;
background-color: yellow;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('capa1').onclick = creaIntervalo;
}

window.onload = function() {
var capa = document.getElementById('capa1');
if(capa.addEventListener) {
capa.addEventListener('click', function() {
//alert(document.defaultView.getComputedStyle(capa, null).getPropertyValue('width'));
creaIntervalo(this.id, document.defaultView.getComputedStyle(capa, null).getPropertyValue('width'), // getComputedStyle() todos excepto ie8-
document.defaultView.getComputedStyle(capa, null).getPropertyValue('height')
)},
false
);
} else {
capa.attachEvent('onclick', function() {
//alert( document.styleSheets[0].rules[0].style['width']);
creaIntervalo(capa.id, document.styleSheets[0].rules[0].style['width'],
document.styleSheets[0].rules[0].style['height']
)}
);
}
}

function creaIntervalo(elem, w_bloque, h_bloque) {
var bloque = document.getElementById(elem);
var w_bloque = w_bloque;
var h_bloque = h_bloque;

if (typeof(boleano) == "undefined" || boleano == 0) {
boleano = 1;
despliega(bloque, w_bloque, h_bloque);
}else{
boleano = 0;
repliega(bloque, w_bloque, h_bloque);
}
}

function despliega(bloque, w, h) {
var ancho = parseInt(w);
var largo = parseInt(h);

if (ancho <= 210) {
ancho +=3;
bloque.style.width = ancho + 'px';
var intervalo = setTimeout(function(){despliega(bloque, ancho, largo)}, 8);
} else if (largo <= 210) {
largo += 3;
bloque.style.height = largo + 'px';
var intervalo = setTimeout(function(){despliega(bloque, ancho, largo)}, 8);
} else {
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[0].style['width'] = ancho + 'px';
document.styleSheets[0].rules[0].style['height'] = largo + 'px';
}
clearTimeout(intervalo);
}
}

function repliega(bloque, w, h) {
var ancho = parseInt(w);
var largo = parseInt(h);

if (largo >= 73) {
largo -= 3;
bloque.style.height = largo + 'px';
var intervalo = setTimeout(function(){repliega(bloque, ancho, largo)}, 8);
} else if (ancho >= 73) {
ancho -=3;
bloque.style.width = ancho + 'px';
var intervalo = setTimeout(function(){repliega(bloque, ancho, largo)}, 8);
} else {
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[0].style['width'] = ancho + 'px';
document.styleSheets[0].rules[0].style['height'] = largo + 'px';
}
clearTimeout(intervalo);
}
}
</script>
</head>
<body>

<div id="capa1">pulsa aquí!!<br /><br /><br /><br />Este texto no lo habías visto<br /><br /><br />pulsa otra vez!!</div>

</body>
</html>

cristian_cena · #8 (**permalink**) 22/09/2011, 16:01

uf isabel, disculpame, me aburrí

C2am · #9 (**permalink**) 23/09/2011, 00:31

Están buenos sus debates chicos (Isabel - Cristian), pero me parece que al ser el foro de css habría que apuntar hacia una solución en css, o en su defecto solicitar que sea movido al foro de javascript.
De todas formas, debo decir que estoy aprendiendo mucho de javascript :) gracias.
Saludos

xlos_mas_pro · #10 (**permalink**) 30/09/2011, 19:23

gracias cristian_cena y IsaBelM me han servido de mucha ayuda y cristian_cena me e quedado con el codigo de isabel por que entiendo yo el codigo y prefiero entenderlo que tener una libreria que no entienda y cuando ocurra algun problema estar viendo miles de lineas que no se que son
pero igual probare con la libreria ya que no solo es para los menus trae mas opciones gracias a los dos

xlos_mas_pro · #11 (**permalink**) 30/09/2011, 19:30

haa y otra cosa cristian_cena me complica ese sitio de jquery ya que nunca se de donde descargo la libreria
jajajajja

tunait · #12 (**permalink**) 03/10/2011, 06:01

¿y no serviría usar el momento "focus" desde css?

IsaBelM · #13 (**permalink**) 03/10/2011, 15:12

Cita:

Iniciado por tunait

¿y no serviría usar el momento "focus" desde css?

ya aprovecho para trasladarte mi duda a ti también