drop down menu
Hi guys!
I have short code for excellent drop-down menu using jQuery, and its working almost perfect...only problem is when i click on first menu option to next menu option, first is still on screen (should be hidden)... here is code:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".shdivlink1").click(function(){$(".shdiv1").slideDown('fast', function() {});
if ($(".shdiv1").is(':hidden'))$(".shdiv1").show();else{$(".shdiv1").hide();}return false;});
$('.shdiv1, .shdivlink1').click(function(e) {e.stopPropagation();});$(document).click(function() {
$('.shdiv1').hide();$(".shdiv1").slideUp('fast', function() {$(".shdiv1").fadeOut('fast');});});});
$(document).ready(function(){
$(".shdivlink2").click(function(){$(".shdiv2").slideDown('fast', function() {});
if ($(".shdiv2").is(':hidden'))$(".shdiv2").show();else{$(".shdiv2").hide();}return false;});
$('.shdiv2, .shdivlink2').click(function(e) {e.stopPropagation();});$(document).click(function() {
$('.shdiv2').hide();$(".shdiv2").slideUp('fast', function() {$(".shdiv2").fadeOut('fast');});});});
</script>
</head>
<style type="text/css">
a{text-decoration: underline;color: blue;cursor: pointer;}
.shdiv1{background:#fcfcfc;position:absolute;top:120px;left:100px;border:solid 1px #000;padding:10px;display: none;}
.shdiv2{background:#fcfcfc;position:absolute;top:120px;left:180px;border:solid 1px #000;padding:10px;display: none;}
</style>
<a class="shdivlink1" style='position:absolute;top:90px;left:100px;'>colors</a>
<div class="shdiv1"><a href="index.html#">red</a><br><a href="index.html#">green</a><br><a href="index.html#">blue</a><br></div>
<a class="shdivlink2" style='position:absolute;top:90px;left:180px;'>fruts</a>
<div class="shdiv2"><a href="index.html#">apple</a><br><a href="index.html#">pear</a><br><a href="index.html#">banana</a><br></div>
<div style="position:absolute;left:300px;top:50px;width:200px;height:100px;background-color:#fcfcfc;border:solid 1px #000">
some div ....text text text text text text text text text text text text text text text text text text text text text text
</div>
demo of code: http://tonaq.com/dropdown
jQuery download link: http://tonaq.com/dropdown/jquery-1.4.2.min.zip
thanks a lot!!!
Last edited by remaeis; 02-25-2011 at 06:12 AM .
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Bookmarks