CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Somename
Somename

Reputation: 3444

Bootstrap custom dropdown menu

I managed to slideDown the dropdown menu with the following code. But this obviously works only when the dropdown-toggle class is clicked.

How do I integrate the Bootstrap's function of when the li in the dropdown is clicked or when clicked outside, the dropdown menu dissapears.

$('.dropdown-toggle').click(function() {
    $(this).next('.dropdown-menu').slideToggle(500);
});
<div class="dropdown">
    <div class="dropdown-toggle" data-toggle="dropdown">Click Me</div>
    <ul class="dropdown-menu optfulwidth ulreligion">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Upvotes: 0

Views: 10767

Answers (2)

Karel Tamayo
Karel Tamayo

Reputation: 3760

If you want something more elaborated you could put together the awesome Animate.css, (a cross-browser library of CSS animations), a bit of jquery and of course, Twitter Boostrap.

In your header:

<head>
    ...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
</head>

In your body where you want to create the dropdown:

<div class="dropdown" data-animation="slideInDown,slideOutUp,600">
            <button type="button" class="btn btn-primary" data-toggle="dropdown">Click to toggle animated dropdown <i class="caret"></i></button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

Note the data-animation attribute in the markup, you must provide 3 parameters, the in-animation, the out-animation and the duration.

You can play if you like with other animations.

In your footer (or wherever you render your scripts):

<script src="js/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function () {

        var $in, $out, $duration;
        $('.dropdown')
            .on('shown.bs.dropdown',
                function (e) {
                    if ($(this).attr('data-animation')) {
                        let $animations = [];
                        const $animation = $(this).data('animation');
                        $animations = $animation.split(',');
                        $in = 'animated ' + $animations[0];
                        $out = 'animated ' + $animations[1];
                        $duration = '';
                        if (!$animations[2]) {
                            $duration = 500;
                        } else {
                            $duration = $animations[2];
                        }
                        $(this).find('.dropdown-menu').removeClass($out);
                        $(this).find('.dropdown-menu').addClass($in);
                    }
                });

        $('.dropdown')
            .on('hide.bs.dropdown',
                function (e) {
                    if ($(this).attr('data-animation')) {
                        e.preventDefault();
                        const $this = $(this);
                        const $targetControl = $this.find('.dropdown-menu');

                        $targetControl.addClass($out);
                        setTimeout(function () {
                            $this.removeClass('open');
                        },
                        $duration);
                    }
                });
    })
</script>

Hope this helps!

Need a full sample?

        $(function () {

            var $in, $out, $duration;
            $('.dropdown')
                .on('shown.bs.dropdown',
                    function (e) {
                        if ($(this).attr('data-animation')) {
                            let $animations = [];
                            const $animation = $(this).data('animation');
                            $animations = $animation.split(',');
                            $in = 'animated ' + $animations[0];
                            $out = 'animated ' + $animations[1];
                            $duration = '';
                            if (!$animations[2]) {
                                $duration = 500;
                            } else {
                                $duration = $animations[2];
                            }
                            $(this).find('.dropdown-menu').removeClass($out);
                            $(this).find('.dropdown-menu').addClass($in);
                        }
                    });

            $('.dropdown')
                .on('hide.bs.dropdown',
                    function (e) {
                        if ($(this).attr('data-animation')) {
                            e.preventDefault();
                            const $this = $(this);
                            const $targetControl = $this.find('.dropdown-menu');

                            $targetControl.addClass($out);
                            setTimeout(function () {
                                $this.removeClass('open');
                            },
                            $duration);
                        }
                    });
        })
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />

<div class="dropdown" data-animation="slideInDown,slideOutUp,600">
            <button type="button" class="btn btn-primary" data-toggle="dropdown">Click to toggle animated dropdown <i class="caret"></i></button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 0

nolawi
nolawi

Reputation: 4649

you do not need additional css to have dropdown open and close.

<div class="dropdown clearfix">
 <div class="dropdown-toggle" data-toggle="dropdown"><a>Click Me</a></div>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" >
  <li><a  href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a  href="#">three</a></li>

  </ul>
</div>

here is a bootply

and if you want it to slide down add the below

  // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
 $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
 });

Upvotes: 2

Related Questions