CODEWITHSUNDEEP
javascriptdrop-down-menu
Göran Kempe
Göran Kempe

Reputation: 97

How do I make the dropdown menu not being down when you enter the website?

When you enter my website (goerann.com) the dropdown register-box is down by default.

If I click in Register, the register-box toogles it visibility as I want, but it doesn't start hidden by default.

$(document).ready(function() {
  $('#signup').click(function() {
    $('.signupmenu').slideToggle("fast");
  });
});

I want it to only show when you click on it. How can I make this happen?

Here's my jsfiddle (http://jsfiddle.net/bdv2doxr/)

Upvotes: 1

Views: 24

Answers (2)

Tricky12
Tricky12

Reputation: 6822

You need to make two changes, both involving the removal of display: block. When you toggle this div, it will make the display block. Therefore, you can initialize it as display: none.

Change this:

<div class="signupmenu" style="display: block;">

to this:

<div class="signupmenu">

And also change this:

.signupmenu {
    background-color: #FFF;
    display: block;
    ...

to this:

.signupmenu {
    background-color: #FFF;
    display: none;
    ...

Updated fiddle here

Upvotes: 0

Buzinas
Buzinas

Reputation: 11725

Since you're already using the $(document).ready event, you can hide the menu there:

$(document).ready(function() {
  $('.signupmenu').hide();
  $('#signup').click(function() {
    $('.signupmenu').slideToggle("fast");
  });
});

And here is your fiddle updated.

Upvotes: 1

Related Questions