30 de noviembre de 2012

Menú horizontal con submenúes y un efecto de balanceo.

Este es un menú horizontal con submenúes y un efecto de balanceo para nuestro blog de Blogger. Fácil de colocar, tan solo un código entero y podemos ponerlo en un gadget HTML/Javascript o donde mejor quede en nuestro blog. Como siempre, primero les muestro un ejemplo y luego les doy el código para hacerlo: Entonces acá vamos con la muestra:




¿Les gustó el efecto? ¿No es genial?.
Bueno, entonces como dijimos anteriormente, abrimos un gadget HTML/Javascript y dentro de el pegamos este código entero:


<div id="containerbalanceo">
<ul id="menubalanceo">
<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>
<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>

<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>


<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>


<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>

</ul>
</div>


<style>

#containerbalanceo {
  position: relative;
  width: 96%;
}

#containerbalanceo:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

#menubalanceo {
  position: relative;
  float: left;
  width: 100%;
  padding: 0 20px;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);

  background: #cccccc;
background: -moz-linear-gradient(top,  #cccccc 0%, #9e9e9e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#9e9e9e));
background: -webkit-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: -o-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: -ms-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: linear-gradient(to bottom,  #cccccc 0%,#9e9e9e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#9e9e9e',GradientType=0 );


}

#menubalanceo, #menubalanceo ul {
  list-style: none;
}

#menubalanceo > li {
  float: left;
  position: relative;
  border-right: 1px solid rgba(0,0,0,.1);
  box-shadow: 1px 0 0 rgba(255,255,255,.25);

  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;

}

#menubalanceo > li:first-child {
  border-left: 1px solid rgba(255,255,255,.25);
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}

#menubalanceo a {
                font-family:century gothic;
  display: block;
  position: relative;
  z-index: 10;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
  color: rgba(75,75,75,1) !important;
  line-height: 1;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.05em;
  background: transparent;
  text-shadow: 0 1px 1px rgba(255,255,255,.9);
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;

}
        #menubalanceo > li:hover > a {
                font-family:century gothic;
  background: #333;
  color: #00DFFC !important;
  text-shadow: none;
}

#menubalanceo li ul  {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 200px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: transparent;
  overflow: hidden;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}


#menubalanceo li:hover ul {

  padding: 15px 0;
  background: #333;
  opacity: 1;
  visibility: visible;
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);

  -webkit-animation-name: swingdown;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;

  -moz-animation-name: swingdown;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;

  -o-animation-name: swingdown;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;

  -ms-animation-name: swingdown;
  -ms-animation-duration: 1s;
  -ms-animation-timing-function: ease;

  animation-name: swingdown;
  animation-duration: 1s;
  animation-timing-function: ease;

}

@-webkit-keyframes swingdown {
  0% {
   opacity: .99999;
   -webkit-transform: rotateX(90deg);
  }

  30% {
   -webkit-transform: rotateX(-20deg) rotateY(5deg);
   -webkit-animation-timing-function: ease-in-out;
  }

  65% {
   -webkit-transform: rotateX(20deg) rotateY(-3deg);
   -webkit-animation-timing-function: ease-in-out;
  }

  100% {
   -webkit-transform: rotateX(0);
   -webkit-animation-timing-function: ease-in-out;
  }
}

@-moz-keyframes swingdown {
  0% {
   opacity: .99999;
   -moz-transform: rotateX(90deg);
  }

  30% {
   -moz-transform: rotateX(-20deg) rotateY(5deg);
   -moz-animation-timing-function: ease-in-out;
  }

  65% {
   -moz-transform: rotateX(20deg) rotateY(-3deg);
   -moz-animation-timing-function: ease-in-out;
  }

  100% {
   -moz-transform: rotateX(0);
   -moz-animation-timing-function: ease-in-out;
  }
}

@-o-keyframes swingdown {
  0% {
   opacity: .99999;
   -o-transform: rotateX(90deg);
  }

  30% {
   -o-transform: rotateX(-20deg) rotateY(5deg);
   -o-animation-timing-function: ease-in-out;
  }

  65% {
   -o-transform: rotateX(20deg) rotateY(-3deg);
   -o-animation-timing-function: ease-in-out;
  }

  100% {
   -o-transform: rotateX(0);
   -o-animation-timing-function: ease-in-out;
  }
}

@-ms-keyframes swingdown {
  0% {
   opacity: .99999;
   -ms-transform: rotateX(90deg);
  }

  30% {
   -ms-transform: rotateX(-20deg) rotateY(5deg);
   -ms-animation-timing-function: ease-in-out;
  }

  65% {
   -ms-transform: rotateX(20deg) rotateY(-3deg);
   -ms-animation-timing-function: ease-in-out;
  }

  100% {
   -ms-transform: rotateX(0);
   -ms-animation-timing-function: ease-in-out;
  }
}

@keyframes swingdown {
  0% {
   opacity: .99999;
   transform: rotateX(90deg);
  }

  30% {
   transform: rotateX(-20deg) rotateY(5deg);
   animation-timing-function: ease-in-out;
  }

  65% {
   transform: rotateX(20deg) rotateY(-3deg);
   animation-timing-function: ease-in-out;
  }

  100% {
   transform: rotateX(0);
   animation-timing-function: ease-in-out;
  }
}

#menubalanceo li li a {
                font-family:century gothic;
  padding-left: 15px;
  font-weight: 400;
  color: #00DFFC !important;
  text-shadow: none;
  border-top: dotted 1px transparent;
  border-bottom: dotted 1px transparent;
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  -o-transition: all .15s linear;
  -ms-transition: all .15s linear;
  transition: all .15s linear;
}

#menubalanceo li li a:hover {
  color: rgba(0,223,252,1);
  border-top: dotted 1px rgba(255,255,255,.15);
  border-bottom: dotted 1px rgba(255,255,255,.15);
  background: rgba(0,223,252,.02);
}

</style>


Perfecto, ahora sólo reemplazamos lo que está en rojo por los nombres que queremos asignarles a los menúes y submenúes. Si quieren hacer alguna modificación pueden jugar con los estilos. ¡Saludos!.


Fuente: Redeando

20 comentarios:

  1. Buen aporte amigo, es ta super dinámico e interactivo el menú, lo aplicare a mi blog y le daré algunas modificaciones para que se adecue a mi estilo. muchas gracias.

    ResponderEliminar
    Respuestas
    1. Qué bueno que te haya servido NeytorTec, gracias por tu comentario :)

      Eliminar
  2. Gracias... Oye Otra Pregunta, ¿Como Pongo Un Icono O Una Pequeña Imagen En El Link De Descarga? (Me Refiero A La Pequeña Imagen Que Aparece En Varios Blogs Que Dice "Descargar" Y Que Al Dar Click Ahi, Nos Manda Al Enlace Del Archivo)

    ResponderEliminar
  3. En esta entrada lo explico justamente Pablo:
    http://hogarblogger.blogspot.com.ar/2012/08/como-poner-una-foto-html-en-el-blog-y.html#.UMEF8oP8J84

    Fijate que tenés el espacio en el código para que pongas la imágen que dice "DESCARGAR", luego ponés el enlace que contiene el archivo para descargar y también el atributo de ancho y alto para la imágen de descarga, para que lo pongas a tu gusto :)

    ResponderEliminar
  4. Respuestas
    1. Hola Vladimir, donde están los "#", reemplaza el # por el enlace al que quieres que redireccione. Y lo que está en rojo es el nombre de la opción. Saludos!

      Eliminar
  5. Qué cosa no se desliza? No ves bien el menú acá o cuando lo colocas? Prueba con otro navegador.

    ResponderEliminar
    Respuestas
    1. si se desliza pero como lo coloco sobre la plantilla mira mi blog tutorialesjaimito.blogspot.com.ar/

      Eliminar
    2. Hola Vladimir, está perfecto el menú. Simplemente tendrías que mover el gadget html/javascript donde lo colocaste. Si está debajo de la cabecera entonces deberías moverlo arriba de donde figuran las "entradas del blog" :)

      Eliminar
    3. si ya esta viste mi blog descargue una plantilla y la parte que pasa las imagenes la puedo cambiar despues la parte del menu verde como lo puedo cambiar Gracias tutorialesjaimito.blogspot.com.ar/

      Eliminar
    4. Hola Vladimir, busca esta parte de código en tu plantilla y reemplaza el color:

      nav {
      position: relative;
      margin: 0px 0 0 0;
      border-top: 1px solid #c7e603;
      background: url('../images/nav2.png') repeat-x #80b404;
      border-radius: 0 0 5px 5px;
      box-shadow: 0px 5px 5px #1f1e20;
      }

      Cambia el #80b404 por el código del color que tu quieras :) Saludos!

      Eliminar
    5. como cambio los link de que dice dowload pc esa barra

      Eliminar
    6. Debes buscar en el código de la plantilla de tu blog esto:

      class="sf-menu"

      Y debajo de ellos verás los nombres de botones y el enlace correspondiente.

      Y luego editarlo. Poner el nombre que quieras que tenga el botón y el enlace al que quieras que redireccione.

      Eliminar
  6. Hola, gracias por compartir esta información. En mi caso esta opción no se veía muy bien por explorer entonces utilicé la de menú horizontal con submenus, también es buena alternativa.
    Tengo un par de preguntas por si puedes ayudarme:
    1. cómo hago para rankear mi blog?
    2. si utilizo la opción de "páginas" de blogger, cómo hago para agregar varias entradas en esas páginas? pues por lo que veo solamente recibe una entrada...hay alguna opción para que estas "páginas" se comporten igual que la página principal?
    Gracias

    ResponderEliminar
  7. Hola Ana! A qué te referís con rankear tu blog? A que suba de posiciones en los buscadores? Si te refieres a eso acá te dejo una serie de videos tutoriales que hice con algunos tips relativamente básicos para empezar a escalar posiciones en los buscadores. http://hogarblogger.blogspot.com.ar/2012/03/seo.html#.UFX7qo0f4k0

    Con tu segunda pregunta no sé si te entiendo bien. Vos estás utilizando la herramienta de páginas, luego creaste algunas y querés que dentro de esas páginas se enlacen otras entradas? Porque en si, las páginas son entradas.

    Saludos :)

    ResponderEliminar
  8. Hola, a eso me refería...a subir de posiciones, gracias por la info, la voy a revisar.
    sobre la segunda pregunta, efectivamente he creado varias páginas y en ellas he colocado una entreda, pero quiero crear varias entradas en cada una de esas páginas. La idea es poder ingresar entradas independientes en cada una de las páginas, pero hasta ahora sólo he podido hacerlo en la página principal, en las demás me ha tocado solamente una entrada....
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Ana! Realmente no llego a entenderte bien sobre tu segunda pregunta. La función de "Páginas" es un gadget el cual podés llenarlo de contenido desde el panel de control de Blogger en la opción de páginas y además editar los estilos desde la plantilla de blogger, es decir, modificando el código. Al crear una página estás creando un enlace al que se puede entrar y ver contenido que vas publicando. Ahora, lo que vos querés es hacer otro gadget de páginas? Tener otra lista de enlaces a la que se pueda entrar y mostrar contenido?

      Eliminar
  9. por que me aparece atras de mi post?
    auxilioooo

    ResponderEliminar
    Respuestas
    1. Hola Platoldelgato, cuál es tu blog? Para ver qué es lo que te está sucediendo.

      Eliminar