Question : Trouble with clarklab dropdown

I am using the clarklabs Animated Drop Down Menu with jQuery but I am trying to make a few changes. The biggest being that it was made to open on click instead of rollover. I have changed this from
$('img.menu_head').click(
to
 $('img.menu_head').mouseover(
and I can add a mouseout but the problem is that it doesnt count the dropdown so when you rollout of the img.menu_head then the menu closes. How can I include the dropdown in that rollout.

 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:

<script type="text/javascript">
$(document).ready(function () {
	$("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').mouseover(function () {
	$('ul.menu_body').slideToggle('medium');
    });
	$('img.menu_head').mouseout(function () {
	$('ul.menu_body').slideToggle('medium');
	});
	$('ul.menu_body li a').mouseover(function () {
	$(this).animate({ fontSize: "11px", paddingLeft: "10px"}, 50 );
    });
	$('ul.menu_body li a').mouseout(function () {
	$(this).animate({ fontSize: "11px", paddingLeft: "10px" }, 50 );
    });
});

//then the html is 

<div class="menu_bodyB">
<img src="org.jpg" width="92" height="16" class="menu_head" />
<ul class="menu_body">
<li><a href="#">ABOUT NOMA</a></li>
<li><a href="#">MESSAGE FROM THE PRESIDENT</a></li>
<li><a href="#">LEADERSHIP</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>

Answer : Trouble with clarklab dropdown

A few more tweaks - I changed the scope of the mouseenter and mouseleave function to be the <td> tag where the Div, img, and ul live.  When you go live with this you will likely need to be more specific than this:

$('td').mouseenter

Likely you will put an ID on your table like:  <table id="menu">

So your top selector would be:

$("table.menu td").mouseenter....



Also, I wiped out the mouseover and mouseout events on your images and added a little query to accomplish this:


                  $("img.menu_head").hover(
                        function(){$(this).attr("src","http://creativeness.com/eetest/org-dn.jpg")},
                        function(){$(this).attr("src","http://creativeness.com/eetest/org.jpg")}
                  );
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:

<!DOCTYPE html>
<html>
<head>
<style>
body{background:#000000;font-family:Arial, Helvetica, sans-serif; font-size:11px;}
ul, li{margin:0; padding:0; list-style:none;}
a, a:hover {text-decoration:none;}

img.menu_head{cursor: pointer;display:block;width:100%;}

.menu_bodyB {
	width:100px;
	z-index: 100;
	position:absolute; z-index:10; margin-left:0px; top:10px;
}


td {color:#fff;width:92px;position:relative;}
.menu_body {display:none; width:242px; font-weight:bold;position:absolute;}
.menu_body li{background-image: url('http://creativeness.com/eetest/bg.png');}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding-top:4px;  padding-bottom:4px; padding-left:10px; display:block; }
.menu_body li a:hover{color:#663300;background-image: url('http://creativeness.com/eetest/bg-over.png')}

</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
		var t;
		var slidingUL;

		$(document).ready(function () {
			$('td')
				.mouseenter(function () {
					//get the item to show
					slidingUL = $('ul.menu_body',$(this));


					//stop the previous timer
					clearTimeout(t);

					$("ul.menu_body").not(slidingUL)
					.hide("fast",
						//callback function of the hide animation
						function(){
							//call the showmenu after 100 milliseconds
							t = setTimeout("showmenu()", 100)
					})
					//stop all animations on menu bodys that are not this one
					.stop(true,true)
				.mouseleave(function(){
					//$('ul.menu_body',$(this)).hide()
				});

			});


			$("img.menu_head").hover(
				function(){$(this).attr("src","http://creativeness.com/eetest/org-dn.jpg")},
				function(){$(this).attr("src","http://creativeness.com/eetest/org.jpg")}
			);


			//hide all menu items
			$("td, table").mouseleave(function(){
				$("ul.menu_body").hide();
			});

		});

		function showmenu(menu) {
			if(t){
				//clear the timer object
				clearTimeout(t);

				//hide all ul's that are NOT the "current" ul and
				//stop any pending animations
				$("ul.menu_body").not(slidingUL).hide().stop(true,true);

				//slide the menu down
				$(slidingUL).slideDown(100);


			}
		}


	</script>

</head>
<body>
<table width="376" border="0" style="border-color:#fff;" cellspacing="0" cellpadding="0">
  <tr>

    <td width="92">
		<div class="menu_bodyB">
			<img src="http://creativeness.com/eetest/org.jpg" width="92" height="16" class="menu_head" alt="menu head"   />
			<ul class="menu_body">
				<li><a href="#">ABOUT NOA</a></li>
				<li><a href="#">MESSAGE FROM THE PRESIDENT</a></li>
				<li><a href="#">LEADERSHIP</a></li>
				<li><a href="#">FAQ</a></li>

			</ul>
		</div>
	</td>
    <td width="50">&nbsp;</td>
    <td width="92">
    	<div class="menu_bodyB">
			<img src="http://creativeness.com/eetest/org.jpg" width="92" height="16" class="menu_head" alt="menu head"  />
			<ul class="menu_body">
				<li><a href="#">ABOUT NOA</a></li>
				<li><a href="#">FAQ</a></li>

			</ul>
		</div></td>
    <td width="50">&nbsp;</td>
    <td width="92">
    	<div class="menu_bodyB">
			<img src="http://creativeness.com/eetest/org.jpg" width="92" height="16" class="menu_head" alt="menu head" />
			<ul class="menu_body">
				<li><a href="#">ABOUT NOA</a></li>

				<li><a href="#">MESSAGE FROM THE PRESIDENT</a></li>
				<li><a href="#">FAQ</a></li>
			</ul>
		</div>
	</td>
  </tr>
</table><br>
<img src="http://creativeness.com/eetest/hometemp002a_r8_c4.jpg" width="650" height="244" />
</body>

</html>
Random Solutions  
 
programming4us programming4us