Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Dropdown animation to normal dropdown

I have this dropdown
User generated image
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;"> &nbsp; &nbsp;My Profile</a></li>
       <li><a href="../logout.php"> &nbsp; &nbsp;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');
	    }
	  });
	});

Open in new window


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?
Avatar of Jazzy 1012
Jazzy 1012

ASKER

here is where i got the drop down code from toddmotto.com/flawless-clickable-drop-down-navigation
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
I can remove the animation, its not a main concern I just want it to function properly.