ふかふか交易所 - ネットコンテンツから日々のお役立ち情報まで

ふかふか交易所 | ネットコンテンツや日々のお役立ち情報まで
RSSを購読する
follow us in feedly
トップ ゲーム 動画 HP・ブログ お金・クレカ お問い合わせ サイトマップ ページ下部へ

HP・ブログカテゴリ 新着記事

HP・ブログカテゴリ 新着記事

サイト内検索

総合ランキング

ホーム > HP・ブログカテゴリー No.1 ~ No.10 > 記事No.10

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

← 前の記事

次の記事 →

折り畳みメニュー

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

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

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

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

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


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


作成方法

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


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


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



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

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

サイトをコンパクトで見やすくすることは、閲覧者の離脱率を下げることができるから大切だよ!

HP・ブログ関連の人気記事

関連記事はこちら

この記事を読んだ人はコチラも見ています


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


総合ランキング

HP・ブログ関連カテゴリの人気記事

ご意見や質問などは気軽にメッセージフォームへ!


hp_blog_top
HP・ブログ制作ノウハウまとめ
movie_top
動画制作ノウハウまとめ
money_top
お金・クレカ記事まとめ
minecraft_top
マインクラフト記事まとめ

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

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 HP・ブログ お金・クレカ お問い合わせ サイトマップ ページ上部へ