Mil Trucos Blogger

Menú horizontal con JQuerry y CSS3

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
Ya todos sabemos que los menúes son un elemento básico que nunca deben faltar en un blog, ya que ayuda al usuario a orientarse y a dirigirse en las diferentes secciones de tu blog (entrada o página). 
 
Esta vez traigo a ustedes este excelente menú horizontal, que en lo personal me ha gustado mucho debido a sus múltiples efectos logrado con JQuerry y CSS3, y lo mejor de todo, es que es compatible con cualquier navegador.
(blog de pruebas)
 
Si usas una plantilla hecha por el diseñador de plantillas de blogger, primero deberás seguir los pasos de esta entrada de Ciudad Blogger.
 

Ahora para agregar el menú en tu blog, nos vamos a Plantilla, Editar HTML, adentro presionamos CTRL+F y buscamos:

</head>

Y antes pegamos:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Guarda los cambios de tu plantilla, y ahora solo nos queda irse a Diseño, Añadir Gadget, HTML/Javascript y pegamos:

<!-- JavaScript -->
  <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/5655242/Script/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(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':'170px',
       'height':'170px',
       'left':'0px'
       },400,'easeOutBack')
       .andSelf()
       .find('.sdt_wrap')
          .stop(true)
       .animate({'top':'140px'},500,'easeOutBack')
       .andSelf()
       .find('.sdt_active')
          .stop(true)
       .animate({'height':'170px'},300,function(){
      var $sub_menu = $elem.find('.sdt_box');
      if($sub_menu.length){
       var left = '170px';
       if($elem.parent().children().length == $elem.index()+1)
        left = '-170px';
       $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);
    });
            });
        </script>
<!--Los estilos CSS-->
<style>
div.contenedor{
 background:#000;
 width: auto;
 height: 93px;
 position:relative;
 left:0;
 right:0;
 z-index: 10;
 }
 ul.sdt_menu{
 margin:0;
 padding:0;
 list-style: none;
 font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 font-size:14px;
 width: auto;
 position:relative;
}
ul.sdt_menu a{
 text-decoration:none;
 outline:none;
}
ul.sdt_menu li{
 background:#000000;
 float:left;
 width:170px;
 height:85px;
 position:relative;
 cursor:pointer;
}
ul.sdt_menu li > a{
 position:absolute;
 top:0px;
 left:0px;
 width:170px;
 height:85px;
 z-index:12;
 -moz-box-shadow:0px 0px 2px #000 inset;
 -webkit-box-shadow:0px 0px 2px #000 inset;
 box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
 border:none;
 position:absolute;
 width:0px;
 height:0px;
 bottom:0px;
 left:85px;
 z-index:100;
 -moz-box-shadow:0px 0px 4px #000;
 -webkit-box-shadow:0px 0px 4px #000;
 box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
 position:absolute;
 top:25px;
 left:0px;
 width:170px;
 height:60px;
 z-index:15;
}
ul.sdt_menu li span.sdt_active{
 position:absolute;
 background:#111;
 top:85px;
 width:170px;
 height:0px;
 left:0px;
 z-index:14;
 -moz-box-shadow:0px 0px 4px #000 inset;
 -webkit-box-shadow:0px 0px 4px #000 inset;
 box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
 margin-left:15px;
 text-transform:uppercase;
 text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
 color:#fff;
 font-size:24px;
 float:left;
 clear:both;
}
ul.sdt_menu li span span.sdt_descr{
 color:#0B75AF;
 float:left;
 clear:both;
 width:155px; /*For dumbass IE7*/
 font-size:10px;
 letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
 display:block;
 position:absolute;
 width:170px;
 overflow:hidden;
 height:170px;
 top:85px;
 left:0px;
 display:none;
 background:#000;
}
ul.sdt_menu li div.sdt_box a{
 float:left;
 clear:both;
 line-height:30px;
 color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
 margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
 color:#fff;
 }
  </style>
    
 <!-- Menu -->
<br />
<br />
<br />
<br />
<br />
<div class="contenedor">
<ul id="sdt_menu" class="sdt_menu">
    <li>
     <a href="#">
      <img src="URL imagen 1" alt=""/>
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <span class="sdt_link">About me</span>
       <span class="sdt_descr">Get to know me</span>
      </span>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="URL imagen 2" alt=""/>
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <span class="sdt_link">Portfolio</span>
       <span class="sdt_descr">My work</span>
      </span>
     </a>
     <div class="sdt_box">
       <a href="#">Websites</a>
       <a href="#">Illustrations</a>
       <a href="#">Photography</a>
     </div>
    </li>
    <li>
     <a href="#">
      <img src="URL imagen 3" alt=""/>
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <span class="sdt_link">Inspiration</span>
       <span class="sdt_descr">Where ideas get born</span>
      </span>
     </a>
    </li>
<li>
     <a href="#">
      <img src="URL imagen 4" alt=""/>
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <span class="sdt_link">Photos</span>
       <span class="sdt_descr">I like to photograph</span>
      </span>
     </a>
    </li>    <li>
     <a href="#">
      <img src="URL imagen 5" alt=""/>
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <span class="sdt_link">Blog</span>
       <span class="sdt_descr">I write about design</span>
      </span>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="URL imagen 6" alt=""/>
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <span class="sdt_link">Projects</span>
       <span class="sdt_descr">I like to code</span>
      </span>
     </a>
     <div class="sdt_box">
      <a href="#">Job Board Website</a>
      <a href="#">Shopping Cart</a>
      <a href="#">Interactive Maps</a>
     </div>
    </li>
   </ul>
  </div>
<br />
<br />

Personalización

hola URL del enlace.
hola URL de la imagen que se mostrará al pasar el cursor sobre el menú
hola Titulo del menú
hola Descripción del menú
hola Titulo de las subpestañas
Este menú usa la ultima versión de JQuerry, en caso de no funcionar buscar las versiones antiguas de JQuerry y eliminarlas.
0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

12 Comentarios

  1. Anonymous Anonymous
    Diciembre 10, 2013    

    (h) nunca había visto nada igual, Gracias :p

  2. Enero 8, 2014    

    Excepcional, gracias :-d

  3. Enero 28, 2014    

    Saludos y gracias de antemano.
    Me gustaría saber si se puede poner submenus en los submenus y como tendria que hacerlo ya que soy novato en estos temas, atentamente Diego

  4. Enero 28, 2014    

    Mi E-mail es: diniaz@hotmail.com :))

  5. Anonymous Anonymous
    Febrero 14, 2014    

    Enorme trabajo. Gracias, a ti y a todos los que comparten sus conocimientos. 😉

  6. Febrero 23, 2014    

    a mi no me sirvio,el primer codigo no me sale en HEAD sino head,empezando por hay,luego al meter el codigo da error ke no puede acabar en scrip y > [- (

  7. Abril 30, 2014    

    Muchas gracias , hace tiempo estaba detrás de este menú pero no me funcionaba.
    Muy agradecida

  8. Abril 30, 2014    

    Hace tiempo estaba detrás de este menú, y no podía ponerlo.. no funcionaba a pesar de que seguía las instrucciones (h)

  9. Noviembre 9, 2014    

    a mi lo del menu despegable no me sale me sale el menu como ese pero no la parte despegable

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo