jqueryを使ったタブメニューの作り方【簡易版】

2014年07月27日

-

カテゴリー：: javascript

中々尋常じゃない暑さと忙しさが続いており、ブログ書けていなかったんですが、小さなネタでもいいから書こうかなと思います。（汗

コンテンツがいくつかのカテゴリー分けがされており、１ページに収めるには縦に長くなりすぎるなぁって時によく使うタブメニューの作り方なんかを紹介したいと思います。

まずは、HTMLのサンプルコードです。

<div id="tab_content">
	<ul id="tab_head">
		<li><a class="active" href="#tab01">タブ01</a></li>
		<li><a href="#tab02">タブ02</a></li>
		<li><a href="#tab03">タブ03</a></li>
		<li><a href="#tab04">タブ04</a></li>
	</ul>
	<div id="tab01" class="box">
		<!-- コンテンツの中身を記述 -->
	</div>
	<div id="tab02" class="box">
		<!-- コンテンツの中身を記述 -->
	</div>
	<div id="tab03" class="box">
		<!-- コンテンツの中身を記述 -->
	</div>
	<div id="tab04" class="box">
		<!-- コンテンツの中身を記述 -->
	</div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

</ul>

</div>

</div>

</div>

</div>

上記のコードでは、#tab_contentで対象となるコンテンツ全体を囲み、#tab_head内がタブの切り替えを行うメニュー、各.boxがタブメニューで表示、非表示が切り替わるコンテンツとなっております。

次にCSSです。

#tab_content {
	margin: 0 auto;
	width: 600px;
	text-align: left;
	overflow: hidden;
}

#tab_head {
	width: 600px;
	overflow: hidden;
}

#tab_head li {
	margin: 0 5px 0 0;
	width: 120px;
	float: left;
	display: inline;
}

#tab_head li a {
	width: 120px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #333333;
	border: 1px solid #999999;
	border-bottom: none;
	display: block;
}

#tab_head li a:hover {
	text-decoration: none;
	background: #dddddd;
}

#tab_head li a.active {
	text-decoration: none;
	background: #dddddd;
}

#tab_content .box {
	padding: 10px;
	border: 1px solid #999999;
	display: none;
}

.box#tab01 {
	display: block;
}

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

#tab_content {

margin: 0 auto;

width: 600px;

text-align: left;

overflow: hidden;

}

#tab_head {

width: 600px;

overflow: hidden;

}

#tab_head li {

margin: 0 5px 0 0;

width: 120px;

float: left;

display: inline;

}

#tab_head li a {

width: 120px;

height: 30px;

line-height: 30px;

text-align: center;

text-decoration: none;

color: #333333;

border: 1px solid #999999;

border-bottom: none;

display: block;

}

#tab_head li a:hover {

text-decoration: none;

background: #dddddd;

}

#tab_head li a.active {

text-decoration: none;

background: #dddddd;

}

#tab_content .box {

padding: 10px;

border: 1px solid #999999;

display: none;

}

.box#tab01 {

display: block;

}

#tab_head li a.activeは、現在表示されているコンテンツと対になっているメニューのオンオフをわかりやすくするための記述です。
はじめに記載したHTMLでは１番目のアンカーに.activeを適用しています。

#tab_content .boxは、display:none;で全て非表示の状態にし、１番目のコンテンツにあたる.box#tab01をdisplay:block;で表示させています。

上記２つの記述方法はjavascript側で行う事も可能なのですが、今回は、簡易版ということで、cssとhtml側で簡易的に対応しました。

最後にjavascriptの記述です。

$(function(){

	$("#tab_head").children("li").children("a").click(function(e){
		e.preventDefault();

		var url = $(this).attr("href");

		$("#tab_head").children("li").children("a").removeClass("active");
		$(this).addClass("active");

		$("#tab_content").children(".box").hide();
		$(url).show();
	});

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$(function(){

$("#tab_head").children("li").children("a").click(function(e){

e.preventDefault();

var url = $(this).attr("href");

$("#tab_head").children("li").children("a").removeClass("active");

$(this).addClass("active");

$("#tab_content").children(".box").hide();

$(url).show();

});

})

#tab_head li内のアンカーがクリックされるとそのクリックされたアンカーに.activeを適用し、hrefの中身を読み取り、該当のコンテンツを表示させています。
hrefには表示させたいコンテンツのIDを記述しています。

サンプルはコチラ

夏季休業のお知らせ

2014年07月24日

-

カテゴリー：: お知らせ

誠に勝手ながら、2014年8月11日(月)～2014年8月17日(日)の間は夏季休業とさせていただきます。
ご不便をおかけしますが、何卒ご理解いただきますようお願いいたします。

CSS3とjqueryを使ってクリックされた所を起点に波紋アニメーションさせる

2014年05月24日

-

カテゴリー：: CSS

5月ですね。
今年はセルインメイではないんですかね(滝汗

今回の記事の内容とは違うのですが、先日、お仕事でCSSを使い波紋を描くようなアニメーションをさせる必要があったので、いろいろと応用できるのではないかと思い、メモ程度にコードなどを残したいと思います。

以下CSSです。

#circle {
	-webkit-animation-name: circle;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0s;

	-moz-animation-name: circle;
	-moz-animation-duration: 0.8s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0s;

	animation-name: circle;
	animation-duration: 0.8s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-delay: 0s;

	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;

	border: 1px solid #ff0000;
	-webkit-border-radius: 90px;
	-moz-border-radius: 90px;
	border-radius: 90px;
	box-shadow: 0 0 5px #333333;
	-moz-box-shadow: 0 0 5px #333333;
	-webkit-box-shadow: 0 0 5px #333333;

	position: absolute;
}

@keyframes circle {
	0% {
		margin: 0;
		width: 0px;
		height: 0px;
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
	100% {
		margin: -78px 0 0 -78px;
		width: 156px;
		height: 156px;
		filter: alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
	}
}

@-webkit-keyframes circle {
	0% {
		margin: 0;
		width: 0px;
		height: 0px;
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
	100% {
		margin: -78px 0 0 -78px;
		width: 156px;
		height: 156px;
		filter: alpha(opacity=0);
		-moz-opacity: 0;
		opacity: 0;
	}
}

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

#circle {

-webkit-animation-name: circle;

-webkit-animation-duration: 0.8s;

-webkit-animation-iteration-count: 1;

-webkit-animation-timing-function: ease-in-out;

-webkit-animation-direction: normal;

-webkit-animation-delay: 0s;

-moz-animation-name: circle;

-moz-animation-duration: 0.8s;

-moz-animation-iteration-count: 1;

-moz-animation-timing-function: ease-in-out;

-moz-animation-direction: normal;

-moz-animation-delay: 0s;

animation-name: circle;

animation-duration: 0.8s;

animation-iteration-count: 1;

animation-timing-function: ease-in-out;

animation-direction: normal;

animation-delay: 0s;

filter: alpha(opacity=0);

-moz-opacity: 0;

opacity: 0;

border: 1px solid #ff0000;

-webkit-border-radius: 90px;

-moz-border-radius: 90px;

border-radius: 90px;

box-shadow: 0 0 5px #333333;

-moz-box-shadow: 0 0 5px #333333;

-webkit-box-shadow: 0 0 5px #333333;

position: absolute;

}

@keyframes circle {

0% {

margin: 0;

width: 0px;

height: 0px;

filter: alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

}

100% {

margin: -78px 0 0 -78px;

width: 156px;

height: 156px;

filter: alpha(opacity=0);

-moz-opacity: 0;

opacity: 0;

}

@-webkit-keyframes circle {

0% {

margin: 0;

width: 0px;

height: 0px;

filter: alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

}

100% {

margin: -78px 0 0 -78px;

width: 156px;

height: 156px;

filter: alpha(opacity=0);

-moz-opacity: 0;

opacity: 0;

}

念のため、ベンダープリフィックス入れてるんで、かなりコード自体は長く感じてしまうかもしれません。

#circleがアニメーションを適用させるためのボックスとなりborder、border-radiusの設定で赤いラインの入った丸を描きます。
box-shadowはおまけです。

opacityが0になっているのは、アニメーション終了時に非表示の状態にするためです。※他の方法もあるとは思います。

animation-******とついているのがアニメーションに関する設定なのですが、circleという名前のアニメーションを適用するように設定し、あとは、アニメーションさせる回数や速度、イージングの設定などを行っています。

@keyframes circleの中がそのアニメーションの内容で縦横0pxの円が0.8sかけて156pxに大きくなりながら、opacityが1から0に変化していきます。

続いてjqueryの記述です。

$(function(){

	$("#wrapper").append("<div id='circle'></div>");
	$("#circle").hide();

	$("#wrapper").click(function(e){

		var px=e.pageX;
		var py=e.pageY;

		$("#circle").hide();

		$("#circle").css("top",py).css("left",px).show();

	});

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$(function(){

$("#wrapper").append("<div id='circle'></div>");

$("#circle").hide();

$("#wrapper").click(function(e){

var px=e.pageX;

var py=e.pageY;

$("#circle").hide();

$("#circle").css("top",py).css("left",px).show();

});

})

上記では、#wrapper内がクリックされた時に処理を行っています。

処理の内容はまずはじめに#wrapperの中に波紋アニメーション用の#circleを挿入し、非表示にしています。

そして、#wrapper内がクリックされたら、クリックされた位置を取得し、#circleのtopとleftにその取得した座標を挿入し、表示させる。
主要なブラウザでは、動作の確認ができたのですが、IEだと比較的新しいバージョンでも動作しないようです。

もっとうまい記述方法もあるとは思いますが、アレンジしていただければと思いますｍ(。。)ｍ

サンプルはこちら