Añadir efecto de jQuery SlideToggle en un menú desplegable

Añadir efecto de jQuery SlideToggle  en un menú desplegable
JQuery es una hermosa biblioteca de JavaScript que ha inflado una nueva vida en la tecnología web.  Muchos sitios web de hoy en día usan jQuery para crear gadgets y diseños que eran imposibles en el pasado. A diferencia de CSS3 y HTML5, jQuery es compatible con todos los navegadores más importantes, incluyendo + IE8.

La funcionalidad que vamos a aprender hoy se conoce como efecto Slide Toggle Jquery.

Le permite controlar los elementos de velocidad que responden al pasar el ratón estacionario. Si mueve el puntero del ratón hacia el menú desplegable (en la parte superior) en este blog, se dará cuenta que la columna cae suave y lentamente. En primer lugar, se desliza hacia abajo y luego se expande a su anchura. Vamos a utilizar una función simple de introducir esta animación en su forma más simple. 

.SlideToggle (). Esto anima a la lista desplegable y produce un bello efecto.

Anteriormente di a conocer algunos estilos de Menú desplegable para blogger de los cuales les dejo los enlaces a continuación:

  1. Como agregar un menú para mi blog de blogger con un solo widget
  2. Como hacer un Menú vertical desplegable para mi blog de blogger
  3. Como hacer un menú horizontal con submenús y buscador integrado para blogger
  4. Menu Jquery para blogger
  5. Menú desplegable para blogger
  6. Menú desplegable para blogger con imágenes
Esta animación de jQuery funciona tanto en Internet Explorer y otros navegadores más importantes, como Firefox, Safari y Chrome.


Añadir efecto de jQuery SlideToggle  en un menú desplegable


Nota: Para entender esta parte necesitara ver los tutoriales anteriores

¿Cómo funciona?



He hecho los pasos sumamente sencilla por lo que incluso los principiantes pueden amar a aplicar esta modificación dentro de sus blogs o sitios web. Sólo tenemos que crear dos clases CSS e insertarlas dentro de las etiquetas de enlace de la lista del menú y, finalmente, fijar las funciones de llamada necesarias para desencadenar el efecto. Siga estos sencillos pasos para blogger:

1.  Ir a Blogger 

2. Da un clic en "Plantilla"

3. Luego da un clic en  "Editar HTML"


Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación


En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.


4.  Busca este código <head>
5.  Justo debajo del código que encontrastes pega el siguiente código

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>                                                                                                  
Nota: Si ya has añadido el enlace de jQuery anteriormente quítalo y has uso de esta actualización en el lugar del anterior. Sus funciones antiguas seguirán funcionando correctamente.

6.
Busca este otro código
]]></b:skin>  y justo encima de él pega las siguientes clases CSS

.mbt_navigation {
        position:absolute;
        display:none;
    }
 
    .mbt_navigation li {
        clear:both;
    }

7. Ahora la última parte que necesitaran hacer.

Busca tu código de menú donde la lista desplegable comienza, agregue la clase de dropdown1 a la pestaña principal (li Tag) y añade mbt_navigation a la etiqueta Tag ul de la columna. Por favor vea nuestro código para tener una idea y observar cuidadosamente la ubicación de las dos clases. Hemos sustituido los vínculos con el símbolo # para la simplicidad.

<li class='dropdown1'><a href='#'>Tools »</a>
<ul class='mbt_navigation'>
<li><a href='#'>HTML Editor</a></li>
<li><a href='#'>Multiple SITEMAP Generator</a></li>
<li><a href='#'>Encode HTML Characters</a></li>
<li><a href='#'>Count Characters</a></li>
<li><a href='#'>Meta Tag Generator</a></li>
<li><a href='#'>Color Code Generator</a></li>

8. Por último justo después de todo el código HTML de su menú (donde termina su menú, que puede ser </ ul> o </ div>), pegue el siguiente código:

<script type='text/javascript'>
            // Wait for the page and all the DOM to be fully loaded
       
 
                    // Add the &#39;hover&#39; event listener to our drop down class
            $(&#39;.dropdown1&#39;).hover(function() {
                            // When the event is triggered, grab the current element &#39;this&#39; and
                            // find it&#39;s children &#39;.sub_navigation1&#39; and display/hide them
                $(this).find(&#39;.mbt_navigation&#39;).slideToggle();
            });
       
    </script>

9. Guardar la plantilla y ya está todo listo!

Visite su sitio web y pase el cursor sobre el cursor del ratón sobre el menú para ver que se deslice suavemente, sin un tirón!

Necesitas ayuda?

Si necesitas ayuda dejame tu comentario y te respondere de inmediato


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios