NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

メニューと連動した要素の切り替え(マウスclick版)

2014年7月17日jQueryのみでつくるギミック

メニューと連動した要素の切り替え(マウスclick版)

メニューをマウスクリックすることによって要素を連動して切り替えます。単純に切り替えるとタブのギミックと変わらないので、クリックした時に要素が枠内にスライドで入ってくるようにしました。

デモページ

JavaScript

(function($){
	$(function(){ 
		
		var menuNmber = 0;
		var menuNmbrPre = 0;
		var bbox = 0;
		var ew = $('#content').width() + 'px';
		var slideSpeed = 500;

		$('#menu li').eq(0).addClass('on');
		$('#content div').eq(0).show().css('left', ew).animate( {left: '0px'}, slideSpeed);
		
		$("#menu li a").click(function(){
				
			menuNmbr = $("#menu li a").index(this);			
			$('#menu li').eq(menuNmbr).addClass('on');
			$('#content div').eq(menuNmbr).show().css('left', ew).animate( {left: '0px'}, slideSpeed);
	
			if (menuNmbr != bbox) {
				menuNmbrPre = bbox;
				bbox = menuNmbr;
				$('#menu li').eq(menuNmbrPre).removeClass('on');
				$('#content div').eq(menuNmbrPre).animate( {left: '-' + ew}, slideSpeed);
			}
				
		});
			
	});		
})(jQuery);

HTML

<div id="switch">
	<ul id="menu">
		<li><a href="#">menu01</a></li>
		<li><a href="#">menu02</a></li>
		<li><a href="#">menu03</a></li>
		<li><a href="#">menu04</a></li>
		<li><a href="#">menu05</a></li>
		<li><a href="#">menu06</a></li>
		<li><a href="#">menu07</a></li>
		<li><a href="#">menu08</a></li>
	</ul>
	<div id="content">
		<div>content01</div>
		<div>content02</div>
		<div>content03</div>
		<div>content04</div>
		<div>content05</div>
		<div>content06</div>
		<div>content07</div>
		<div>content08</div>
	</div>
</div>

CSS

#switch {
	width: 640px;
	margin: 0 auto;
	border: 1px solid #ff5b6b;
	font-family: Arial, Helvetica, sans-serif;
}
#switch:after {
	display : table;
	clear : both;
	content : '';
}
#menu {
	width: 150px;
	float: left;
}
#menu li a {
	width: 124px;
	height: 34px;
	font-size: 11px;
	line-height: 34px;
	text-align: center;
	padding: 0 12px;
	display: block;
	text-decoration: none;
	background-color: #ff5b6b;
	color: #ffffff;
}
#menu li a:hover {
	background-color: #ff7384;
}
#menu li.on a {
	background-color: #f4f4f4;
	color: #ff5b6b;
}
#content {
	position: relative;
	overflow: hidden;
	width: 490px;
	height: 272px;
	float: right;
}
#content div {
	position: absolute;
	display: none;
	width: 490px;
	height: 272px;
	font-size: 18px;
	color: #ff5b6b;
	line-height: 272px;
	text-align: center;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. メニューと連動した要素の切り替え(マウスclick版)

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com