Temas > Programacion > Java script - Java > Menu desplegable en jQuery
Julio

Menú desplegable
Confeccionaremos una página que muestre un menú 
desplegable utilizando listas.
pagina1.html
<?php //esto no va
 <html>
 <head>
 <title>Problema</title>
 <link rel="StyleSheet" href="estilos.css" type="text/css">
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript" src="funciones.js"></script>
 </head>
 <body>
 <div id="menu">
 <ul>
 <li><a href="http://www.google.com.ar">Google</a></li>
 <li><a class="imagen" href="#">Periódicos</a>
 <ul>
 <li><a href="http://www.lanacion.com.ar">La Nación</A></li>
 <li><a href="http://www.clarin.com.ar">El Clarín</A></li>
 <li><a href="http://www.lavoz.com.ar">La Voz</a></li>
 </ul>
 </li>
 <li><a class="imagen" href="#">Lenguajes</a>
 <ul>
 <li><a href="http://www.php.net">PHP</a></li>
 <li><a href="http://www.rubyonrails.org">Ruby on
 rails</a></li>
 <li><a href="http://www.python.org">Python</a></li>
 </ul>
 </li>
 <li><a href="http://www.msn.com">MSN</a></li>
 </ul>
 </div>
 </body>
 </html>
?>//esto no va
estilos.css
<?php //esto no va
 #menu {
   font-family: Arial;
   margin:0px;
   padding:0px;
 }
 #menu ul {
   margin:0px;
   padding:0px;
   list-style-type:none;
 }
 #menu a {
   display: block;
   padding: 3px;
   width: 160px;
   background-color: #f7f8e8;
   border-bottom: 1px solid #eee;
   text-align:center;
 }
 .imagen {
   background-image:url(../triangulo.jpg);
   background-position:top left;
   background-repeat:no-repeat;
 }
 #menu a:link, #menu a:visited {
   color: #f00;
   text-decoration: none;
 }
 #menu a:hover {
   background-color: #369;
   color: #fff;
 }
 #menu li ul li a{
   display: block;
    padding: 3px;
    width: 160px;
    background-color: #ffa;
    border-bottom: 1px solid #eee;
    text-align:center;
 }
 ul li ul a:link, ul li ul a:visited {
    color: #000;
    text-decoration: none;
 }
 ul li ul a:hover {
    background-color: #369;
    color: #fff;
 }
?>//esto no va
funciones.js
<?php //esto no va
 $(document).ready(function() {
    $("#menu").children().children("li").each(function () {
      if ($(this).find("ul").size()!=0)
           $(this).find("ul").hide();
    });
    $("a").click(function(e) {
           if ($(this).parent().find("ul").size()!=0)
           {
             if ($(this).parent().find("ul").css("display")=="none")
               $(this).parent().find("ul").show();
             else
               $(this).parent().find("ul").hide();
           }
    })
 })
?>//esto no va
Obtenemos la referencia del elemento "ul" hijo del 
elemento con id=#menu, seguidamente obtenemos la referencia 
de todos los elementos "li" hijos que dependen directamente del 
"ul" e iteramos con el método each:
<?php //esto no va
   $("#menu").children().children("li").each(function () {
Dentro de la función de iteración obtenemos la referencia 
de todos los elemento "ul" que tienen elementos hijo 
(es decir submenú) y procedemos a ocultar dichos "ul":
     if ($(this).find("ul").size()!=0)
          $(this).find("ul").hide();
?>//esto no va
Cuando se hace click sobre algún elemento "a", verificamos si 
el elemento padre tiene elementos "ul" y procedemos a ocultar 
o mostrar el submenú según el valor de la propiedad display:
<?php //esto no va
   $("a").click(function(e) {
   if ($(this).parent().find("ul").size()!=0)
   {
       if ($(this).parent().find("ul").css("display")=="none")
          $(this).parent().find("ul").show();
       else
          $(this).parent().find("ul").hide();
   }
})
?>//esto no va













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google






LunMarMieJueVieSabDom
     12
34567 89
10111213141516
17181920212223
2425262728  

Sabado 8 de Febrero 2025
Semana 06



Java script - Java


-Input type submit con evento onclick
-Maneras de salir de un iframe con java script
-Sintaxis de un list array en java
-Consumir un JSON desde PHP
-Producir JSON desde PHP
-Mostrar un tooltip con datos recuperados en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Funcion ajax en jQuery
-JSON en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Ajax metodo load en jQuery
-Iteracion por los elementos each en jQuery
-Efecto con el metodo toggle en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efectos con los metodos show y hide en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Evento blur en jQuery
-Evento focus en jQuery
-Evento dblclick en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento mousemove en jQuery
-Evento hover en jQuery
-Eventos mouseover y mouseout en jQuery
-Administracion de eventos con jQuery
-Metodos html y html valor en jQuery
-Metodos addClass y removeClass en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos text, text valor en jQuery
-Seleccion de elementos con la clase CSS definida
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos por el tipo de elementos jQ
-Seleccion de un elemento mediante el id jQuery
-Nueva manera de programar JavaScript con jQuery
-Que es el jQuery
-Archivo JavaScript externo
-Propiedad screen del objeto window en java script
-Propiedad location de objeto window en java script
-El objeto window en java script
-Eventos onMouseOver y onMouseOut en java script
-Eventos onFocus y onBlur en java script
-Control TEXTAREA en java script
-Control RADIO en java script
-Control CHECKBOX en java script
-Control SELECT en java script
-Control PASSWORD en java script
-Controles FORM, BUTTON y TEXT en java script
-Formularios y Eventos en java script
-Clase Math en java script
-Clase String en java script
-Clase Array en java script
-Clase Date en java script
-Programacion orientada a objetos en java script
-Funciones que retornan un valor en java script
-Funciones con parametros en java script
-Funciones en java script
-Estructura repetitiva for en java script
-Estructura repetitiva do while en java script
-Concepto de acumulador en java script
-Estructura repetitiva (while) en java script
-Operadores logicos or en las estructuras java s
-Operadores logicos (and) en las estructuras java s
-Estructuras condicionales anidadas en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales simples en java script
-Estructuras secuenciales en java script
-Entrada de datos por teclado en java script
-Variables en java script
-Que es JavaScript
-Lectura y escritura de archivos en java
-Entrada y salida estandar en Java
-Programa para contar vocales de un fichero en java
-Convertidor de divisas en java
-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal