さてさて、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]--> 

レスポンシブ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>

なんかふと日本の人口推移ってどうなってる？っていうのが気になり、ちょっくらHighchartsを使って表示してみました。

日本の人口推移

Highchartsはめちゃ高機能なんですが、商用利用の場合は有料（$80〜）なので、仕事でちょっとしたグラフをjavascriptで表示したいときは、jqPlot（こちらはopen source）でよいかも。

にしても、男女比は49：51で女性がちょっと多いっていうのが戦後から変わってないんですね。なんか不思議。

ということで、お金も体力もないアラフォーのおじさんを拾ってくれる心優しい女性はおりませぬか。。。
見つけたありんこを踏まないようによけて、ちがうありんこを踏んでしまうぐらいの優しさはあります。

さあ、ねよう。。。