jQuery Dropdown menu al estilo Google

Name: jQuery Dropdown menu al estilo Google
Brand: Jose Aguilar
SKU: joseaguilarblog-1686
Availability: InStock
Rating: 4 (1 reviews)

En este artículo vamos a indicar cómo crear un menú desplegable con jQuery al estilo de Google, también se puede utilizar como una «fija» del menú.

Lo más importante en estos menús es el archivo CSS, vamos a usar jQuery sólo para hacer aparecer o desaparecer las opciones secundarias, pero toda la magia está en el archivo CSS.

Vamos a imitar el estilo de google, si marca el código de Google se pueden ver muchos divs ul li y elementos span, la idea es hacer lo mismo sin los elementos adicionales, por lo que se va a utilizar una simple lista de ul li, y todo se envuelve allí.

Para obtener en nuestra Web el menú de google debemos incorporar la librería jQuery, el código CSS necesario y el script para hacer funcionar el menú.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.fixedMenu.js"></script>
<link rel="stylesheet" type="text/css" href="fixedMenu_style1.css" />
 <script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
</script>

Y luego en el <body> añadimos los links necesarios para obtener el menú, como por ejemplo:

<div class="menu">
    <ul>
        <ul>
            <li><a href="#">More Examples</a>
                <ul>
                    <li><a href="#">Plugins and jQuery Examples</a></li>
                    <li><a href="#">Prototype Examples</a></li>
                    <li><a href="#">Mootools Examples</a></li>
                    <li><a href="#">Javascript Examples</a></li>
                </ul>
            </li>
        </ul>
    </ul>
</div>

El código CSS lo puedes ver observando el ejemplo en funcionamiento. Viendo el código fuente.

En el ejemplo mostramos 2 opciones con estilos distintos.

Ver ejemplos en funcionamiento