jquery – Desarrollando un menu desplegable

Bueno hoy me pasaron el libro VISUAL QUICK start GUIDE jquery y en verdad deo de confesar que de javaScript y de esta libreria solo hacia copiar y pegar codigo hecho por otra persona pero ahora si que si no aprendo jquery con este ya me pase de bestia es que en verdad este libro es muy sencillo de comprender se lo recomiendo a quien quiera aprender esta libreria.

Bueno como siempre empece con lo basico (copiar y pegar codigo de los ejemplos) pero se me vino a la mente despues de probar los ejemplos de hide y show que me haria un menu y pues eso hice en verdad pense que me hiva a costar mucho mas trabajo pero este libro si que lo tiene todo facil.

Manos a la obra:

Primero antes de empezar quiero dejar en claro que no soy diseñador asi que no juzgen los colores ni cosas similares.

Entendamos algunas cosas de Jquery para referenciar cualquier elemento de la pagin en Jquery se tiene que hacer algo como:

$(“iddelobjeto”) : seria algo como $(“#divmenu”) si me refiero a un elemento con la propiedad ID seteada como #divmenu.

 $(“tipodeelemento”): Seria algo como $(“ul”) o $(“div”) si me refiero a una lista o un div

Si quiero aplicarle algun efecto a un elemento de la pagina pues solo tengo que hacer algo asi:

$(“#divmenu”).hide(): esto lo oculta, clro puede poner un valor entre los parentesis para que realice una desaparicion lenta, lo mismo hace el efecto show.

Ahora lo que yo necesitaba eran aparte de esos dos efectos, cesitaba conocer la poscio del elemento que se clickeo (el elemento del menu principal ) para asi poder desplegar los elementos del submenu para eso tenemos la propiedad offset de cualquier elemento de la pagina y no hay que dejar de mencionar que se tiene que enlazar (bind) los eventos hacia una funcion en mi caso del objeto que controla el menu principal.

Cuando se enlaza un objeto de la pagina a un evento a esa funcion que va a jecutarse siempre que se ejecute el evento se le pasa un argumento llamado event que contiene toda la informacion del objeto que lo llamo y se pueden acceder a las propiedades de la manera siguiente event.target.id para el caso del ID (solo como ejemplo).

Tambien para mi caso necesitaba cambiar algunas propiedades del CSS para eso se usa la funcion de jquery llamada css que se trabaja de la manera siguiente: $(“tipodeelemento”).css(“propiedadcss”,”valorcss”);
como ejemplo: $(“#submenu”).css(“left”,”100px”);

En el caso de querer saber la posicion de un objeto seria $(“#submenu”).offset() esto en verdad devuelve un objeto con dos propiedades top y left.

Como van a ver para poder ocultar todos los submenus he creado una clase en css llamada submenus la cual se esconde cuando el documento termina de cargar

$(document).ready(function( ){
    $(‘div[class=”submenu”]’).hide(0);
})

, un div para el menu principal y se tiene que poner por ley para los div’s de los submenus el ID que se le puso al menu principal seguido por “sub” por que sino no podria ejecutar la funcion “clicker” y menos hacer que los submenus aparescan donde deben:

    $(‘#’+event.target.id+”sub”).css(“left”,posicion.left+”px”);
    $(‘#’+event.target.id+”sub”).css(“top”,posicion.top+22+”px”);
    $(‘#’+event.target.id+”sub”).css(“position”,”absolute”);

Pues creo que sin mas el codigo es el siguiente, ya que no existe mas que explicar:

<html>
<head>
<title>Creando u menu con Jquery</title>
<script type=”text/javascript” src=”jquery-1.3.2.min.js”> </script>
<script type=”text/javascript”>

$(document).ready(function( ){
   $(‘div[class=”submenu”]’).hide(0);
})

$(function( ){
    $(‘#navi’).bind(‘click’,clicker);
});
function clicker(event)
{
    $(‘div[class=”submenu”]’).hide(0);
    var posicion=$(‘#’+event.target.id).offset();
    $(‘#’+event.target.id+”sub”).css(“left”,posicion.left+”px”);
    $(‘#’+event.target.id+”sub”).css(“top”,posicion.top+22+”px”);
    $(‘#’+event.target.id+”sub”).css(“position”,”absolute”);
    $(‘ul[class=”navi1″]’).show(0);
    $(‘#’+event.target.id+”sub”).slideToggle();
}
</script>
<style>
    #navi {       list-style:none;  margin:0;   padding:0;}
    #navi li {    margin:1px; padding:0;  float:left;}
    #navi li a {  display:block; width:100px;  padding:4px 0;    text-decoration:none;  
                  text-align:center;      font-size:11px;   color:#FFFFFF;   
                  background-color:Red;}
    #navi li a:hover {  color:#99CC00;    background-color:#003366;}
    .navi1 {      list-style:none;  margin:0;   padding:0;}
    .navi1 li {   margin:0px; padding:0;  }
    .navi1 li a { display:block; width:100px;  padding:4px 0;    text-decoration:none;  
                  text-align:center;      font-size:11px;   color:#FFFFFF;   
                  background-color:#CCC;}
    .navi1 li a:hover { color:#99CC00;    background-color:#003366;}
    .submenu
    { background-color:Black;
      }
      #Div2{ background-color:Black;}
p.striped {
background-color: red;
}
</style>
</head>

<body>
<div id=”Div2″>

    <ul id=”navi”>
        <li ><a href=”#” id=”Menu1″ >Hola1</a></li>
        <li><a href=”#” id=”Menu2″>Hola</a></li>
        <li><a href=”#” id=”Menu3″>Hola</a></li>
        <li><a href=”#” id=”Menu4″>Hola</a></li>
        <li><a href=”#” id=”Menu5″>Hola</a></li>
        <li><a href=”#” id=”Menu6″>Hola</a></li>
    </ul>
</div>
<div id=”Menu1sub”>
<ul id=”Ul1″ >
    <li ><a href=”#” id=”A1″>Hola1</a></li>
    <li><a href=”#” id=”A2″>Hola</a></li>
    <li><a href=”#” id=”A3″>Hola</a></li>
    <li><a href=”#” id=”A4″>Hola</a></li>
    <li><a href=”#” id=”A5″>Hola</a></li>
    <li><a href=”#” id=”A6″>Hola</a></li>
</ul>
</div>

<div id=”Menu2sub”>
<ul id=”Ul2″ >
    <li ><a href=”#” id=”A7″>Hola1</a></li>
    <li><a href=”#” id=”A8″>Hola</a></li>
    <li><a href=”#” id=”A9″>Hola</a></li>
    <li><a href=”#” id=”A10″>Hola</a></li>
    <li><a href=”#” id=”A11″>Hola</a></li>
    <li><a href=”#” id=”A12″>Hola</a></li>
</ul>
</div>

</body>
</html>

Acerca de

Antes que nada voy a dejar en claro algo, en este blog escribo como se me place, asi que no busquen errores de ortografia o de redaccion que los van a encontrar a montones y tampoco me critiquen o me digan nada sobre ellos pues no tengo intencion alguna de cambiarlos, lo que escribo lo dejo asi y no lo corrijo,claro esta a menos que sean lineas de codigo. Jorge Prado Anci, profesional en desarrollo de aplicaciones, en especial las dirigidas a bases de datos. He trabajado con VFP en casi todas sus versiones, se algo de Java (que no me gusta, es eso solo no me gusta, es bueno pero no me gusta), lo suficiente de PHP como para tener mi propio CMS(es que sigue sin gustarme por la capacidad de desorden que te permite este “lenguaje”), VB lo conoci y lo deteste tanto que lo olvide al punto de no querer adoptar ni por obligacion a su reemplazante VB .NET (por lo mismo de Java) y si C# este si me encanta y aun que conozco bastante bien el lenguaje, la verdad es que me falta mucho del Framework (del 100% estare en un 65%). Soy un apasionado por el orden (en los proyectos de desarrollo), de la programacion en capas (de MVC conozco pero no he aplicado mucho), los estandares y las condenadas pruebas unitaria. Venga creo que ya con esto fue suficiente.

Tagged with: , , , ,
Publicado en AJAX
One comment on “jquery – Desarrollando un menu desplegable
  1. traduccion al cristiano, por favor, lo que a mi me gustaria hacer, es en el lado derecho, cerca de categorías, una que se llamase blog(eso lo puedo hacer) pero que al dar clic en ella salga un menú desplegable con una serie de blogs de amigos. como podría hacer eso? Responded (y muchas gracias)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevos mensajes por correo.

Únete a otros 441 seguidores

Blog Stats
  • 304,137 hits
A %d blogueros les gusta esto: