スマホ対応しました

サイトをスマートフォン対応しました。

今までも微妙に対応はしていた気がするんですが中途半端だったので新しい技術を使ってみるついでに対応しました。

スマホで見た場合は左側メニューが表示されずに記事のみとなります。

こんな感じ


その代わり上部に「Menu」を追加して、ここをクリックすると
左側からにょきっとメニューが出てくるようにしました。
最近よくあるサイドメニューってやつです。



ちょっとデザインが被っているので微妙におかしな点がありますが、これからCSSと格闘したいと思います。

サイドメニューを使うに当たって検討したのが

img/blog/201305270957-0.jpg rel=lightbox>

その代わり上部に「Menu」を追加して、ここをクリックすると
左側からにょきっとメニューが出てくるようにしました。
最近よくあるサイドメニューってやつです。



ちょっとデザインが被っているので微妙におかしな点がありますが、これからCSSと格闘したいと思います。

サイドメニューを使うに当たって検討したのが


http://mmenu.frebsite.nl/

２つ使ってみた感じとしては

sidr → 設置は超簡単だけど機能面としては弱い
mmenu → 設置は比較的簡単な方だと思う、機能は充実してる

sidrの方もプラグインつくったりとかいろいろと出来るんだけど、素の状態だとやや機能面で劣る感じがする。
その分軽くて設置しやすくて、機能はプラグインでってことなんだろうけど。
sidrで不満に思ったのが、サイドメニューを開いたあとに、サイドメニュー以外をさわっても閉じないこと。
オプションの見落としかもしれないけど、直感的に操作したいと思ったのでこれが地味に痛かった。

mmenuの方はサイドメニューとしては欲しい機能があらかじめ全部そろっている感じ。
オプションも豊富だしなれればこちらを使う方がいいと思うけど、sidrとは利用シーンに応じて使い分けという感じだろうか。

しかしどちらも指定したタグ内のulやliをメニューとして見せるものなので、既存のものをサイドメニュー化しようとすると、すでにあるデザインと衝突して表示がおかしくなることがある（実際にいまそうなってますが…）ので注意が必要かもしれません。

mmenuの方は実装方法としては

mmenuのJavaScriptとCSSを読み込みます。

<script type="text/javascript" src="inc/mmenu/jquery.mmenu.js"></script>
<link type="text/css" media="all" rel="stylesheet" href="inc/mmenu/mmenu.css" /> 

<nav id="menu">

  メニュー化したい部分

</nav>

<script>
  $(function() {
    $('nav#menu').mmenu();
  });
</script>