JQuery Sub-Menu Function


/ Published in: jQuery
Save to your folder(s)

Simple solution to add dropdowns quickly to any site.


Copy this code and paste it in your HTML
  1. function dropdown_menu() {
  2. $("#sub-menu-id a, .subnav a");
  3. $(" #sub-menu-id ").css({
  4. display: "none",
  5. opacity: "1"
  6. }); // fix for opera browser
  7. $("#sub-menu-id li").each(function () {
  8. var $subNav = jQuery(this).find('ul:first');
  9. $(this).hover(function () {
  10. $subNav.stop().css({
  11. overflow: "hidden",
  12. height: "auto",
  13. display: "none"
  14. }).slideDown(350, function () {
  15. $(this).css({
  16. overflow: "visible",
  17. height: "auto"
  18. });
  19. });
  20. }, function () {
  21. $subNav.stop().slideUp(350, function () {
  22. $(this).css({
  23. overflow: "hidden",
  24. display: "none"
  25. });
  26. });
  27. });
  28. });
  29. }
  30.  
  31.  
  32. //USAGE
  33. <script>
  34. jQuery(document).ready(function () {
  35. dropdown_menu();
  36. });
  37. </script>

URL: http://www.design-ninja.net

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.