RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.1 ~ No.10 > 記事No.10

クリックすると展開表示する"折りたたみメニュー"を簡単に作る方法

← 前の記事

次の記事 →

折り畳みメニュー

「小項目があり過ぎて、全部表示するとゴチャゴチャして見づらくなってしまう!」

そんな時には、クリックすると中身を展開したり閉じたりすることのできる
"折り畳みメニュー"がとても役に立ちます!

そこで今回は、面倒なjavascript等の記述をせずに、htmlに数行追加するだけ
簡単に実現することのできる方法を紹介します!

"折りたたみメニュー"の実装例は以下のようになります。

▼ 実装例① (クリックで展開します)
▼ 実装例② (クリックで展開します)


上記の実装例のように、リンクを含めた文字列を含めることもできますし、画像を表示させることもできます。 (展開ボタンの装飾はcssなどで自由に行ってください)


作成方法

折り畳みメニューを作成したいhtmlの設置したい箇所に、以下の行を追加してください。


・2行目と8行目に"open"という文字列がありますが、ここは任意の同じ文字列を入れてください。 (※ただし同じページの他のid属性と被らないように注意してください)


・<div></div>で囲まれている9~12行目までが、展開表示or収納される部分です。画像を含めることもできます。



以上の行を追加するだけで手順は終了です。

展開表示機能をうまく使い、スッキリとした見やすいホームページにしましょう!

関連記事はこちら


  ■ 一言コメントをどうぞ!(100字まで・半角文字のみのコメントは送信できません)


過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ