さてさて、jQuery2.0のリリースも近そうですし、ちょこっと1.9での変更を確認しながら準備をしておこうかな？

ということで、近いうちに使うであろう、jQueryの読み込み分岐をメモ。

<!--[if lt IE 9]>  
    <script src="jquery-1.9.0.js"></script>  
<![endif]-->  
<!--[if gte IE 9]><!-->  
    <script src="jquery-2.0.0.js"></script>  
<!--<![endif]--> 

facebookほぼ使ってないんですが、一応ブログの記事を反映させてみるべく「Wordbooker」とやらいうプラグインを入れてみました。

設定適当なので、ひとまずこの記事で動作テスト。

【追記】
いけた。

レスポンシブWebデザインでサイトを作る場合に、メディアクエリとjQueryを使ってメニューの表示を切り替えるものをちょこっと作成。

画面サイズが大きい時は横並びのメニュー、小さい場合は折りたたみメニューにする、という簡単なものです。

レスポンシブWebデザインで折りたたみメニューに切り替える

動きとしてはメディアクエリで表示、非表示等を変更、折りたたみメニューのときは「MENU ▼」をクリックしたときにjQueryでclassをつけたり削除したりしています。

にしてもスマートフォンも混沌としてきましたねぇ。ios、android、windows phone、Tizen、Firefox OS等々、OS自体の数が増え、これからスマートフォンブラウザもいろいろでてくるんでしょうねぇ。。。ふうう。。。

<div class="menubtn">MENU ▼</div>
<nav id="menu" class="togmenu">
<ul>
<li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">NEWS</a></li><li><a href="#">GALLERY</a></li><li><a href="#">BLOG</a></li><li><a href="#">CONTACT</a></li>
</ul>
</nav>

<style>
.togmenu {
	display:none;
}
.menubtn {
	padding: 16px 20px;
	background:#34C6CD;
	color: #fff;
}
#menu ul {
	margin: 0;
	padding: 0;
	background:#34C6CD;
}
#menu li {
	list-style: none;
	border-top: 2px solid #fff;
}
#menu li a {
	padding: 16px 20px;
	display:block;
	text-decoration:none;
	background:#34C6CD;
	color: #fff;
}
@media only screen and (min-width: 800px) {
	.menubtn {
		display:none;
	}
	.togmenu {
		display:block;
	}
	#menu li {
		display: inline-block;
		border:none;
	}
}
</style>

<script>
$(function(){
	$(".menubtn").click(function(){
		$("#menu").toggleClass('togmenu');
	});	
});
</script>