RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly
トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

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

サイト内検索

現在の人気記事はコチラ!

ホーム > ホームページカテゴリー No.71 ~ No.80 > 記事No.78

コピペでOK!ドロップダウンメニューをHTMLとCSSだけで超簡単に作成する方法

← 前の記事

次の記事 →

dropdown_menu

サイト内のカテゴリーが多くなってしまったとき、全てを横並びにすると場所をとってしまう上、見づらくなってしまいますよね。

今回はそんな場合にオススメなのは『ドロップダウンメニュー』です!マウスカーソルを乗せると項目が下にズラッと出現するアレです。


▼ドロップダウンメニューの例


※スマホの場合は表示が崩れる場合があります。そもそもドロップダウンメニューはマウスオーバー時に反応するためスマホには合いません。PC表示のみの使用をおすすめします。


上のドロップダウンメニューにマウスカーソルを置いてみてください。小項目のある『日常』『エンタメ関連』にマウスオーバーしたときに、項目がアニメーション付きでズラッと下に出現すると思います。

そして実はこのドロップメニュー、HTMLとCSSだけで簡単に設置することができるのです!(゚∀゚) もちろんカスタマイズも容易です。

今回はこのドロップメニューの設置方法について解説したいと思います!


コードのコピー&ペースト

上で紹介したようなドロップダウンメニューは、ここで紹介するコードをコピペするだけで簡単に設置することができます。

HTMLコードの貼り付け

まず、ドロップダウンメニューを設置したいページの、設置したい個所に以下のHTMLコードを貼り付けてください。

※それぞれの大項目・小項目の名前とリンク先URLは、任意の名前に変更してください。


すると以下のようなメニューが出現します。

↑このままでは、まだドロップダウンメニューにはほど遠い状態なのでCSSで形を整える必要があります。


CSSコードの貼り付け

次にメニューのスタイルを整えるため、以下のCSSコードを貼り付けてください。

※一応ベンダープレフィックスコードを付けているため、IE・Chrome・FireFox・Edgeなどすべてのプラウザに対応しているはずです


上記のCSSを適用することで、先ほどのメニューが↓のようなドロップダウンメニューのスタイルになります。


HTMLコードをみると分かると思いますが、

  • <li></li>で囲まれた部分 ⇒ 大項目行
  • <ul><li></li></ul>で囲まれた部分 ⇒ 小項目行

という構成になっています。なので大項目の下に小項目を増やしたい(or減らしたい)場合は、上で示すHTMLコードにならって任意の数の小項目行を追加(or削除)してください。


※CSSが適用されない場合

CSSコードを適用しても見た目が変化しない場合があります。

そういった場合、おそらくプラウザに残っている昔のキャッシュが原因の可能性が高いです。

プラウザの『設定』などから『キャッシュのクリア』もしくは『キャッシュの削除』などを選択し、残っているキャッシュの削除を行ってください。

削除後にページを更新すると、スタイルが適用されていると思います。


スタイルのカスタマイズ

上で紹介したコードをそのまま貼り付けた場合、初期の状態では私好みのデザインになっています。ドロップダウンメニュー自体のスタイル(デザイン)は、CSSコードをいじることで簡単に変更できます!

▼各CSS行に対応する変更内容(行番号は上のCSSコピー部のもの)

行番号 属性 変更内容
1行目 #dropmenu ドロップダウンメニュー自体(全体)のスタイル
12行目 #dropmenu li 大項目のスタイル
30行目 #dropmenu li ul 小項目(全体)のスタイル
38行目 #dropmenu li ul li 小項目(個別)のスタイル

ページをスッキリさせるためにドロップダウンメニューを使おう!

ドロップダウンメニュー設置方法の紹介は以上です!単にコードをコピペするだけで、なかなかオシャレなメニューが作れると思います。

多すぎる項目を、ただそのままズラッとページ上に並べてしまうと見た目的にも利便性的にも良くありません。

ドロップダウンメニューを活用し、オシャレでスッキリしたサイトを作っちゃいましょう!(゚∀゚)

関連記事はこちら

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

この記事に対するコメント

Comment Form is loading comments...

現在の人気記事はコチラ!

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

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


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

©Copyright fukafuka295.jp 2016 All rights reserved.

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