• Viernes 3 de Mayo de 2024, 13:12

Autor Tema:  Menus Desplegables  (Leído 2182 veces)

angel_del_madrid

  • Nuevo Miembro
  • *
  • Mensajes: 10
    • Ver Perfil
Menus Desplegables
« en: Miércoles 6 de Junio de 2007, 07:38 »
0
Hola:
          muchachos, alguno podria cederme y explicarme de paso, algun codigo que me sirva para generar menus desplegables, de forma que no tenga que alargar tanto mi pagina, ya que requiere demasiados link, sino que pueda agruparlos bajo un criterio y que se me desplieguen tal como los JMenuItem en java.???

Yo no se nada de JavaScript, pero me han dicho que puedo encontrar la solucion a ese problema mediante este lenguaje.


Saludos B)  :kicking:

shadow_rev

  • Miembro MUY activo
  • ***
  • Mensajes: 397
  • Nacionalidad: co
  • Un SPARTAN no muere en combate
    • Ver Perfil
    • http://shadowrev.blogspot.com
Re: Menus Desplegables
« Respuesta #1 en: Miércoles 6 de Junio de 2007, 18:02 »
0
El adjunto es un ejemplo que le hice a un amigo...

Simplemente dentro de div 's le introduces los items del menu que necesites y declaras los eventos de la siguiente manera:
<!--html--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><!--html1--><div id="menu1" onMouseOver="document.getElementById('enlaces').style.display='block'" onMouseOut="document.getElementById('enlaces').style.display='none'"><!--html2--></td></tr></table><div class='postcolor'><!--html3-->

Puedes construir una estructura jerárquica con divs conteniendo otros divs y le introduces en los eventos onMouseOver y onMouseOut las acciones que ocultan y despliegan.

Fácil, no?
El mensaje contiene 1 archivo adjunto. Debes ingresar o registrarte para poder verlo y descargarlo.
Volará quien le ponga alas a sus sueños (Candidate for goddess)
Si el mal existe en este mundo, reside en el corazón de la humanidad (Edward D. Morrison - Tales of Phantasia)
Lo único que puedes cambiar del pasado, es lo que sientes por él en el presente (Lockon Stratos - Mobile Suit Gundam 00)
Ingeniero de Sistemas

maldicion

  • Miembro activo
  • **
  • Mensajes: 47
    • Ver Perfil
Re: Menus Desplegables
« Respuesta #2 en: Miércoles 6 de Junio de 2007, 23:50 »
0
hola aqui te mando uno encontre en una pagina solo que no recuerdo el nombre

<style>
    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}
    a:hover {text-decoration: none;}
</style>

<style>
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">

var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

function change(){
   if(!document.all)
      return
   if (event.srcElement.id=="foldheader") {
      var srcIndex = event.srcElement.sourceIndex
      var nested = document.all[srcIndex+1]
      if (nested.style.display=="none") {
         nested.style.display=''
         event.srcElement.style.listStyleImage="url(open.gif)"             
      }
      else {
         nested.style.display="none"
       event.srcElement.style.listStyleImage="url(fold.gif)"
      }
   }  
}
document.onclick=change

//-->
</script>

<style type="text/css">
<!--
body {
   margin-top: 10px;
}
.Estilo14 {color: #003366}
.Estilo16 {
   font-size: 16px;
   font-weight: bold;
}
.Estilo17 {font-size: 12px}
-->
</style>

<!-- Colocar dentro de la etiqueta <BOBY> - cambia los enlaces y titulos por los de tu web-->
<ul>
      <font face="Arial, Helvetica, sans-serif" size="-1"><a href="#" class="InstantLink Estilo17"><li id="foldheader">Identidad</li></a></font>
      <ul id="foldinglist" style="display:none" style=&{head};>
         <li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="nuestra_historia.htm" target="mainFrame"><b><u>Nuestra Historia</u></b></a></font></li>
         <li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="mision_vision.htm" target="mainFrame"><b>Mision y Vision</b></a></font></li>
         <li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="valores.htm" target="mainFrame"><b>Valores</b></a></font></li>
         <li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="codigo_conducta.htm" target="mainFrame"><b>Código de Conducta</b></a></font></li>
         <li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="manuales.htm" target="mainFrame"><b>Manuales de Identidad</b></a></font></li>
      </ul>
   </ul>
</head>
<body background="imagenes/fondomenu.gif">
<center>
  <br>
  <p  style="color:#333333">
      <label><font face="Arial, Helvetica, sans-serif" size="-1">Buscar en el Sitio</font></label><br>
      <input type="text" name="textfield" size="15" >
     <input name="buscar" type="button" value="IR" size="8" style="font-size:12px">
  </p>
</center>
</body>
</html>

angel_del_madrid

  • Nuevo Miembro
  • *
  • Mensajes: 10
    • Ver Perfil
Re: Menus Desplegables
« Respuesta #3 en: Martes 12 de Junio de 2007, 21:19 »
0
Gracias, me ha servido.
Pudieras decirme como evito que el link se me habra en una nueva ventana, que parte del codigo de arriba debo modificar para que la nueva pagina salga en la misma ventana.
Disculpen la ignorancia
Saludos

Avalon

  • Miembro MUY activo
  • ***
  • Mensajes: 448
    • Ver Perfil
Re: Menus Desplegables
« Respuesta #4 en: Miércoles 13 de Junio de 2007, 13:22 »
0
Puedes quitar la parte que está en negrita o sustituirla por target="_self"

Citar
<li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="nuestra_historia.htm" target="mainFrame"><b><u>Nuestra Historia</u></b></a></font></li>
<li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="mision_vision.htm" target="mainFrame"><b>Mision y Vision</b></a></font></li>
<li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="valores.htm" target="mainFrame"><b>Valores</b></a></font></li>
<li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="codigo_conducta.htm" target="mainFrame"><b>Código de Conducta</b></a></font></li>
<li><font face="Arial, Helvetica, sans-serif" size="-1"><a class="InstantLink" href="manuales.htm" target="mainFrame"><b>Manuales de Identidad</b></a></font></li>


Salu2,
Avalon

angel_del_madrid

  • Nuevo Miembro
  • *
  • Mensajes: 10
    • Ver Perfil
Re: Menus Desplegables
« Respuesta #5 en: Jueves 14 de Junio de 2007, 16:31 »
0
Gracias de nuevo. :kicking: