RSS

[Javascript] Menú deslizante usando Jquery

Mie, Jun 11, 2008

Ajax, Ajaxman, Javascript, Jquery, Programacion, Recursos

El seraphinux ultimamente le ha dado por escribir mas que de costumbre y gracias ha ello me he encontrado con un menú deslizante echo con Javascript.

Para que se den una idea de que les hablo aquí esta la imagen de menú normal

sliding-top-menu

Y aquí la imagen del menú pero ahora desplazado, o deslizado.

jquery-sliding-menu

Esto fue hecho gracias a la potencialidad y funcionalidad de Jquery, que es muy fácil de adaptarse a cualquier uso.

Veamos como se hizo, siguiendo el ejemplo de la fuente.

Primero necesitamos usar HTML,

PLAIN TEXT
HTML:
  1. <div id="sliderWrap">
  2.     <div id="openCloseIdentifier"></div>
  3.     <div id="slider">
  4.         <div id="sliderContent">
  5.             Isn’t this nice?
  6.         </div>
  7.         <div id="openCloseWrap">
  8.             <a href="#" class="topMenuAction" id="topMenuImage">
  9.                 <img src="open.png" alt="open" />
  10.             </a>
  11.         </div>
  12.     </div>
  13. </div>

Ahora le aplicamos el siguiente CSS

PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. body {
  3. margin: 0;
  4. font-size:16px;
  5. color: #000000;
  6. font-family:Arial, Helvetica, sans-serif;
  7. }
  8. #sliderWrap {
  9. margin: 0 auto;
  10. width: 300px;
  11. }
  12. #slider {
  13. position: absolute;
  14. background-image:url(slider.png);
  15. background-repeat:no-repeat;
  16. background-position: bottom;
  17. width: 300px;
  18. height: 159px;
  19. margin-top: -141px;
  20. }
  21. #slider img {
  22. border: 0;
  23. }
  24. #sliderContent {
  25. margin: 50px 0 0 50px;
  26. position: absolute;
  27. text-align:center;
  28. background-color:#FFFFCC;
  29. color:#333333;
  30. font-weight:bold;
  31. padding: 10px;
  32. }
  33. #header {
  34. margin: 0 auto;
  35. width: 600px;
  36. background-color: #F0F0F0;
  37. height: 200px;
  38. padding: 10px;
  39. }
  40. #openCloseWrap {
  41. position:absolute;
  42. margin: 143px 0 0 120px;
  43. font-size:12px;
  44. font-weight:bold;
  45. }
  46. </style>

Y para hacerlo funcionar usamos Jquery de la siguiente forma

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript"><!--
  2. $(document).ready(function() {
  3.     $(".topMenuAction").click( function() {
  4.         if ($("#openCloseIdentifier").is(":hidden")) {
  5.             $("#slider").animate({
  6.                 marginTop: "-141px"
  7.                 }, 500 );
  8.             $("#topMenuImage").html(’<img src="open.png" mce_src="open.png" />’);
  9.             $("#openCloseIdentifier").show();
  10.         } else {
  11.             $("#slider").animate({
  12.                 marginTop: "0px"
  13.                 }, 500 );
  14.             $("#topMenuImage").html(’<img src="close.png" mce_src="close.png" />’);
  15.             $("#openCloseIdentifier").hide();
  16.         }
  17.     });
  18. });
  19. // --></script>

Como ven es bastante simple, las imagenes usadas y el ejemplo de esto lo podrán encontrar en

http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/

Aunque ultimamente me ha estado atrayendo bastante Mootools, Jquery sigue teniendo muchisima utilidad.

Estoy planeando algo grande (después de que libere algo que tengo pendiente ups, solo me falta terminar la traducción y listo), que tendrá bastante Ajax y javascript, la pelea esta en que Framework utilizare, tal vez sera Jquery o Mootools, no lo se hagan sus apuestas.

Vía | Menu deslizante con jQuery
Surgio en | Sliding Top Menu With jQuery

, , , ,

This post was written by:

Ajaxman - who has written 611 posts on Ajaxman.


Contact the author

Leave a Reply