Bienvenido! Por favor ingrese o registrese.

Autor Tema: Menú horizontal con subítems y movimiento para Blogger  (Leído 1009 veces)

Gime

  • Nivel 4
  • ****
  • Puntos: 1808
  • Mensajes: 238
    • Ver Perfil
Menú horizontal con subítems y movimiento para Blogger
« : noviembre 11, 2014, 05:43:50 pm »
Bastante tiempo me llevó encontrar variaciones para poner un menú horizontal en blogger. El menú común, por ejemplo, se puede personalizar en colores y fuente, pero encontré un menú muy interesante, con ítems de submenú y un efecto de balanceo.

La apariencia del menú es metálica y los botones tienen un relieve bastante lindo. Lo más útil es la posibilidad de incluir subítems en cada sección del menú.

Hace unos meses compartía el código para el menú común y cómo hacer para ponerlo. Para los novatos como yo en Blogger que les interese este tema les dejo también el código para este menú simple.

Menú común

<ul id="menu">
<li><a class="selected" href="http://ELNOMBREDELBLOG.blogspot.com/">INICIO</a></li>
<li><a href="http:// ELNOMBREDELBLOG.blogspot.com/search/label/ETIQUETA">LAPRIMERAOPCIONDELMENU</a></li>
<li><a href="http:// ELNOMBREDELBLOG.blogspot.com/search/label/ETIQUETA2">LASEGUNDAOPCIONDELMENU</a></li>
</ul>

Para poner el menú con subítems y efecto de balanceo abrimos el gadget que está bajo la cabecera HTML/Javascript y pegamos:

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


Espero que les sea útil. Hay varias cosas que podemos cambiar, y ahí está la parte divertida, y la creativa del asunto, para hacer que quede bien en nuestro blog  ;)

Si alguien tiene otros códigos para personalizar la barra de menú se agradece compartir.


Linkback: http://afiliadostop.net/index.php?topic=6929.0
No Tienes Permisos Para Dar Puntos
point 0 Puntos

Este tema no recibió puntos.


Share via facebook Share via twitter

xx
Menú horizontal con zoom y menú vertical blogger

Iniciado por Gime

0 Respuestas
1304 Vistas
Último mensaje diciembre 26, 2014, 12:33:34 pm
por Gime
xx
Cómo poner un menú horizontal en Blogger

Iniciado por Gime

1 Respuestas
1523 Vistas
Último mensaje julio 10, 2014, 08:45:15 pm
por marcoojeda
xx
como hacer un menu de navegacion en blogger [VIDEO]

Iniciado por Poll Xander

0 Respuestas
209 Vistas
Último mensaje octubre 17, 2016, 08:51:47 pm
por Poll Xander
xx
Blogger; Necesito Plantillas Para Hacer Cartas De Venta Con Blogger

Iniciado por Ivan Avila

3 Respuestas
2719 Vistas
Último mensaje agosto 15, 2012, 03:32:55 pm
por Super-Trafico