menu desplegable css

JoseAlejandro_Realza · #1 (**permalink**) 02/09/2009, 08:33

Hola, estoy trabajando en una pagina para editar los datos de una base de datos, y quiero que salgan 2 nombres, y al hacer clip a alguno de ellos, se despliegue su respectivo formulario, quiero que se utilize solo css, sin javascript. espero puedan ayudarme, yo tengo es esto, pero no es lo que quiero, espero puedan ayudarme

Código HTML:

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Switch menu</title>

<style type="text/css">

body {

text-align:center;

margin:30px;

}

#contenedor {
    width:220px;
    height:20px;
}
#bateador {
    background:#CECECE;
    width:220px;
    height:20px;
    font-family:Verdana;
    font-size:12px;
    text-align:right;
    
}
#bateador:hover {
    width:250px;
    height:200px;
}    
</style>

</head>

<body>


<div id="contenedor">
Nombre del Bateador
<div id="bateador">
<form action="index.php?accion=" method="post" name="form_jugador" onclick="this.hideFocus=true">
<label for="stNombre">
Nombre:
</label>
<input type="text" id="stNombre" name="stNombre" value="<?=$jugador[''];?>"onclick="this.hideFocus=true" />
<br />
<label for="floatAB">
AB:
</label>
<input type="text" id="floatAB" name="floatAB" value="<?=$jugador[''];?>" />
<br />
<label for="floatH">
H:
</label>
<input type="text" id="floatH" name="floatH" value="<?=$jugador[''];?>" />
<br />
<label for="floatHR">
HR:
</label>
<input type="text" id="floatHR" name="floatHR" value="<?=$jugador[''];?>" />
<br />
<label for="floatCA">
CA:
</label>
<input type="text" id="floatCA" name="floatCA" value="<?=$jugador[''];?>" />
<br />
<label for="floatCI">
CI:
</label>
<input type="text" id="floatCI" name="floatCI" value="<?=$jugador[''];?>" />
<br />
<label for="floatAVG">
AVG:
</label>
<input type="text" id="floatAVG" name="floatAVG" value="<?=$jugador[''];?>" />
</form>
</div>
</div>

</html>

cristian_cena · #2 (**permalink**) 02/09/2009, 11:30

Hola Jose:

Aclaro que no entiendo muy bien lo que quieres hacer pero a lo mejor este link de alexk te pueda servir: http://www.zoneartcss.com/css/menus-...-solo-con-css/
Aquí alexk enseña a crear un menú desplegable solo con css.

Saludos!

JoseAlejandro_Realza · #3 (**permalink**) 02/09/2009, 15:04

Gracias Cristian, pero no es eso lo que quiero, si pruebas el codigo que puse, es un div que al hacer hover, se expande, mi problema es que aunque este contraido, muestra la informacion, y yo quiero que solo muestre lo que tiene al esta activo el hover, antes no, un Saludo y Gracias

latindesign · #4 (**permalink**) 02/09/2009, 15:20

pues tienes estos 3 ejemplos muy bien logrados hechos por el usuario mikmoro

araudi.net/ejemplos/tabs_hover.html
araudi.net/ejemplos/tabs_activo.html
araudi.net/ejemplos/tabs_activo_visited.html

cristian_cena · #5 (**permalink**) 02/09/2009, 18:35

lamento no poder ayudarte Jose, no estoy a la altura de la pregunta

Saludos!

JoseAlejandro_Realza · #6 (**permalink**) 02/09/2009, 19:32

No te preocupes cristan, igual ayudastes... y Muchas gracias por esos datos, me seran muy utiles latindesign

kseso? · #7 (**permalink**) 03/09/2009, 09:43

Hola José Alejandro.
Es más efectivo que el código html publicado sea el generado por el navegador, y no el código de la programación (php o el que sea).

Te cuento la teoría para mostrar una consulta (la otra, sería igual, lógicamente) utilizando sólo css:

Creo que debes generar una lista (ul) donde dentro del primer elemento de la lista (li) colocarás el nombre, y los datos asociados a él en otra lista (ul/li).
La estructura html sería la siguiente:

Código html:

Ver original<ul>
     <li>Primer Nombre
          <ul>
                     <li> aquí los datos, que los puedes mostrar dentro de las etiquetas que necesites</li> <!-- final de los datos -->
          </ul><!-- cierre de la lista de los datos -->
     </li><!cierre del primer elemento -->
</ul>

Y con el css utilizando la pseudoclase .active hacer aparecer los datos.

En cualquiera de los enlaces que te han puesto antes los otros usuarios podrás ver los códigos más detallados.
Incluso, puedes pasar por www.cssplay.co.uk donde tienes multitud de ejemplos de listas desplegables compatibles con los distintos navegadores.

Un saludo