Deplegar y Contraer Menú

GeoAvila · #1 (**permalink**) 19/08/2005, 15:05

hola señores deseo hacer un menú deplegable como el que aparece en esta pagina..

http://www.desarrollaconmsdn.com/msd...ovb/index.html

ya estoy avanzando... llevo esto, es una consulta auna base de datos, pero deseo que el menu se depliegue y contraiga coomo lo puedo hacer esto es lo que llevo que no es mucho..

http://200.49.173.42/archivos/sitio/

alquien me puede dar un ejemplo de como hacer para un menu se pliegue y contraiga..

gracias por sus respuestas..

safe · #2 (**permalink**) 19/08/2005, 15:45

A mi parecer lo mejor es usar un poco de javascript con un poco de CSS para lograr el efecto que deseas.
Te dejo una ejemplo basico para que te des cuenta como seria la idea:

Código:

<html>
<head>
<style type="text/css">
<!--
   ul {display:inline;	margin:0}
   li {list-style: none;}
   ul.sub li {margin-left: 15px;}
   #algo, #otra {display: none;}
-->
</style>
<script type="text/javascript">
<!--
   function cambiar(que)
   {
      var sub = document.getElementById(que); 
      sub.style.display = sub.style.display == 'block' ? 'none' : 'block';
   }
-->
</script>
</head>
<body>
<ul>
   <li><a href="#" onClick="cambiar('algo')">algo</a></li>
   <li id="algo">
      <ul class="sub">
         <li>jkhkl</li>		
         <li>jkjkljkl</li>
         <li>kljhklhkl</li>
      </ul>
   </li>
   <li><a href="#" onClick="cambiar('otra')">otra cosa</a></li>
   <li id="otra">
      <ul class="sub">
         <li>df dsfsd f</li>		
         <li>dfg gfdg </li>
         <li>fgd fgfdg</li>
      </ul>
   </li>
</ul>
</body>
</html>

GeoAvila · #3 (**permalink**) 19/08/2005, 17:19

gracias te lo agradezco ya lo reviso..

nos vemos..

GeoAvila · #4 (**permalink**) 21/08/2005, 08:18

Hola mira este ejemplo estube perfecto pero quisiera saber de que manera cambian las imagenes de libro cerrardo a libro abierto

aqui tengo ya aplicado el ejemplo..

http://200.49.173.42/archivos/sitio/testmenu.php#

en este ejemplo ya le aplique php, pero solo me faltan las imagenes, como las presenta esta página

Código PHP:

  <?php

require("mysql.php"); 

$db_conexion= mysql_connect("$sql_host", "$sql_usuario", "$sql_pass") or die("No se pudo conectar a la Base de datos") or die(mysql_error());

mysql_select_db("$sql_db") or die(mysql_error());

$sql = "Select * From $sql_tabla";

$result = mysql_query($sql);

$total_menu = mysql_num_rows ($result);

if ($total_menu != 0) {

        $output = "";

       $Salida = "";

        while($row = mysql_fetch_array($result)){

                 $output .=  "#".$row['id_menu'].",";

                 }

        $output = substr($output, 0, -1);

        ?>

<html>

<head>

<style type="text/css">

<!--

   ul {display:inline;    margin:0}

   li {list-style: none;}

   ul.sub li {margin-left: 15px;}

   <? echo "$output";} ?> {display: none;}

-->

</style>

<script type="text/javascript">

<!--

   function cambiar(que)

   {

      var sub = document.getElementById(que); 

      sub.style.display = sub.style.display == 'block' ? 'none' : 'block';

   }

-->

</script>

</head>

<body>

 <?php 

$sql = "Select * From $sql_tabla";

$result = mysql_query($sql);

$total_menu = mysql_num_rows ($result);

if ($total_menu != 0) {

        $output = "";

       $Salida = "";

        while($row = mysql_fetch_array($result)){

        ?> <ul>

   <li><a href="#" onClick="cambiar('<? echo $row['id_menu'];?>')"><? echo $row['nombre_menu'];?></a></li>

   <li id="<? echo $row['id_menu'];?>">

      <ul class="sub">

         <li>jkhkl</li>        

         <li>jkjkljkl</li>

         <li>kljhklhkl</li>

      </ul>

<li>

                    <? 

                 }

}

?>

</body>

</html>

asi queda el código con php, pero necesito saber si me pudieras proporcinar solo el codigo para que los iconos se abran y se cierren.. como este link

http://www.desarrollaconmsdn.com/msd...ovb/index.html

Gracias...

zell[dv] · #5 (**permalink**) 21/08/2005, 08:44

y como seria para no tener que pulsar sobre la palabra para que te apareceria el menu, es decir pasas el raton encima y sale el menu y apartas el raton y desaparece el menu??

GeoAvila · #6 (**permalink**) 21/08/2005, 08:50

eso si no estoy mal se hace con mouseover en vez de onclick pero a mi me insteresa saber lo de la imagen, que les agradecería mucho...

Gracias..

zell[dv] · #7 (**permalink**) 21/08/2005, 08:58

no me va con mouseover :S como podria hacerlo

GeoAvila · #8 (**permalink**) 21/08/2005, 09:05

es con onMouseOver intenta.. lo que pasa es que le tenías que agregar el on pero asi funciona..

ahora si.. alguien que pudiera dar la respuesta de como hacer lo de la imagen..

les gradecería mucho para mi proyecto.. gracias..

nos vemos..

GeoAvila · #9 (**permalink**) 21/08/2005, 10:13

bueno.. dandome a la tarea de pensar un tanto queda algo asi..

Código HTML:

<html>
<head>
<style type="text/css">
<!--
   ul {display:inline;	margin:0}
   li {list-style: none;}
   ul.sub li {margin-left: 15px;}
   #1,#2 {display: none;}
-->
</style>
<script language="JavaScript">
<!--
function cambiaEstado(iden,el){
	  var elhtml = document.getElementById(iden);
  	  var elhtml2 = document.getElementById(el);
  if (elhtml.style.display == 'block'){
      elhtml.style.display = 'none';
      elhtml2.src = 'book.gif';
  }
  else{
       elhtml.style.display = 'block';
       elhtml2.src = 'bookopen.gif'; 
   }
   }
-->
</script>
</head>
<body>
  <ul>
   <li><a href="#" onClick="javascript:cambiaEstado('1','1')"><img id="c1" src="book.gif" width="16" height="15">Bienvenido</a></li>
   <li id="1">
      <ul class="sub">
         <li>jkhkl</li>		
         <li>jkjkljkl</li>
         <li>kljhklhkl</li>
      </ul>
<li>
   				  <ul>
   <li><a href="#" onClick="javascript:cambiaEstado('2','2')"><img id="c2" src="book.gif" width="16" height="15">Visual Basic 6.0</a></li>
   <li id="2">
      <ul class="sub">
         <li>jkhkl</li>		
         <li>jkjkljkl</li>
         <li>kljhklhkl</li>
      </ul>
<li>
   				 </body>
</html>

nos vemos..