dcsimg
www.webdeveloper.com
Results 1 to 1 of 1

Thread: drop down menu

  1. #1
    Join Date
    Mar 2010
    Location
    Serbia
    Posts
    22

    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 07: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
  •  
HTML5 Development Center



Recent Articles