Dropdown menu javascript function

Question

I have a dropdown menu. It consists of 3 buttons ontop of eachother so only the main button is visible. When you hover over the main button saying Raffles it will make the button move upwards. Then 1 of the other 3 buttons moves down and the last one stays still. This creates a compact dropdown menu. It works perfectly except for 1 problem. I have it set to that when you hover each one it will shift them into the positions the need to be. The problem is that when I start to hover over a different button (after they have shifted) they all start to shift again because I stop hovering over 1 button and start hovering over the next button. How can I prevent this from happening?

var dropdown = function() {
    $('.inbutton, .dr1button, dr2button').hover(function() {
        $('.inbutton').animate({
            top: '-183px'
        }, 200);
        $('.dr2button').animate({
            top: '0px'
        }, 200);
    }, function() {
        $('.inbutton').animate({
            top: '-122px'
        }, 200);
        $('.dr2button').animate({
            top: '-61px'
        }, 200);
    });
};


$(document).ready(dropdown);

p.button {
    padding: 0px 13px 0px 13px;
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    height: 100%;
    transition: height 0.2s ease;
}

p.button:hover {
    height: 110%;
    border-bottom: 0px;
    cursor: pointer;
}

p.dbutton {
    padding: 0px 13px 0px 13px;
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    vertical-align: middle;
    line-height: 30.5px;
    text-align: center;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    height: 100%;
    transition: height 0.2s ease;
}

p.dbutton:hover {
    height: 110%;
    border-bottom: 0px;
    cursor: pointer;
}

p.inbutton {
    padding: 0px 13px 0px 13px;
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    top: -122px;
    z-index: 98;
}

p.inbutton:hover {
    border-bottom: 0px;
    cursor: pointer;
}

p.dr1button {
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    height: 100%;
    width: 144px;
    position: relative;
    z-index: 97;
    transition: background-color 0.2s ease;
}

p.dr1button:hover {
    background-color: #585858;
    cursor: pointer;
}

p.dr2button {
    background-color: #333333;
    float: left;
    font-family: default_font;
    font-size: 30;
    color: white;
    text-align: center;
    line-height: 61px;
    height: 100%;
    width: 144px;
    position: relative;
    top: -61px;
    z-index: 98;
    transition: background-color 0.2s ease;
}

p.dr2button:hover {
    background-color: #585858;
    cursor: pointer;
}

div.navbardivider {
    height: 61px;
    width: 1px;
    background-color: #424242;
    border-bottom: 1px solid #1C1C1C;
    box-sizing: border-box;
    float: left;
}

div.dropdown {
    width: 144px;
    float: left;
}

div.divider:hover {
    cursor: pointer;

<div id="buttons">
  <!--Home button-->
  <a href="/"><p class="button">- Home</p></a>
  <!--Divider-->
  <div class="navbardivider"></div>
  <!--Raffles Button-->
  <div class="dropdown">
    <a href="/raffles.php">
      <p class="dr1button">Open</p>
    </a>
    <a href="/clraffles.php">
      <p class="dr2button">Closed</p>
    </a>
    <p class="inbutton">Raffles</p>
  </div>
  <!--Divider-->
  <div class="navbardivider"></div>
  <!--Get tokens Button-->
  <a href="/gettokens.php"><p class="dbutton">Get<br>Tokens</p></a>
  <!--Divider-->
  <div class="navbardivider"></div>
  <!--Token lotto Button-->
  <a href="/lotto.php"><p class="dbutton">Token<br>Lotto</p></a>
</div>

Please post a complete code example including the HTML and CSS. — j08691
– j08691, Commented Dec 15, 2015 at 16:13
@ParthTrivedi Yeah sorry snippet doesn't make it work correctly. There is a live version of it at www.cshumble.com if you want to go to an external website. It is at the top left in the navbar. — Lion
– Lion, Commented Dec 15, 2015 at 16:30

Gregg Duncan · Accepted Answer · 2015-12-15 17:51:41Z

1

Your problem is here:

$('.inbutton, .dr1button, dr2button').hover

You have a couple of problems. By triggering on the button individually you mouse out of one, before mousing over the other. It triggers the close before the reopen. This causes the bouncing effect. Also you are missing the "." in front of dr2button so it's not triggering the hover effect at all.

I'd use the wrapper instead:

$('.dropdown').hover

This way once you mouse over the dropdown it stays open until you mouse out. check out this fiddle: http://jsfiddle.net/r5Lyga84/

answered Dec 15, 2015 at 17:51

Gregg Duncan

2,7251 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lion Over a year ago

This is great! Thank you so much. The answer was pretty simple I feel silly not having thought of this now. Thanks for showing me this I will try to keep this in mind in the future!

Collectives™ on Stack Overflow

Dropdown menu javascript function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related