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: [url]http://tonaq.com/dropdown
jQuery download link: [url]http://tonaq.com/dropdown/jquery-1.4.2.min.zip
thanks a lot!!!