Advanced Search

JQuery Sub-Menu Function

/ Published in: jQuery
Save to your folder(s)
Simple solution to add dropdowns quickly to any site.

Expand | Embed | Plain Text

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.