Bootstrap Snippet Default Select Drop-Down List with just CSS using HTML CSS Javascript

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>Dropy</h1>
<h2>A Simple SCSS & jQuery dropdown</h2>
<main>
  <p><a href="http://codepen.io/Tombek/pen/OPvpLe" target="_blank">I've made a new version of Dropy !</a></p>
</main>
<dl class="dropdown">
    <dt><a><span>Dropdown n°1</span></a></dt>
        <dd>
            <ul>
                <li><a class="default">Dropdown n°1</a></li>
                <li><a>Option n°1</a></li>
                <li><a>Option n°2</a></li>
                <li><a>Option n°3</a></li>
            </ul>
        </dd>
</dl>
<dl class="dropdown">
    <dt><a><span>Dropdown n°2</span></a></dt>
        <dd>
            <ul>
                <li><a class="default">Dropdown n°2</a></li>
                <li><a>Option n°1</a></li>
                <li><a>Option n°2</a></li>
                <li><a>Option n°3</a></li>
                <li><a>Option n°4</a></li>
                <li><a>Option n°5</a></li>
                <li><a>Option n°6</a></li>
            </ul>
        </dd>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
@import "compass/css3";
/* Variables */
$width: 15em; // dropdown width
$height: 2.5em; // dropdown height
$ajust: 1em; // left & right padding in dropdown menu
$radius: 3px;
/* Colors */
$black: #4d4d4d;
$grey: #ecf0f1;
$dark-grey: #bdc3c7;
$green: #2ecc71;
/* Common style */
*{ box-sizing: border-box; }
body{
  font-family: 'Open Sans', sans-serif;
  color: $black;
}
h1{
  font-family: 'Playball', cursive;
  font-size: 6em;
  font-weight: 700;
  text-align: center;
  color: $green;
  
  margin: 0.25em 0; // Cosmetic value
}
h2{
  font-style: italic;
  text-align: center;
  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
var dropdowns = $(".dropdown");
// Onclick on a dropdown, toggle visibility
dropdowns.find("dt").click(function(){
    dropdowns.find("dd ul").hide();
    $(this).next().children().toggle();
});
// Clic handler for dropdown
dropdowns.find("dd ul li a").click(function(){
    var leSpan = $(this).parents(".dropdown").find("dt a span");
  
    // Remove selected class
    $(this).parents(".dropdown").find('dd a').each(function(){
    $(this).removeClass('selected');
  });
  
    // Update selected value
    leSpan.html($(this).html());
  
    // If back to default, remove selected class else addclass on right element
    if($(this).hasClass('default')){
    leSpan.removeClass('selected')
  }
    else{
        leSpan.addClass('selected');
        $(this).addClass('selected');
    }
  
    // Close dropdown
    $(this).parents("ul").hide();
});
// Close all dropdown onclick on another element
$(document).bind('click', function(e){
    if (! $(e.target).parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Default Select Drop-Down List with just CSS"
Bootstrap 3.3.0 Snippet by Deepashika

Related: See More

Questions / Comments:

"Default Select Drop-Down List with just CSS" Bootstrap 3.3.0 Snippet by Deepashika

Related: See More

Questions / Comments:

"Default Select Drop-Down List with just CSS"
Bootstrap 3.3.0 Snippet by Deepashika