jQuery Mega Drop Down Menu Plugin

jQuery Mega Drop Down Menú es un plugin jQuery que tiene un estándar HTML de lista anidadas convirtiéndolas en un mega menú horizontal y desplegable.

El plugin + un poco de CSS básico de los menús puede ser usado para crear la navegación única y atractiva para la vista de cualquier sitio Web.

Además de ser un poco más atractivo para el usuario, un mega menú tiene varias ventajas:

  • Todas las opciones visibles al mismo tiempo.
  • No hay maniobras de desplazamiento del ratón.
  • Utilizando el “click” la opción de los sub-menús permanecerá abierta hasta el cierre por el usuario.
  • Uso de las listas habituales de los grupos anidados puede ser fácilmente estructurados y formateados con CSS.

Funciones del megamenú Plugin:

  • Activación del submenú tras pasar el ratón o al hacer click.
  • Número de items por fila: seleccione el número de elementos del submenú que aparece en cada fila del megamenú.
  • Efecto Animación – El efecto se utiliza para mostrar los submenús: opciones son: atenuar o deslizarse hacia abajo.
  • Velocidad de animación – La velocidad a la que el menú desplegable se abrirá / cerrará.
  • Establecer Mega sub-menú para mostrar todo lo ancho.

Para añadirlo en tu página Web tan solo tienes que añadir en el <head> la librería jQuery, el plugin y su llamada + algunos estilos para los menús.

<link href="css/dcmegamenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
<link href="css/skins/blue.css" rel="stylesheet" type="text/css" />

Y en el <body> la construcción de los menús:

<ul id="mega-menu">
   /* Tu lista de items */
</ul

Ver ejemplo en funcionamiento

 

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (6 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

4 respuestas a “jQuery Mega Drop Down Menu Plugin”

  1. jesus dice:

    Hola muy buenas, lo primero agradecerte todos los aportes que tanto nos ayudan a los que somos novatos en todo esto.

    No se si es muy básica mi consulta pero estoy intentando añadir un menú de este tipo a mi pagina y no hay manera de que me lo muestre correctamente.
    Masa de todo menos que muestre el menú.

    La verdad es que no se como colocarlo en el archivo header para que resulte. Ya se le hicieron algunas modificaciones y no usamos el top menú de prestashop sino uno montado.

    Te pego el código del header tpl de la página como esta ahora:

    {*
    * 2007-2013 PrestaShop
    *
    * NOTICE OF LICENSE
    *
    * This source file is subject to the Academic Free License (AFL 3.0)
    * that is bundled with this package in the file LICENSE.txt.
    * It is also available through the world-wide-web at this URL:
    * http://opensource.org/licenses/afl-3.0.php
    * If you did not receive a copy of the license and are unable to
    * obtain it through the world-wide-web, please send an email
    * to license@prestashop.com so we can send you a copy immediately.
    *
    * DISCLAIMER
    *
    * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
    * versions in the future. If you wish to customize PrestaShop for your
    * needs please refer to http://www.prestashop.com for more information.
    *
    * @author PrestaShop SA
    * @copyright 2007-2013 PrestaShop SA
    * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
    * International Registered Trademark & Property of PrestaShop SA
    *}




    {$meta_title|escape:’htmlall’:’UTF-8′}
    {if isset($meta_description) AND $meta_description}

    {/if}
    {if isset($meta_keywords) AND $meta_keywords}

    {/if}

    var baseDir = ‘{$content_dir|addslashes}’;
    var baseUri = ‘{$base_uri|addslashes}’;
    var static_token = ‘{$static_token|addslashes}’;
    var token = ‘{$token|addslashes}’;
    var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
    var priceDisplayMethod = {$priceDisplay};
    var roundMode = {$roundMode};

    {if isset($css_files)}
    {foreach from=$css_files key=css_uri item=media}

    {/foreach}
    {/if}
    {if isset($js_files)}
    {foreach from=$js_files item=js_uri}

    {/foreach}
    {/if}
    {$HOOK_HEADER}

    {if !$content_only}
    {if isset($restricted_country_mode) && $restricted_country_mode}

    {l s=’You cannot place a new order from your country.’} {$geolocation_country}

    {/if}

    {$HOOK_TOP}

    {include file=”$tpl_dir./breadcrumb.tpl”}

    <!–
    –>

    {$HOOK_LEFT_COLUMN}

    {/if}

    Y este es el codico del menu que quiero cambiar por lo que ya hay:

    Slide Down Box Menu with jQuery and CSS3

    body{
    background:#333 url(bg.jpg) repeat top left;
    font-family:Arial;
    }
    span.reference{
    position:fixed;
    left:10px;
    bottom:10px;
    font-size:12px;
    }
    span.reference a{
    color:#aaa;
    text-transform:uppercase;
    text-decoration:none;
    text-shadow:1px 1px 1px #000;
    margin-right:30px;
    }
    span.reference a:hover{
    color:#ddd;
    }
    ul.sdt_menu{
    margin-top:150px;
    }
    h1.title{
    text-indent:-9000px;
    background:transparent url(title.png) no-repeat top left;
    width:633px;
    height:69px;
    }

    Slide Down Box Menu with jQuery and CSS3

    Armarios, Packs y Clonadores
    Get

    Armarios
    Packs de Cultivo
    Clonadores y esquejes

    Iluminación y accesorios
    La luz que necesitan

    Bombillas
    Reflectores
    Balastros
    Cfl y Florescentes
    Accesorios
    Kits de Iluminación
    Sistemas Led

    hidropónicos y medidores
    Where ideas get born

    Sistemas Hidropónicos
    Medidores de ph y ec

    Clima, olor y humedad
    I like to photograph

    Sistemas extracción
    Extractores e intractores
    Tubos, acoples…
    Ventiladores
    Co2
    Controladores
    Control de humedad
    Control de olor

    Macetas, riego y sustratos
    I write about design

    Riego
    Macetas y tutores
    Bandejas
    Sustratos
    Mejorantes

    Projects
    I like to code

    Job Board Website
    Shopping Cart
    Interactive Maps

    Projects
    I like to code

    ric tracy
    artesanos
    feminizadas

    back to the Codrops Tutorial
    Images by tibchris

    $(function() {
    /**
    * for each menu element, on mouseenter,
    * we enlarge the image, and show both sdt_active span and
    * sdt_wrap span. If the element has a sub menu (sdt_box),
    * then we slide it – if the element is the last one in the menu
    * we slide it to the left, otherwise to the right
    */
    $(‘#sdt_menu > li’).bind(‘mouseenter’,function(){
    var $elem = $(this);
    $elem.find(‘img’)
    .stop(true)
    .animate({
    ‘width’:’164px’,
    ‘height’:’164px’,
    ‘left’:’0px’
    },400,’easeOutBack’)
    .andSelf()
    .find(‘.sdt_wrap’)
    .stop(true)
    .animate({‘top’:’140px’},500,’easeOutBack’)
    .andSelf()
    .find(‘.sdt_active’)
    .stop(true)
    .animate({‘height’:’164px’},300,function(){
    var $sub_menu = $elem.find(‘.sdt_box’);
    if($sub_menu.length){
    var left = ‘164px’;
    if($elem.parent().children().length == $elem.index()+1)
    left = ‘-164px’;
    $sub_menu.show().animate({‘left’:left},200);
    }
    });
    }).bind(‘mouseleave’,function(){
    var $elem = $(this);
    var $sub_menu = $elem.find(‘.sdt_box’);
    if($sub_menu.length)
    $sub_menu.hide().css(‘left’,’0px’);

    $elem.find(‘.sdt_active’)
    .stop(true)
    .animate({‘height’:’0px’},300)
    .andSelf().find(‘img’)
    .stop(true)
    .animate({
    ‘width’:’0px’,
    ‘height’:’0px’,
    ‘left’:’85px’},400)
    .andSelf()
    .find(‘.sdt_wrap’)
    .stop(true)
    .animate({‘top’:’25px’},500);
    });
    });

    Lo ponga como lo ponga no hay manera y es que no tengo muchos conocimientos sobre el tema, por favor si me pudieras echar un cable a colocarlo te estaría muy agradecido.

    Saludos y muchas gracias de antemano.

    Jesús

  2. hi dice:

    amigo cuanto cobras por hacerme una tabls asi en mi blooger

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre