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

goto_jp 1,436views 更新:2014年6月12日

サンプルはこちら。

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のみに依存するという分別を行った方が分かりやすいのでオススメです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません