/    Sign up×
Community /Pin to ProfileBookmark

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: [url]http://tonaq.com/dropdown[/url]

jQuery download link: [url]http://tonaq.com/dropdown/jquery-1.4.2.min.zip[/url]

thanks a lot!!!

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @remaeis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...