新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【jQuery入門】プルダウンメニューの土台を作る

【今回の紹介】


Jqueryでプルダウンメニューの土台を作ったので紹介します
おそらくこのあとCSSでうまく形を作っていくと思います。

【内容】

プルダウンんメニューとかでよく使いそうなものがあったので実際に使ってみた

【流れ】

①リストで入れ子の構造を作る
jQueryのhoverを使用する
マウスカーソルがあたっときの挙動とはなれたときの挙動を
一度に決めることができる(2つの引数を渡す)


参考ソース

<html>
<head>
<meta charset='utf-8'>
</head>
<title>Ruby試験対策サイト</title>
<body>
	<div id='fl'>
	<h1>Ruby試験対策サイト</h1>
	<div id='hed'>	
	<ul id='menu'>
		<li>大リスト</li>
		<li>大リスト
			<ul>
				<li>中リスト</li>
				<li>中リスト</li>
			</ul>
		</li>
		<li>大リスト
			<ul>
				<li>中リスト</li>
				<li>中リスト</li>
				<li>中リスト
					<ul>
				<li>小リスト</li>
				<li>小リスト</li>
				<li>小リスト</li>
			</ul>




				</li>
			</ul>
		</li>
		<li>大リスト</li>
	</ul>
	</div>
</div>
<script src = "http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<script>
	$(function(){
		$('#menu li').hover(function(){
			$(this).children('ul').show();}
			,function(){
				$(this).children('ul').hide();
			
		})


	});
</script>
</body>
</html>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }