jQuery：格納・展開できるメニュー

サンプルはこちら。

See the Pen oqkLj by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

メニュー下の「narrow」をクリックすることでメニューの格納・展開ができます。

HTML

<div id="navigation">
  <ul>
    <li><a href=""><i class="fa fa-home"></i><span class="name">menu1</span></a></li>
    ～
  </ul>
  <p>
    <a href="javascript:void(0)" class="toggleMenu"><i class="fa fa-angle-right"></i><span class="name">narrow</span></a>
  </p>
</div>
<div id="main">
  <h1>Dummy Text</h1>
  ～
</div>

「#navigation」がメニュー部分で、「#main」がコンテンツ部分となります。

「narrow」のリンクにはクラス「toggleMenu」を設定しており、これをフックにJSの処理を行います。

JavaScript

$(".toggleMenu").click(function(){
  $("#navigation").toggleClass("narrow");
  $("#main").toggleClass("narrow");
  $(this).children(".fa").toggleClass("rotate180");
});

「toggleMenu」をクリックした際の処理ですが、「#navigation」と「#main」に「toggleClass」でそれぞれクラス「narrow」の付け外しを行っています。4行目で「narrow」リンクのアイコンにもクラスを付与していますが、これはオマケ程度です。

JSではクラスの付与のみで、デザインはCSSのみに依存するという分別を行った方が分かりやすいのでオススメです。