【TIPS】ドロップダウンリスト ５パターン
CSS,Javascriptで作るドロップダウンリスト５パターン。
まず、ダウンロードした外部ファイルの中にある５パターン共通のCSSファイルとJSファイルを設定していく。
【 html 】
1
<head>
3
4
rel='stylesheet' type='text/css' />
5
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
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">
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/
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/
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">
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>
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/
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/
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/
関連記事ドロップダウンメニュー関連の記事
【TIPS】画像ホバーの際アニメーション効果をつけるCSS3 - ihover -
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプションを表示するスタイルシート。CSS3だけでここまでできるとは…。
目 次
hover effect【１】
左側と右側からテキストがスライドしてくるエフェクト
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<!-- From left and right -->
2
<div class="row">
3
<div class="col-sm-6">
4
5
<!-- normal -->
6
<div class="ih-item circle effect13 from_left_and_right"><a href="#">
7
8
<div class="info">
9
<div class="info-back">
10
<h3>Heading here</h3>
11
<p>Description goes here</p>
12
</div>
13
</div></a></div>
14
<!-- end normal -->
15
16
</div>
17
<br>
18
<div class="col-sm-6">
19
20
<!-- colored -->
21
<div class="ih-item circle colored effect13 from_left_and_right"><a href="#">
22
23
<div class="info">
24
<div class="info-back">
25
<h3>Heading here</h3>
26
<p>Description goes here</p>
27
</div>
28
</div></a></div>
29
<!-- end colored -->
30
31
</div>
32
</div>
33
<!-- end From left and right -->
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【２】
画像を画面上側に、テキストを下側にエフェクトをかけて配置
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<!-- From left and right -->
2
<div class="row">
3
<div class="col-sm-6">
4
5
<!-- normal -->
6
<div class="ih-item circle effect13 from_left_and_right"><a href="#">
7
8
<div class="info">
9
<div class="info-back">
10
<h3>Heading here</h3>
11
<p>Description goes here</p>
12
</div>
13
</div></a></div>
14
<!-- end normal -->
15
16
</div>
17
<br>
18
<div class="col-sm-6">
19
20
<!-- colored -->
21
<div class="ih-item circle colored effect13 from_left_and_right"><a href="#">
22
23
<div class="info">
24
<div class="info-back">
25
<h3>Heading here</h3>
26
<p>Description goes here</p>
27
</div>
28
</div></a></div>
29
<!-- end colored -->
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【３】
画像を回転させながら消して、テキスト表示に切り替える
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<div class="row">
2
<div class="col-sm-6">
3
4
<!-- normal -->
5
<div class="ih-item square effect2"><a href="#">
6
<div class="img"><img src="client/images/assets/rect/10.jpg" alt="img"></div>
7
<div class="info">
8
<h3>Heading here</h3>
9
<p>Description goes here</p>
10
</div></a></div>
11
<!-- end normal -->
12
13
</div>
14
<br>
15
<div class="col-sm-6">
16
17
<!-- colored -->
18
<div class="ih-item square colored effect2"><a href="#">
19
20
<div class="info">
21
<h3>Heading here</h3>
22
<p>Description goes here</p>
23
</div></a></div>
24
<!-- end colored -->
25
26
</div>
27
</div>
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【４】
回転にひねりを加えてテキストを表示
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
function pagination($pages = '', $range = 4)
2
{
3
$showitems = ($range * 2)+1;
4
5
global $paged;
6
if(empty($paged)) $paged = 1;
7
8
if($pages == '')
9
{
10
global $wp_query;
11
$pages = $wp_query->max_num_pages;
12
if(!$pages)
13
{
14
$pages = 1;
15
}
16
}
17
18
if(1 != $pages)
19
{
20
echo "<div class=\"pagination clearfix\"><span>Page ".$paged." of ".$pages."</span>";
21
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='"
22
.get_pagenum_link(1)."'>« First</a>";
23
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)
24
."'>‹ Previous</a>";
25
26
for ($i=1; $i <= $pages; $i++)
27
{
28
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) ||
29
$pages <= $showitems ))
30
{
31
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='"
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【５】
画像拡大＋テキストスライド表示
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<!-- From left and right-->
2
<div class="row">
3
<div class="col-sm-6">
4
5
<!-- normal -->
6
<div class="ih-item square effect6 from_left_and_right"><a href="#">
7
8
<div class="info">
9
<h3>Heading here</h3>
10
<p>Description goes here</p>
11
</div></a></div>
12
<!-- end normal -->
13
14
</div>
15
<br>
16
<div class="col-sm-6">
17
18
<!-- colored -->
19
<div class="ih-item square colored effect6 from_left_and_right"><a href="#">
20
21
<div class="info">
22
<h3>Heading here</h3>
23
<p>Description goes here</p>
24
</div></a></div>
25
<!-- end colored -->
26
27
</div>
28
</div>
29
<!-- end From left and right-->
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
hover effect【６】
画像拡大＋テキストをズームアップ表示からの配置
コーディングは、まずhtmlファイルに以下を記述
【 html 】
1
<div class="row">
2
<div class="col-sm-6">
3
4
<!-- normal -->
5
<div class="ih-item square effect7"><a href="#">
6
<div class="img"><img src="client/images/assets/rect/2.jpg" alt="img"></div>
7
<div class="info">
8
<h3>Heading here</h3>
9
<p>Description goes here</p>
10
</div></a></div>
11
<!-- end normal -->
12
13
</div>
14
<br>
15
<div class="col-sm-6">
16
17
<!-- colored -->
18
<div class="ih-item square colored effect7"><a href="#">
19
20
<div class="info">
21
<h3>Heading here</h3>
22
<p>Description goes here</p>
23
</div></a></div>
24
<!-- end colored -->
25
26
</div>
27
</div>
ＣＳＳはダウンロードした外部ファイル( https://github.com/gudh/ihover )の中にある 「ihover.css」を読み込む
【 CSS 】
1
関連記事画像ホバー時に効果をつけるtips記事
「素材感を活かした手作り風」のサイトを作る際のポイント
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。
今回で第4回目となるこの記事では、「素材感を活かした手作り風のサイトを作る際のポイント」についてをまとめておきます。
グラフィックソフトの機能を駆使することで直線的でシャープ スマートな表現はできるけれど、一見 単調になりがちな面もある。
もっと素材感を活かした手作り風の柔らかい雰囲気のデザインで表現する場合には以下のようなポイントを押さえておきたい。
1. 素材感を活かした手作り風のサイトを作る際のポイント
素材感のあるものを活かす
布地 紙などのムラのあるものや、粗い木目などの素材感のあるものを活かすことで、グラフィックソフトではできない 柔らかい雰囲気のデザインで表現することができる。
手書き風のかすれたタッチのテキスト イラストなどを使うと効果的
単調さのない複雑で不規則な(アナログ的な)オブジェクトが効果的。
例えば、手書き風のかすれたタッチのテキスト イラストなど。
2. 素材感を活かした手作り風のサイトを考察してみる
素材感を活かした手作り風サイトの事例5選
(株)ノティオのサイトについて
● 住宅 不動産に特化したマーケティング事業を手掛けている会社で、一見 堅いイメージをし
がちだけれど、手書き文字をふんだんに使うことで、柔軟でフレキシブルな風土という印象
を伝えようとしているのがわかる。
● また、彩度を落とした落ち着きのある配色 色使いにより、温かさ 堅実さを感じさせる。
関連記事気になったWEBデザインのサイト
「大量の商品を見せる」デザイン レイアウトにする際のポイント
WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していきます。
今回で第3回目となるこの記事では、「大量の商品を見せるデザイン レイアウトにする際に押さえておくこと」についてをまとめておきます。
1. 大量の商品を掲載するサイトを作る時のポイント
情報アーキテクチャの行き届いた設計にする
商品 サービス 情報量の豊富さを限られたスペースに効率よく配置 分類していくためには、情報アーキテクチャ ( レイアウト、タイポグラフィ、サイト構造を整え、情報をわかりやすく伝えること ) の行き届いた設計をすることが必要になる。
例えば、行間 各ブロック要素に十分な間隔をとるなどしてレイアウトを整えることで、視覚的にわかりやすくすることだったり、ナビゲーションやUI / UXの機能を高めてユーザーが求めているものを見つけやすくすることなど。
サイトのブランドイメージを伝える
ページの大半が膨大な商品や情報サイトに埋もれ サイト自体のビジュアル要素が目立たなくなりがちなので、しっかりブランドイメージも伝えられるようにする。
例えば 配色においては、全体的に色がにぎやかになりがちなので メインカラーを１～２色と少なめにして、ページの印象に統一感を出す。
2. 大量の商品 情報を掲載しているサイトを考察してみる
大量の商品 情報を掲載しているサイト事例4選
大きいサイズや大型店アイテムも取り扱い5000円(税抜)以上購入で送料無料
オンラインストア限定大きいサイズを取り揃え ＰＣ 携帯でいつでも買い物
「丸井WEBサイト」について
● モデルによる「シーン別のコーディネート」「ピックアップ」など、多彩な表現と
コンテンツが 豊富なので、とても見やすく、ユーザーを飽きさせない構成になって
いる。
● コンテンツの中にある「デジタルカタログ」は、実際に雑誌を見ながら買い物して
いる感覚で、 ユーザーの購買意欲を高める仕掛けになっている。
関連記事気になったWEBデザインのサイト
画像を４つのパネルに分割＆エフェクト効果のスライドショー -Four Boxes Slideshow-
画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。
まず、ダウンロードした外部ファイルの中にある３パターン共通のＣＳＳファイル(３ファイル)とｊｓファイル(３ファイル)を設定。
【 html 】
1
<head>
5
<script src="js/modernizr.custom.js"></script>
6
<script src="js/classie.js"></script>
7
<script src="js/boxesFx.js"></script>
8
<script>
9
new BoxesFx( document.getElementById( 'boxgallery' ) );
10
</script>
11
</head>
次に、それぞれのhtmlを記述していく。
effect【 1 】 各パネルが別々のスライドをするエフェクト
各パネルが別々のスライドをするエフェクトのコード。
【 html 】
1
<div id="boxgallery" class="boxgallery" data-effect="effect-1">
2
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
3
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
4
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
5
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
6
</div>
effect【 2 】 各パネルが外側 側面に向かって時間差でスライド
各パネルが外側 側面に向かって時間差でスライドするコード
【 html 】
1
<div id="boxgallery" class="boxgallery" data-effect="effect-2">
2
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
3
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
4
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
5
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
6
</div>
effect【 3 】 各パネルが時間差でスライドしながら落ちる
各パネルが時間差でスライドしながら落ちるコード
【 html 】
1
<div id="boxgallery" class="boxgallery" data-effect="effect-3">
2
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
3
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
4
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
5
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
6
</div>
参考サイト
http://tympanus.net/codrops/2014/06/11/how-to-create-a-tiled-background-slideshow/
関連記事他のスライドショー関連の記事
