CODEWITHSUNDEEP
javascriptcssdropdownshow-hideslideup
aref razavi
aref razavi

Reputation: 422

javascript and CSS3 translate Y dropdown

I have a dropdown div that it have a open/hide button, I want to transform: translateY(-280px); the div for slide-up.

slideup completely image

the problem is in different devices, transform: translateY(-280px); is different! and sometime it does not rise completely, and half of div is shown!!

slideup half image

how can I slide up div completely in any other devices?

css :

.slideUp {
    -webkit-transform: translateY(-280px);
    transform: translateY(-280px);
    transition: transform 0.5s ease-out;
}

.slideDown {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: transform 0.5s ease-out;
}

javascript:

$('#arrow-down').click(function() {
    header.classList.remove("slideUp");
    header.classList.add("slideDown");
    $('#arrow-down').css('display', 'none');
    $('#arrow-up').css('display', 'block');
});

$('#arrow-up').click(function() {
    header.classList.remove("slideDown");
    header.classList.add("slideUp");
    $("#arrow-up").css("display", "none");
    $("#arrow-down").css("display", "block");
});

Upvotes: 0

Views: 192

Answers (1)

topsoftwarepro
topsoftwarepro

Reputation: 822

The below way of dropdown works with all screen sizes, you can change it to open on click and not hover.

.drop-button {
  padding: 10px;
  background-color: #B0E0E6;
  border: 1px solid #007BFF;
  border-radius: 0.5em;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .content {
padding: 10px;
  border: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  display: none;
  position: absolute;
}

.dropdown:hover .content {
  display: block;
}
<div class="dropdown">
  <button class="drop-button">Click Drop</button>
  <div class="content">
    <span>Dropdown Content!</span>
  </div>
</div>

Upvotes: 0

Related Questions