Como crear un mega menu desplegable con CSS3 en Blogger

Anteriormente les mostrábamos como crear un formulario con CSS3 para permitir el envío de fotos a través de nuestra web, esta vez siguiendo con las aplicaciones del CSS3 veremos como crear una extraordinario mega menú con listas desplegables o dropdown.

Lo primero que veremos es la estructura en HTML de nuestro menú  como podemos observar cuenta con una lista de enlaces principales los cuales despliegan contenido al pasar el “ratón” sobre ellos.

Este será la estructura del código que debe ir dentro de la etiqueta BODY o donde quieres que aparezca el menú, generalmente el header.

<ul class="nav">

    <li>

        <a href="#">Lo nuevo</a>

        <div>

            Contenido del menu aqui...

        </div>

    </li>

    <li><a href="#">Enlace 2</a></li>

    <li>

        <a href="#">Enlace 3</a>

        <div>

           Contenido del Enlace 3...

        </div>

    </li>

    <li><a href="#">Enlace 4</a></li>

    <li><a href="#">Enlace 5</a></li>

    <li><a href="#">Enlace 6</a></li>

    <li class="nav-search">

        <form action="#">

            <input type="text" placeholder="Buscar...">

            <input type="submit" value="">

        </form>

    </li>

</ul>

Como puedes ver, al final incluye un buscador interno de tu blog.

Ahora, dentro de nuestro css, tendremos que agregar la estructura básica que le darán estilo a nuestro menú desplegable.

.nav > li.nav-search input[type="text"] {

    display: block;

    float: left;

    width: 1px;

    height: 24px;

    padding: 15px 0;

    line-height: 24px;

    font-family: Helvetica, Arial, sans-serif;

    font-weight: bold;

    font-size: 13px;

    color: #999999;

    text-shadow: 0 0 1px rgba(0,0,0,.35);

    background: #372f2b;

    -webkit-transition: all .3s ease 1s;

    -moz-transition: all .3s ease 1s;

    -o-transition: all .3s ease 1s;

    -ms-transition: all .3s ease 1s;

    transition: all .3s ease 1s;

}

.nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; }

.nav > li.nav-search input[type="text"]:focus,

.nav > li.nav-search:hover input[type="text"] {

    width: 110px;

    padding: 15px 20px;

    -webkit-transition: all .3s ease .1s;

    -moz-transition: all .3s ease .1s;

    -o-transition: all .3s ease .1s;

    -ms-transition: all .3s ease .1s;

    transition: all .3s ease .1s;

}

.nav > li.nav-search input[type="submit"] {

    display: block;

    float: left;

    width: 20px;

    height: 54px;

    padding: 0 25px;

    cursor: pointer;

    background: #372f2b url(../img/search-icon.png) no-repeat center center;

    border-radius: 0 3px 3px 0;

    -webkit-transition: all .3s ease;

    -moz-transition: all .3s ease;

    -o-transition: all .3s ease;

    -ms-transition: all .3s ease;

    transition: all .3s ease;

}

.nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; }

.nav > li > div {

    position: absolute;

    display: block;

    width: 100%;

    top: 50px;

    left: 0;

    opacity: 0;

    visibility: hidden;

    overflow: hidden;

    background: #ffffff;

    border-radius: 0 0 3px 3px;

    -webkit-transition: all .3s ease .15s;

    -moz-transition: all .3s ease .15s;

    -o-transition: all .3s ease .15s;

    -ms-transition: all .3s ease .15s;

    transition: all .3s ease .15s;

}

.nav > li:hover > div {

    opacity: 1;

    visibility: visible;

    overflow: visible;

}

.nav .nav-column {

    float: left;

    width: 20%;

    padding: 2.5%;

}

.nav .nav-column h3 {

    margin: 20px 0 10px 0;

    line-height: 18px;

    font-family: Helvetica, Arial, sans-serif;

    font-weight: bold;

    font-size: 14px;

    color: #372f2b;

    text-transform: uppercase;

}

.nav .nav-column h3.orange { color: #ff722b; }

.nav .nav-column li a {

    display: block;

    line-height: 26px;

    font-family: Helvetica, Arial, sans-serif;

    font-weight: bold;

    font-size: 13px;

    color: #888888;

}

.nav .nav-column li a:hover { color: #666666; }

Ahora que ya hemos terminado por completo de darle estilo a nuestro menu, agregaremos el codigo completo de éste donde queremos que se muestre:

<div class="nav-column">

    <h3>Home</h3>

    <ul>

        <li><a href="#">Pampers Diapers</a></li>

        <li><a href="#">Huggies Diapers</a></li>

        <li><a href="#">Seventh Generation</a></li>

        <li><a href="#">Diapers</a></li>

        <li><a href="#">Derbies</a></li>

        <li><a href="#">Driving shoes</a></li>

        <li><a href="#">Espadrilles</a></li>

        <li><a href="#">Loafers</a></li>

    </ul>

</div>

<div class="nav-column">

    <h3>Home</h3>

    <ul>

        <li><a href="#">Driving shoes</a></li>

        <li><a href="#">Espadrilles</a></li>

        <li><a href="#">Loafers</a></li>

    </ul>

    <h3>Home</h3>

    <ul>

        <li><a href="#">Driving shoes</a></li>

        <li><a href="#">Espadrilles</a></li>

        <li><a href="#">Loafers</a></li>

    </ul>

</div>

<div class="nav-column">

    <h3>Home</h3>

    <ul>

        <li><a href="#">Pampers Diapers</a></li>

        <li><a href="#">Huggies Diapers</a></li>

        <li><a href="#">Seventh Generation</a></li>

        <li><a href="#">Diapers</a></li>

        <li><a href="#">Derbies</a></li>

        <li><a href="#">Driving shoes</a></li>

        <li><a href="#">Espadrilles</a></li>

        <li><a href="#">Loafers</a></li>

    </ul>

</div>

<div class="nav-column">

    <h3 class="orange">Related Categories</h3>

    <ul>

        <li><a href="#">Pampers Diapers</a></li>

        <li><a href="#">Huggies Diapers</a></li>

        <li><a href="#">Diapers</a></li>

    </ul>

    <h3 class="orange">Brands</h3>

    <ul>

        <li><a href="#">Driving shoes</a></li>

        <li><a href="#">Espadrilles</a></li>

    </ul>

</div>

Este código debe ir dentro de la primera estructura que hemos creado al inicio, la cual será el menú que mostrará al pasar el mouse sobre los enlaces principales.

El código puede ser aplicado tanto en Blogger de forma manual como en WordPress usando la jerarquía de las categorías a través del codex de WordPress.

Recuerda cambiar la información a mostrar en el menú  tanto el texto de los enlaces como el menú desplegable.

Ver demo