Site Overlay

Custom dropdown using bootstrap css and small jQuery

Create custom dropdown using jQuery, but you will need the bootstrap css or at least code of bootstrap dropdown which exists in the bootstrap css. So it will help to make it work.

Purpose behind this dropdown is you can add anything in this dropdown and this will not close till you click outside of it.

Here is html code for that

<div class="dropdown">
<a href="#" data-toggle="at-custom-dropdown">Menu Toggle</a>
<ul class="dropdown-menu">
    <li>This is first menu</li>
    <li>This is second menu</li>
    <li>This is third menu</li>
    <li>This is fourth menu</li>
    <li>This is fith menu</li>
</ul>
</div>

Here is script for that.

$('[data-toggle="at-custom-dropdown"]').on('click', function(){
    $(this).closest('.dropdown').toggleClass('open');
  })

  $('body').click(function(e){
    var clickedOn = $(e.target);
    if (clickedOn.closest('.at-custom-dropdown').length){
      //Inside
    }else{
      //Outside
      $('.at-custom-dropdown').removeClass('open')
    }
  });

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2022 Dip Codes. All Rights Reserved.