Jazzy 1012
asked on
Dropdown animation to normal dropdown
I have this dropdown
Here is the code:
It works fine but when I click the down arrow to access it it opens in sort of a easing way from the top and button. When I just need to show like a drop down. Is it possible that when I click the down arrow, the dropdown just drops down with no effect?
Here is the code:
.fa-caret-down{postion: relative;}
#canvas-dropdown{
position: absolute;
left: 145px;
top: 35px;
}
.dropdown>.dropdown-menu{
display: none;
position: absolute;
border: 1px solid #bdc3c7;
min-width: 60px;
margin: 0;
}
.dropdown.open>.dropdown-menu{
display: inline-block;
}
.click-nav ul {position:relative;display:inline-block;margin-left:-40px}
.click-nav ul li {position:relative;list-style:none;cursor:pointer;}
.click-nav ul li ul {position:absolute;left:0;right:0;}
.click-nav ul .clicker {position:relative;}
.click-nav ul li a {display:block;color:black;text-decoration:none;margin-left:-30px;margin-top:55px}
.click-nav .no-js ul {display:none;}
.click-nav .no-js:hover ul {display:block;}
.click-nav ul li a {transition:background-color 0.2s ease-in-out;
-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;display:block;padding:8px 10px 8px 0px;
background:#FFF;color: #18181d;text-decoration:none;}
.click-nav ul li a:hover {background:#F2F2F2;color: #18181d;}
<span class="click-nav">
<ul class="no-js">
<li>
<i class="fa fa-caret-down clicker"></i> I </span>
<ul style="margin-top:-35px;margin-left:-115px;width:160px;text-align:left;">
<li><a href="../profile" style= "margin-bottom:-60px;"> My Profile</a></li>
<li><a href="../logout.php"> Logout</a></li>
</ul>
</li>
</ul>
</span>
$(function () {
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function(e) {
$('.click-nav .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.click-nav .js ul').is(':visible')) {
$('.click-nav .js ul', this).slideUp();
$('.clicker').removeClass('active');
}
});
});
It works fine but when I click the down arrow to access it it opens in sort of a easing way from the top and button. When I just need to show like a drop down. Is it possible that when I click the down arrow, the dropdown just drops down with no effect?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes now it doesn't pop up, but how can I make it look smooth like it is from the arrow dropping down?
How can I show this without animation, but with animation?
Ahem?
Ahem?
ASKER
I can remove the animation, its not a main concern I just want it to function properly.
ASKER