Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 2 de 2

Tema: Menu desplegable con Jquerry

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    01 abr, 11
    Mensajes
    3
    Poder de Reputación
    0

    Menu desplegable con Jquerry

    Espero que les sirva :

    Primero hay que definir el menu con sus respectivos submenu para eso voy a crear un grupo de ul y li dentro un div contenedor llamado “menu”.
    Código HTML:
    <div id="menu">
    <ul id="nav">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a>
            <ul class="submenu">
                <li><a href="#">Marketing</a>
                    <ul class="subsubmenu">
                        <li><a href="#">Precios</a></li>
                        <li><a href="#">Consultas</a></li>
                    </ul>
                </li>
                <li><a href="#">Mercadotecnia</a></li>
                <li><a href="#">Encuestas</a></li>
            </ul>
        </li>
        <li><a href="#">Nosotros</a>
            <ul class="submenu">
                <li><a href="#">Vision</a></li>
                <li><a href="#">Mision</a></li>
            </ul>
        </li>
        <li><a href="#">Otros</a></li>
        <li><a href="#">Contactanos</a></li>
    </ul>
    </div>

    Despues vamos a crear el escript

    Voy a usar una función muy sencilla que se va a encargar de mostrar los submenus:
    Código HTML:
    <script type="text/javascript">
    function mainmenu(){
    // Oculto los submenus
    $(" #nav ul ").css({display: "none"});
    // Defino que submenus deben estar visibles cuando se pasa el mouse por encima
    $(" #nav li").hover(function(){
        $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
        },function(){
            $(this).find('ul:first').slideUp(400);
        });
    }
    $(document).ready(function(){
        mainmenu();
    });
    </script>

    Ahora la hoja de estilos :

    Código HTML:
    * { padding:0px; margin:0px; }
    body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; }
    #menu { background-image:url(nav_bg.png); background-repeat:repeat-x; height:30px; width:500px; margin:auto; padding-left:70px; }
    #nav { list-style:none; }
    #nav li { float:left; background-image:url(nav_li_bg.png); background-repeat:no-repeat; background-position:right; }
    #nav li a { display:block; padding:7px 10px; text-decoration:none; color:#CCCCCC; font-weight:bold; }
    #nav li a:hover { color:#FFFFFF; }
    /* Submenu */
    #nav ul.submenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333;}
    #nav ul.submenu li { float:none; background-image:none; border-bottom:1px solid #999999; width:200px;}
    /* Subsubmenu */
    #nav ul.subsubmenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; margin-left:150px; margin-top:-30px;}
    #nav ul.subsubmenu li { float:none; background-image:none; border-bottom:1px solid #999999; min-width:200px;}
    No olviden de poner en la cabecera query-1.3.min.js

    ver el ejemplo :menu desplegable

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de lantiga
    Fecha de Ingreso
    23 feb, 11
    Mensajes
    905
    Poder de Reputación
    14
    Es una interesante aportación compañero; +1 de reputación.
    Suscribete a Los videotutoriales de Lantiga y podre hacer vídeos más largos y con mejor calidad.

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •