CSS,Javascriptで作るドロップダウンリスト５パターン。
まず、ダウンロードした外部ファイルの中にある５パターン共通のCSSファイルとJSファイルを設定していく。
【 html 】
1
<head>
2
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
3
<link href=’http://fonts.googleapis.com/css?family=Lato:300,400,700′
4
rel=’stylesheet’ type=’text/css’ />
5
<script type=”text/javascript” src=”js/modernizr.custom.79639.js”></script>
6
<noscript><link rel=”stylesheet” type=”text/css” href=”css/noJS.css” /></noscript>
7
</head>
次に、それぞれのhtmlとscriptを記述していく。
effect【 1 】「 gender 」
【 html 】
1
<div class=”container”>
2
<section class=”main”>
3
<div class=”wrapper-demo”>
4
<div id=”dd” class=”wrapper-dropdown-1″ tabindex=”1″>
5
<span>Gender</span>
6
<ul class=”dropdown” tabindex=”1″>
7
<li><a href=”#”>Male</a></li>
8
<li><a href=”#”>Female</a></li>
9
</ul>
10
</div>
11
</div>
12
</section>
13
</div>
14
15
16
<!– jQuery if needed –>
17
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/
18
1.8.2/jquery.min.js”></script>
19
<script type=”text/javascript”>
20
21
function DropDown(el) {
22
this.dd = el;
23
this.placeholder = this.dd.children(‘span’);
24
this.opts = this.dd.find(‘ul.dropdown > li’);
25
this.val = ”;
26
this.index = -1;
27
this.initEvents();
28
}
29
DropDown.prototype = {
30
initEvents : function() {
31
var obj = this;
32
33
obj.dd.on(‘click’, function(event){
34
$(this).toggleClass(‘active’);
35
return false;
36
});
37
38
obj.opts.on(‘click’,function(){
39
var opt = $(this);
40
obj.val = opt.text();
41
obj.index = opt.index();
42
obj.placeholder.text(‘Gender: ‘ + obj.val);
43
});
44
},
45
getValue : function() {
46
return this.val;
47
},
48
getIndex : function() {
49
return this.index;
50
}
51
}
52
$(function() {
53
54
var dd = new DropDown( $(‘#dd’) );
55
56
$(document).click(function() {
57
// all dropdowns
58
$(‘.wrapper-dropdown-1’).removeClass(‘active’);
59
});
60
61
});
62
63
</script>
64
65
effect【 2 】「 sign in with 」
【 html 】
1
<div class=”container”>
2
<section class=”main”>
3
<div class=”wrapper-demo”>
4
<div id=”dd” class=”wrapper-dropdown-2″ tabindex=”1″>Sign in with
5
<ul class=”dropdown”>
6
<li><a href=”#”><i class=”icon-twitter icon-large”></i>Twitter</a></li>
7
<li><a href=”#”><i class=”icon-github icon-large”></i>Github</a></li>
8
<li><a href=”#”><i class=”icon-facebook icon-large”></i>Facebook</a></li>
9
</ul>
10
</div>
11
</div>
12
</section>
13
</div>
14
15
16
<!– jQuery if needed –>
17
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/
18
jquery/1.8.2/jquery.min.js”></script>
19
<script type=”text/javascript”>
20
21
function DropDown(el) {
22
this.dd = el;
23
this.initEvents();
24
}
25
DropDown.prototype = {
26
initEvents : function() {
27
var obj = this;
28
29
obj.dd.on(‘click’, function(event){
30
$(this).toggleClass(‘active’);
31
event.stopPropagation();
32
});
33
}
34
}
35
36
$(function() {
37
var dd = new DropDown( $(‘#dd’) );
38
$(document).click(function() {
39
// all dropdowns
40
$(‘.wrapper-dropdown-2’).removeClass(‘active’);
41
});
42
43
});
44
45
</script>
46
47
effect【 3 】「 transport 」
【 html 】
1
<div class=”container”>
2
<section class=”main”>
3
<div class=”wrapper-demo”>
4
<div id=”dd” class=”wrapper-dropdown-3″ tabindex=”1″>
5
<span>Transport</span>
6
<ul class=”dropdown”>
7
<li><a href=”#”><i class=”icon-envelope icon-large”></i>Classic mail</a></li>
8
<li><a href=”#”><i class=”icon-truck icon-large”></i>UPS Delivery</a></li>
9
<li><a href=”#”><i class=”icon-plane icon-large”></i>Private jet</a></li>
10
</ul>
11
</div>
12
</div>
13
</section>
14
</div>
15
16
17
<!– jQuery if needed –>
18
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/
19
jquery/1.8.2/jquery.min.js”></script>
20
<script type=”text/javascript”>
21
22
function DropDown(el) {
23
this.dd = el;
24
this.placeholder = this.dd.children(‘span’);
25
this.opts = this.dd.find(‘ul.dropdown > li’);
26
this.val = ”;
27
this.index = -1;
28
this.initEvents();
29
}
30
DropDown.prototype = {
31
initEvents : function() {
32
var obj = this;
33
34
obj.dd.on(‘click’, function(event){
35
$(this).toggleClass(‘active’);
36
return false;
37
});
38
39
obj.opts.on(‘click’,function(){
40
var opt = $(this);
41
obj.val = opt.text();
42
obj.index = opt.index();
43
obj.placeholder.text(obj.val);
44
});
45
},
46
getValue : function() {
47
return this.val;
48
},
49
getIndex : function() {
50
return this.index;
51
}
52
}
53
54
$(function() {
55
var dd = new DropDown( $(‘#dd’) );
56
57
$(document).click(function() {
58
// all dropdowns
59
$(‘.wrapper-dropdown-3’).removeClass(‘active’);
60
});
61
62
});
63
64
</script>
65
66
67
effect【 4 】「 To do 」
【 html 】
1
<div class=”container”>
2
<section class=”main”>
3
<div class=”wrapper-demo”>
4
<div id=”dd” class=”wrapper-dropdown-4″>To do
5
<ul class=”dropdown”>
6
<li><input type=”checkbox” id=”el-1″ name=”el-1″ value=”donut”>
7
<label for=”el-1″>Eat a donut</label></li>
8
<li><input type=”checkbox” id=”el-2″ name=”el-2″ value=”neighbour”>
9
<label for=”el-2″>Spy on my neighbours</label></li>
10
<li><input type=”checkbox” id=”el-3″ name=”el-3″ value=”T-rex”>
11
<label for=”el-3″>Feed my T-rex</label></li>
12
</ul>
13
</div>
14
</div>
15
</section>
16
</div>
17
18
19
<!– jQuery if needed –>
20
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/
21
jquery/1.8.2/jquery.min.js”></script>
22
<script type=”text/javascript”>
23
24
function DropDown(el) {
25
this.dd = el;
26
this.opts = this.dd.find(‘ul.dropdown > li’);
27
this.val = [];
28
this.index = [];
29
this.initEvents();
30
}
31
DropDown.prototype = {
32
initEvents : function() {
33
var obj = this;
34
35
obj.dd.on(‘click’, function(event){
36
$(this).toggleClass(‘active’);
37
event.stopPropagation();
38
});
39
40
obj.opts.children(‘label’).on(‘click’,function(event){
41
var opt = $(this).parent(),
42
chbox = opt.children(‘input’),
43
val = chbox.val(),
44
idx = opt.index();
45
46
($.inArray(val, obj.val) !== -1) ? obj.val.splice( $.inArray(val, obj.val), 1 )
47
: obj.val.push( val );
48
($.inArray(idx, obj.index) !== -1) ? obj.index.splice( $.inArray(idx, obj.index)
49
, 1 ) : obj.index.push( idx );
50
});
51
},
52
getValue : function() {
53
return this.val;
54
},
55
getIndex : function() {
56
return this.index;
57
}
58
}
59
60
$(function() {
61
62
var dd = new DropDown( $(‘#dd’) );
63
$(document).click(function() {
64
// all dropdowns
65
$(‘.wrapper-dropdown-4’).removeClass(‘active’);
66
});
67
});
68
</script>
effect【 5 】「 john Doe 」
【 html 】
1
<div class=”container”>
2
<section class=”main”>
3
<div class=”wrapper-demo”>
4
<div id=”dd” class=”wrapper-dropdown-5″ tabindex=”1″>John Doe
5
<ul class=”dropdown”>
6
<li><a href=”#”><i class=”icon-user”></i>Profile</a></li>
7
<li><a href=”#”><i class=”icon-cog”></i>Settings</a></li>
8
<li><a href=”#”><i class=”icon-remove”></i>Log out</a></li>
9
</ul>
10
</div>
11
</div>
12
</section>
13
</div>
14
15
16
<!– jQuery if needed –>
17
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/
18
jquery/1.8.2/jquery.min.js”></script>
19
<script type=”text/javascript”>
20
21
function DropDown(el) {
22
this.dd = el;
23
this.initEvents();
24
}
25
DropDown.prototype = {
26
initEvents : function() {
27
var obj = this;
28
29
obj.dd.on(‘click’, function(event){
30
$(this).toggleClass(‘active’);
31
event.stopPropagation();
32
});
33
}
34
}
35
36
$(function() {
37
38
var dd = new DropDown( $(‘#dd’) );
39
40
$(document).click(function() {
41
// all dropdowns
42
$(‘.wrapper-dropdown-5’).removeClass(‘active’);
43
});
44
45
});
46
47
</script>
48
49
参考サイト
http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
関連記事
ドロップダウンメニュー関連の記事
PICK UP
TIPS記事セレクション
