codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Dropdowns – Bootstrap style

    14th January 2015

    Jquery Misc

    jquery icon

    This snippet may be longer than normally written, but it contains the essentials for bootstrap style dropdowns.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
     
    <!DOCTYPE html>
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>jQuery Bootstrap-style Dropdowns</title>
    <meta charset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
    <p>
    <a class="" href="#" data-dropdown="#dropdown-1">Here’s a link</a>
    and here’s a button <input class="" value="Dropdown" data-dropdown="#dropdown-1" type="button">
    and here’s a <span class="example" data-dropdown="#dropdown-1">span</span>
    </p>
    <h3>Scrolling</h3>
    <p>
    Now let’s see a really long dropdown that will scroll: <span class="example" data-dropdown="#dropdown-3">Example</span>
    </p>
    <h3>Form Controls</h3>
    <p>
    You can add form controls to your dropdowns: <span class="example" data-dropdown="#dropdown-2">Example</span>
    </p>
    <h3>With Icons</h3>
    <p>
    You can use CSS to add icons to your dropdowns: <span class="example" data-dropdown="#dropdown-5">Example</span>
    </p>
    <h3>Panels</h3>
    <p>
    Dropdowns can have regular HTML, too. <span class="example" data-dropdown="#dropdown-6">Example</span>
    </p>
     
    <!-- Remember to put your dropdown menus before your ending BODY tag -->
    <div style="display: none; left: 759.5px; top: 1424.4px;" id="dropdown-1" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
    <li><a href="#1">Item 1</a></li>
    <li><a href="#2">Item 2</a></li>
    <li><a href="#3">Item 3</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#4">Item 4</a></li>
    <li><a href="#5">Item 5</a></li>
    <li><a href="#5">Item 6</a></li>
    </ul>
    </div>
    <div style="display: none; left: 845.5px; top: 1577.7px;" id="dropdown-2" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
    <li><label><input checked="checked" type="checkbox"> Checkbox 1</label></li>
    <li><label><input checked="checked" type="checkbox"> Checkbox 2</label></li>
    <li><label><input type="checkbox"> Checkbox 3</label></li>
    <li class="dropdown-divider"></li>
    <li><label><input name="radio-group" checked="checked" type="radio"> Radio 1</label></li>
    <li><label><input name="radio-group" type="radio"> Radio 2</label></li>
    <li><label><input name="radio-group" type="radio"> Radio 3</label></li>
    </ul>
    </div>
    <div style="display: none; left: 875.5px; top: 1501.9px;" id="dropdown-3" class="dropdown dropdown-tip dropdown-scroll">
    <ul class="dropdown-menu">
    <li><a href="#1">Item 1</a></li>
    <li><a href="#2">Item 2</a></li>
    <li><a href="#3">Item 3</a></li>
    <li><a href="#4">Item 4</a></li>
    <li><a href="#5">Item 5</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#6">Item 6</a></li>
    <li><a href="#7">Item 7</a></li>
    <li><a href="#8">Item 8</a></li>
    <li><a href="#9">Item 9</a></li>
    <li><a href="#10">Item 10</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#11">Item 11</a></li>
    <li><a href="#12">Item 12</a></li>
    <li><a href="#13">Item 13</a></li>
    <li><a href="#14">Item 14</a></li>
    <li><a href="#15">Item 15</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#16">Item 16</a></li>
    <li><a href="#17">Item 17</a></li>
    <li><a href="#18">Item 18</a></li>
    <li><a href="#19">Item 19</a></li>
    <li><a href="#20">Item 20</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#21">Item 21</a></li>
    <li><a href="#22">Item 22</a></li>
    <li><a href="#23">Item 23</a></li>
    <li><a href="#24">Item 24</a></li>
    <li><a href="#25">Item 25</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#26">Item 26</a></li>
    <li><a href="#27">Item 27</a></li>
    <li><a href="#28">Item 28</a></li>
    <li><a href="#29">Item 29</a></li>
    <li><a href="#30">Item 30</a></li>
    </ul>
    </div>
    <div id="dropdown-4" class="dropdown dropdown-tip dropdown-anchor-right">
    <ul class="dropdown-menu">
    <li><a href="#1">Item 1</a></li>
    <li><a href="#2">Item 2</a></li>
    <li><a href="#3">Item 3</a></li>
    <li class="dropdown-divider"></li>
    <li><a href="#4">Item 4</a></li>
    <li><a href="#5">Item 5</a></li>
    <li><a href="#5">Item 6</a></li>
    </ul>
    </div>
    <div style="display: none; left: 871.5px; top: 1653.5px;" id="dropdown-5" class="dropdown dropdown-tip has-icons">
    <ul class="dropdown-menu">
    <li class="undo"><a href="#">Undo</a></li>
    <li class="redo"><a href="#">Redo</a></li>
    <li class="dropdown-divider"></li>
    <li class="cut"><a href="#">Cut</a></li>
    <li class="copy"><a href="#">Copy</a></li>
    <li class="paste"><a href="#">Paste</a></li>
    <li class="delete"><a href="#">Delete</a></li>
    </ul>
    </div>
    <div id="dropdown-6" class="dropdown dropdown-tip has-icons">
    <div class="dropdown-panel">
    Here is some HTML inside of a dropdown. You can put pretty much
    anything inside of a dropdown, so have fun with it!
    </div>
    </div>
     
     
    </body></html>
     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
     
    <style>
    .dropdown {
    position: absolute;
    z-index: 9999999;
    display: none;
    }
     
    .dropdown .dropdown-menu,
    .dropdown .dropdown-panel {
    min-width: 160px;
    max-width: 360px;
    list-style: none;
    background: #FFF;
    border: solid 1px #DDD;
    border: solid 1px rgba(0, 0, 0, .2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    overflow: visible;
    padding: 4px 0;
    margin: 0;
    }
     
    .dropdown .dropdown-panel {
    padding: 10px;
    }
     
    .dropdown.dropdown-tip {
    margin-top: 8px;
    }
     
    .dropdown.dropdown-tip:before {
      position: absolute;
      top: -6px;
      left: 9px;
      content: '';
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #CCC;
      border-bottom-color: rgba(0, 0, 0, 0.2);
      display: inline-block;
    }
     
    .dropdown.dropdown-tip.dropdown-anchor-right:before {
    left: auto;
    right: 9px;
    }
     
    .dropdown.dropdown-tip:after {
      position: absolute;
      top: -5px;
      left: 10px;
      content: '';
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #FFF;
      display: inline-block;
    }
     
    .dropdown.dropdown-tip.dropdown-anchor-right:after {
    left: auto;
    right: 10px;
    }
     
     
    .dropdown.dropdown-scroll .dropdown-menu,
    .dropdown.dropdown-scroll .dropdown-panel {
    max-height: 358px;
    overflow: auto;
    }
     
    .dropdown .dropdown-menu LI {
    list-style: none;
    padding: 0 0;
    margin: 0;
    line-height: 18px;
    }
     
    .dropdown .dropdown-menu LI > A,
    .dropdown .dropdown-menu LABEL {
    display: block;
    color: #555;
    text-decoration: none;
    line-height: 18px;
    padding: 3px 15px;
    white-space: nowrap;
    }
     
    .dropdown .dropdown-menu LI > A:hover,
    .dropdown .dropdown-menu LABEL:hover {
    background-color: #08C;
    color: #FFF;
    cursor: pointer;
    }
     
    .dropdown .dropdown-menu .dropdown-divider {
    font-size: 1px;
    border-top: solid 1px #E5E5E5;
    padding: 0;
    margin: 5px 0;
    }
     
    /* Icon Examples - icons courtesy of http://p.yusukekamiyamane.com/ */
    .dropdown.has-icons LI > A {
    padding-left: 30px;
    background-position: 8px center;
    background-repeat: no-repeat;
    }
     
    .dropdown .undo A { background-image: url(curve-180-left.png); }
    .dropdown .redo A { background-image: url(arrow-curve.png); }
    .dropdown .cut A { background-image: url(scissors.png); }
    .dropdown .copy A { background-image: url(document-copy.png); }
    .dropdown .paste A { background-image: url(clipboard.png); }
    .dropdown .delete A { background-image: url(cross-script.png); }
     
    </style>
     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
     
    <script>
     
    if (jQuery) (function ($) {
     
        $.extend($.fn, {
            dropdown: function (method, data) {
     
                switch (method) {
                    case 'show':
                        show(null, $(this));
                        return $(this);
                    case 'hide':
                        hide();
                        return $(this);
                    case 'attach':
                        return $(this).attr('data-dropdown', data);
                    case 'detach':
                        hide();
                        return $(this).removeAttr('data-dropdown');
                    case 'disable':
                        return $(this).addClass('dropdown-disabled');
                    case 'enable':
                        hide();
                        return $(this).removeClass('dropdown-disabled');
                }
     
            }
        });
     
        function show(event, object) {
     
            var trigger = event ? $(this) : object,
    dropdown = $(trigger.attr('data-dropdown')),
    isOpen = trigger.hasClass('dropdown-open');
     
            // In some cases we don't want to show it
            if (event) {
                if ($(event.target).hasClass('dropdown-ignore')) return;
     
                event.preventDefault();
                event.stopPropagation();
            } else {
                if (trigger !== object.target && $(object.target).hasClass('dropdown-ignore')) return;
            }
            hide();
     
            if (isOpen || trigger.hasClass('dropdown-disabled')) return;
     
            // Show it
            trigger.addClass('dropdown-open');
            dropdown
    .data('dropdown-trigger', trigger)
    .show();
     
            // Position it
            position();
     
            // Trigger the show callback
            dropdown
    .trigger('show', {
    dropdown: dropdown,
    trigger: trigger
    });
     
        }
     
        function hide(event) {
     
            // In some cases we don't hide them
            var targetGroup = event ? $(event.target).parents().addBack() : null;
     
            // Are we clicking anywhere in a dropdown?
            if (targetGroup && targetGroup.is('.dropdown')) {
                // Is it a dropdown menu?
                if (targetGroup.is('.dropdown-menu')) {
                    // Did we click on an option? If so close it.
                    if (!targetGroup.is('A')) return;
                } else {
                    // Nope, it's a panel. Leave it open.
                    return;
                }
            }
     
            // Hide any dropdown that may be showing
            $(document).find('.dropdown:visible').each(function () {
                var dropdown = $(this);
                dropdown
    .hide()
    .removeData('dropdown-trigger')
    .trigger('hide', { dropdown: dropdown });
            });
     
            // Remove all dropdown-open classes
            $(document).find('.dropdown-open').removeClass('dropdown-open');
     
        }
     
        function position() {
     
            var dropdown = $('.dropdown:visible').eq(0),
    trigger = dropdown.data('dropdown-trigger'),
    hOffset = trigger ? parseInt(trigger.attr('data-horizontal-offset') || 0, 10) : null,
    vOffset = trigger ? parseInt(trigger.attr('data-vertical-offset') || 0, 10) : null;
     
            if (dropdown.length === 0 || !trigger) return;
     
            // Position the dropdown relative-to-parent...
            if (dropdown.hasClass('dropdown-relative')) {
                dropdown.css({
                    left: dropdown.hasClass('dropdown-anchor-right') ?
    trigger.position().left - (dropdown.outerWidth(true) - trigger.outerWidth(true)) - parseInt(trigger.css('margin-right'), 10) + hOffset :
    trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset,
                    top: trigger.position().top + trigger.outerHeight(true) - parseInt(trigger.css('margin-top'), 10) + vOffset
                });
            } else {
                // ...or relative to document
                dropdown.css({
                    left: dropdown.hasClass('dropdown-anchor-right') ?
    trigger.offset().left - (dropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset,
                    top: trigger.offset().top + trigger.outerHeight() + vOffset
                });
            }
        }
     
        $(document).on('click.dropdown', '[data-dropdown]', show);
        $(document).on('click.dropdown', hide);
        $(window).on('resize', position);
     
    })(jQuery);
     
    </script>
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN