ANIMACIÓN CSS menú desplegable BLOGGER

Comparteme :

CSS menú desplegable Animación Blogger - en este tutorial después de una larga ausencia blogger discute el menú de navegación así que ahora voy a explicar un poco acerca de CSS animada. Para crear esta animación menú desplegable no requiere ningún jQuery y aquí es donde la grandeza de características para hacer las animaciones CSS CSS transición más suave que se ejecutan mediante el ajuste del efecto sobre la transición de la demora. Aquí hay más detalles para poner CSS menú desplegable Animación blog de Blogger.

1. Ingrese a su cuenta de Blogger y luego ir a la plantilla de Edición de HTML.
2. A continuación, poner el siguiente código CSS en el código anterior: ]]></b:skin>

.menu,
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.menu {
  background: #252525;
  height: 35px;
  width: 100%;
  border-bottom: 2px solid #181818;
  border-top: 2px solid #303030
}

.menu li {
  background: #252525
}

.menu > li {
  display: block;
  float: left;
  position: relative;
  box-shadow: 2px 0 0 0 rgba(51, 51, 51, 1)
}

.menu a {
  border-left: 3px solid rgba(0, 0, 0, 0);
  color:White;
  display: block;
  font-family: Electrolize, sans-serif;
  font-size: 12px;
  line-height: 35px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 25px
}

.menu a:first-letter {
  color: #2b7ca2
}

.menu li:hover {
  background-color: #1c1c1c
}

.menu li:hover > a {
  border-left: 3px solid #0091d6;
  color: #fff
}

.submenu {
  left: 0;
  max-height: 0;
  position: absolute;
  top: 100%;
  z-index: 0;
  perspective: 400px;
  width: 200%
}

.submenu li {
  opacity: 0;
  transform: rotateY(90deg);
  transition: opacity .4s, transform .5s;
  border-bottom: 2px solid #181818;
  border-top: 2px solid #303030
}

.menu .submenu li:hover a {
  border-left: 3px solid #454545;
  color: #fff
}

.menu > li:hover .submenu,
.menu > li:focus .submenu {
  max-height: 2000px;
  z-index: 10
}

.menu > li:hover .submenu li,
.menu > li:focus .submenu li {
  opacity: 1;
  transform: none
}

.menu li:hover .submenu li:nth-child(1) {
  transition-delay: 0s
}

.menu li:hover .submenu li:nth-child(2) {
  transition-delay: 50ms
}

.menu li:hover .submenu li:nth-child(3) {
  transition-delay: 100ms
}

.menu li:hover .submenu li:nth-child(4) {
  transition-delay: 150ms
}

.menu li:hover .submenu li:nth-child(5) {
  transition-delay: 200ms
}

.menu li:hover .submenu li:nth-child(6) {
  transition-delay: 250ms
}

.menu li:hover .submenu li:nth-child(7) {
  transition-delay: 300ms
}

.menu li:hover .submenu li:nth-child(8) {
  transition-delay: 350ms
}

.submenu li:nth-child(1) {
  transition-delay: 350ms
}

.submenu li:nth-child(2) {
  transition-delay: 300ms
}

.submenu li:nth-child(3) {
  transition-delay: 250ms
}

.submenu li:nth-child(4) {
  transition-delay: 200ms
}

.submenu li:nth-child(5) {
  transition-delay: 150ms
}

.submenu li:nth-child(6) {
  transition-delay: 100ms
}

.submenu li:nth-child(7) {
  transition-delay: 50ms
}

.submenu li:nth-child(8) {
  transition-delay: 0s
}

.menu > li:nth-child(1) {
  border-right: 2px solid #111
}

.menu > li:nth-child(2),
.menu > li:nth-child(3),
.menu > li:nth-child(4),
.menu > li:nth-child(5),
.menu > li:nth-child(6),
.menu > li:nth-child(7),
.menu > li:nth-child(8) {
  border-right: 2px solid #111;
  border-left: 2px solid #333
}

3. A continuación se muestra este menú debajo de la cabecera, si se utiliza la estructura de la plantilla HTML5 continuación, busque el código </header> y, a continuación colocar el siguiente código justo debajo. Como alternativa, también se podría poner el siguiente código justo por encima del código <div id='main-wrapper'> o <article id='main-wrapper'>

<nav>
<ul class='menu'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='#'>Menu 1</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li class='active'><a href='#'>Menu 2</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu 3</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu 4</a></li>
    <li><a href='#'>Menu 5</a></li>
</ul>
</nav>

4. El último paso guardar la plantilla.

Así, un simple tutorial para hacer Blogger desplegables animaciones CSS Menú. Mi esperanza después de conocer los elementos individuales del código de la plantilla a continuación, puede crear usted mismo para hacer una mirada blog como un deseo respectivas creaciones.
Demostración

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

ANIMACIÓN CSS menú desplegable BLOGGER.

Comparte

BLOGUERO TUTORIAL