クリックで展開する『折りたたみメニュー』をHTMLで実装する方法

クリックで展開する『折りたたみメニュー』をHTMLで実装する方法

メニュー項目が多すぎる場合や、ファーストビューで全項目を見れるようにしたい場合、長い注釈を入れたい場合などに便利な「折りたたみメニュー」。実はHTMLで簡単に実装できてしまいます。

実装例

このように任意の部分を折りたたんでおき、ユーザーがクリックすると展開します。

作成方法

<!-- 折りたたみ展開ボタン -->
<div onclick="obj=document.getElementById('menu1').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ クリックで展開</a>
</div>
<!--// 折りたたみ展開ボタン -->
 
<!-- ここから先を折りたたむ -->
<div id="menu1" style="display:none;clear:both;">

<!--この部分が折りたたまれ、展開ボタンをクリックすることで展開します。-->

</div>
<!--// ここまでを折りたたむ -->

上記のHTMLソースを折りたたみメニューを設置したい箇所に追記するだけです。折りたたむ部分にはリンクや画像も含むことができます。

2行目と8行目に”menu1″という文字列がありますがここは任意の同じ文字列を入力します。

※この文字列はidですので、同じページの他のidと被らないようにして下さい。また、複数の項目を折りたたむ場合はそれぞれ別の文字列にしてください。

このエントリーをはてなブックマークに追加

クリックで展開する『折りたたみメニュー』をHTMLで実装する方法」への3件のフィードバック

  1. ののがき

    この折り畳みをメニューをCSSでやると、どんな形で書けばいいのか、教えてくださると助かります。
    お願いします。

    返信
    1. 管理人 投稿作成者

      ののがき様

      トリガーがクリックではなくマウスオーバーになってしまいますが、折りたたみたい部分にクラスを付けてdisplay:noneで非表示にし、そのクラスのホバー時にdisplay:blockなどにすればできますよ。
      同じ方法でドロップダウンメニューの実装方法を記事にしましたので詳しくは下記をご参照ください。
      ドロップダウンメニュー(プルダウンメニュー)をHTMLとCSSだけで簡単に作る方法

      返信
  2. 通りすがり

    ゲーム等の感想ブログを書いている者ですが、長くなってしまうネタバレ部分の扱いに悩んでいました。
    最近はスマホから閲覧される方も多いため、白字反転は避けたいけれど難しいことはわからず、なかなか良い方法が見つかりませんでした。
    そこでこちらのHTMLコードを使用させていただいたところ、無事に動作し格段に見やすくなりました。
    ありがとうございました。

    返信

コメントを残す

頂いたコメントは一読した後表示させて頂いております。
反映まで数日かかる場合もございますがご了承下さい。