add

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


emailEnviar por correo

6 comentarios:

  1. Gracias webmaster por publicar este articulo realmente me sirvio de mucho...

    ResponderEliminar
  2. no comprendo donde conseguir el codigo q dice el paso 7 :(

    ResponderEliminar
  3. El paso 7 se encuentra dentro de tu codigo HTML de tu blog, busca el menu de tu blog, y remplazalo tal como muestro en mi tutorial, y si no sabes como hacerlo ya te envie la direccion de mi correo electronico para ayudarte directamente.
    Saludos.

    ResponderEliminar
  4. Hola Luis Quisiera como hacer para poner un SCROLL DE NOTICIAS EN MOVIENTO debajo del menu algo asi como la plantillas de tiempos modernos que tiene un head line las noticias se mueven

    ResponderEliminar
    Respuestas
    1. Hola, sigue este enlace: http://www.ayudadeblogger.com/2013/06/trucos-para-blogger-noticias-en-movimiento.html
      Saludos.

      Eliminar
  5. No entiendo bien lo que has hecho. Por favor pdrías ayudarme, hacer un vídeo u algo...

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios