Menu
i want to create a simple dropdown menu with div but i have this problem: when goes over my button div show pretty good but when mouse goes out from my link field (in this case show/hide text) my div goes to hide . how can i change my hide area button ? because in my files i cant select links in dropdown div.
HTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | Sliding Div</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="dropdown/drop.js" type="text/javascript"></script>
<link type="text/css" href="dropdown/drop.css" rel="stylesheet"/>
</head>
<body>
<a href="#" class="show_hide">Show/hide</a><br />
<div class="slidingDiv" style="width:103px;height:60px;">
<img alt="" height="80" src="images/dropdown.png" width="103">
</div>
</body>
</html>
CSS code:
.show_hide {
display:none;
}
JavaScript code:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').mouseover(function(){
$(".slidingDiv").slideToggle();
});
$('.show_hide').mouseout(function(){
$(".slidingDiv").slideToggle();
});
});
262
You need to wrap the link and the div into the same container,then bind the event there.
<div class="wrapper">
<a href="#" class="show_hide">Show/hide</a><br />
<div class="slidingDiv" style="width:103px;height:60px;">
<img alt="" height="80" src="images/dropdown.png" width="103">
</div>
</div>
Then,rather then biding the event to show_hide, bind it to the class 'wrapper'.
99
In addition to @roacher's answer, you will also need to crop the wrapper div tightly to the image by setting a width.
You can also replace the mouseover / mouseout pairing with a hover
And lastly, I'm not sure you want to set the sliding div's height smaller (60px) than the image (80px)?
jsFiddle here
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
