BlogsPopuli

  • Inicio
  • Cómo empezar
  • Descuentos
  • Plantillas para blogs
    • WordPress
    • Blogger
  • Guías!
Inicio » Web » Como crear un mega menu desplegable con CSS3 en Blogger

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.

mega menu css3

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 > a {

    position: relative;
    display: block;
    z-index: 510;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #fcfcfc;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
    background: #372f2b;
    border-left: 1px solid #4b4441;
    border-right: 1px solid #312a27;
    -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:hover > a { background: #4b4441; }
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}
.nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 54px;
    z-index: 510;
    border-left: 1px solid #4b4441;
}
.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

Feb 8, 2013leiva

Comparte esto:

  • Tweet

Relacionado

8 febrero, 2013 WebCSS3, Menu css3
Creando un formulario que envie archivos a nuestra webEnviando un mapa de sitio en Webmasters Tools de Google

Deja un comentario Cancelar respuesta

De interés! (o no..)

📝 Mi lista de la compra

📕 [PDF] Cómo hacer un blog y ganar dinero

🏆 Top Hostings

Categorías
  • Alojamiento web
  • Crear un blog
    • Blogger
    • Wordpress
  • Diseño
  • Ganar dinero con un blog
    • Adsense
  • Noticias
  • Opiniones
  • Posicionamiento SEO
  • Recursos
  • Redes Sociales
    • Facebook
    • Twitter
  • Sin categoria
  • Web
Sígueme!

BlogsPopuli

Seguir a @Blogspopuli

Lo + Leído!
  • 14 Trucos para poner un título irresistible a tus artículos
  • La historia de los blogs desde su inicio hasta la actualidad
  • Motivos por los que tu blog podría ser baneado en Adsense
Lo último!
  • Opinión de Arvixe Hosting
  • Cómo crear un blog desde 0; Guía en pdf
  • Opinión de Hostgator en 2015. ¿Buen alojamiento?
  • Plugins que no pueden faltar en tu WordPress (2015)
  • Cómo preparar WordPress antes de empezar, ajustes básicos
Últimos comentarios
  • Emilio en LinkBuilding: Cómo dejar comentarios perfectos en otros blogs
  • Cipriano en LinkBuilding: Cómo dejar comentarios perfectos en otros blogs
  • Café en LinkBuilding: Cómo dejar comentarios perfectos en otros blogs
  • Mark en Plugins que no pueden faltar en tu WordPress (2015)
  • Miguel en LinkBuilding: Cómo dejar comentarios perfectos en otros blogs

Blogs Populi / Cómo hacer un blog y ganar dinero con él funciona gracias a WordPress