Dropdown animation to normal dropdown

Question

I have this dropdown

Heres my code:

$(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');
    }
  });
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

https://jsfiddle.net/5p6d6urc/

It works fine but when I click the down arrow to access it it opens in sort of a easing(popup) 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?

Answer 1

Why not simply change the duration of the slideToggle() animation to 1ms?

Here's the updated fiddle: https://jsfiddle.net/5p6d6urc/3/

$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(1);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
      $('.click-nav .js ul', this).slideUp();
      $('.clicker').removeClass('active');
    }
  });
});

.click-nav {margin:100px auto;width:200px;}
.click-nav ul {position:relative;font-weight:900;padding-left:0}
.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;background:#2284B5;color:#FFF;}
.click-nav ul .clicker:hover,.click-nav ul .active {background:#196F9A;}
.click-nav img {position:absolute;top:9px;left:12px;}
.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 40px;background:#FFF;color:#333;text-decoration:none;}
.click-nav ul li a:hover {background:#F2F2F2;}

/* Fallbacks */
.click-nav .no-js ul {display:none;}
.click-nav .no-js:hover ul {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click-nav">
  <ul class="no-js">
    <li>
      <a href="#" class="clicker">hi</a>
      <ul>
        <li><a href="#">hi</a></li>
        <li><a href="#">hi</a></li>


      </ul>
    </li>
  </ul>
</div>