Menú desplegable hecho con CSS3 para Blogger

En el día de hoy veremos como agregar un genial menú desplegable el cual ha sido hecho con CSS3 por scrips-tutorials, al cual le he hecho unas pequeñas modificaciones para adaptarlo a Blogger.

 

El menú es muy ligero por lo que no ralentizara la carga de tu blog.

Para agregar el menú a tu blog debes ir a Plantilla, Editar HTML y estando en el editor de la plantilla oprime las teclas Ctrl + F (te aparecerá el buscador de códigos) y pega allí la etiqueta  </header> y cuando la encuentres pega debajo de ella lo siguiente:

<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Contact</a>
                <a href='URL FACEBOOK'><img height='18px' src='http://3.bp.blogspot.com/-bsoTf8EpVbE/Uw_W2HmlPOI/AAAAAAAAGXQ/RS57fNXl1tE/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='URL TWITTER'><img height='18px' src='http://2.bp.blogspot.com/-9OXxCWCilgM/Uw_WNEqUShI/AAAAAAAAGXI/2T6Dc8zVrxA/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='URL GOOGLE+'><img height='18px' src='http://3.bp.blogspot.com/-LQABZjrBgiY/Uw_X4zGqixI/AAAAAAAAGXo/jlR7r1blHso/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='URL RSS'><img height='18px' src='http://1.bp.blogspot.com/-NsPs8DRJfP4/Uw_XnNMAHTI/AAAAAAAAGXg/qC2kA_T-BdY/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
    </div>
    <div id='menu-container'>
        <nav id='neat-menu'>
            <ul>
              <li class='active'><a href='/'>Home</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menú elemento 1</a></li>                        <li><a href='#'>Menú elemento 2</a></li>                        <li><a href='#'>Menú elemento 3</a></li>                        <li><a href='#'>Menú elemento 4</a></li>                        <li><a href='#'>Menú elemento 5</a></li>                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menú elemento 1</a></li>                        <li><a href='#'>Menú elemento 2</a></li>                        <li><a href='#'>Menú elemento 3</a></li>                        <li><a href='#'>Menú elemento 4</a></li>                        <li><a href='#'>Menú elemento 5</a></li>                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menú elemento 1</a></li>                        <li><a href='#'>Menú elemento 2</a></li>                        <li><a href='#'>Menú elemento 3</a></li>                        <li><a href='#'>Menú elemento 4</a></li>                        <li><a href='#'>Menú elemento 5</a></li>                    </ul>
                </li>
                <li><a href='#'> Menú</a></li>                <li><a href='#'>Menú</a></li>                <li><a href='#'>Dropdown</a>                    <ul>
                        <li><a href='#'>Menú elemento 1</a></li>                        <li><a href='#'>Menú elemento 2</a></li>                        <li><a href='#'>Menú elemento 3</a></li>                        <li><a href='#'>Menú elemento 4</a></li>                        <li><a href='#'>Menú elemento 5</a></li>                    </ul>
                </li>
            </ul>
        </nav>
        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>

Lo resaltado en color azul corresponde a los iconos sociales que van en la parte superior, lo resaltado en color verde corresponde a la estructura del menú propiamente dicho y los símbolos # reemplazalos por las URL que quieres que vayan en el menú.

Ahora ve antes de ]]></b:skin> pega el siguiente código CSS:

#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: left;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 02;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: right;
}
#menu-search form {
    background: url("http://1.bp.blogspot.com/-NzU9je1udG4/Uw-1tZku4eI/AAAAAAAAGWs/-h4BU1mFTiU/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #C4C4C4;
}

Ahora solo debes guardar los cambios y empezar a disfrutar de este genial menú.

Si quieres seguir encontrando los mejores recursos para tu blog vuelve y visitanos otra vez.

0
Shares

13 thoughts on “Menú desplegable hecho con CSS3 para Blogger

  • marzo 14, 2014 en 10:29 pm
    Permalink

    Hola, lo he probado en mi blog y la verdad es que me ha encantado muchísimo. Es muy simple y aligeró la carga de mi blog a comparación del método de redirección que tenía antes.

    He visto en algunos blogs que crean algo así como un boletín informativo que es enviado a las personas que se suscriban. Ya vez que la suscripción de Blogger lo que hace es enviarte la entrada entera a tu correo. Lo que yo quiero hacer es crear un boletín informativo semanal donde cuando haga una entrada le llegue al suscriptor un correo con un aviso y quizá una pequeña reseña y que tenga que entrar al blog para seguir leyendo. Me preguntaba si me podías ayudar. Gracias & excelente contenido.

    Responder
  • abril 10, 2014 en 10:20 pm
    Permalink

    Hola!!! queria saber como puedo poner las pestañas en los widgest como tenes en tu blog???

    Responder
  • junio 16, 2014 en 8:45 pm
    Permalink

    Hayder hola, de momento todo bien pero dime porfa como le podría quitar un poco de largo y quizás poner otro color ya que no me pega nada con el fondo que tengo. Muchas gracias y saludos desde Tenerife.

    Responder
    • julio 20, 2014 en 3:55 pm
      Permalink

      Amigo en respuesta a tus múltiples comentarios:

      Para el ancho total del menú, busca la siguiente parte:

      #contact-links {
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
      margin: auto;
      position: relative;
      width: 100%;
      }

      En width: 100% cambia ese valor por un menor porcentaje.

      Para el color debes editar la siguiente parte:

      #contact-links a {
      color: #4C9FEB;
      }

      Saludos

      Responder
  • enero 30, 2015 en 4:11 am
    Permalink

    Hola! me encantó la barra, ya la apliqué pero mi pregunta es cómo se podría modificar el código para que la barra quede arriba de la cabecera?
    Es algo que he visto bastante y quería hacerlo en mi blog.
    Muchas gracias! 🙂

    Responder
  • agosto 2, 2016 en 7:53 pm
    Permalink

    Hola Hayder Juvinao, existe alguna forma de que el menú quede inmovilizado como tienes el tuyo??
    Espero que me puedas ayudar.

    Saludos!!

    Responder

Deja un comentario

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