HTML, CSSだけでプルダウンメニューを作成する!

プログラミング学習HTML
スポンサーリンク
スポンサーリンク

HTML, CSSだけでプルダウンメニューを作成する!

この記事では、HTML, CSSだけを使って、プルダウンメニューを作成する方法を紹介していきます。

最終的に出来上がるものはこちらになります➞デモ

全ソースコードはこちらで確認できます➞PullDownMenuByCSS

また、こちらの記事はQiitaで私が英語で公開したものを日本語にしたものです。
よければこちらの記事も読んでください。(英語で書いたというだけで内容は全く同じです。)
Let’s create PullDown Menu by HTML + CSS

それでは早速プルダウンメニューを作成していきましょう!

1. フォルダとファイルの準備をしよう

下の画像のようなフォルダ・ファイルを準備してください。
画像ではわかりにくい方は上のGitHubのリポジトリを参考にしてください。

フォルダ・ファイルの構造

2. HTMLのコードと、リセットCSSを準備しよう

今回はHTML5Doctor Reset CSSを使用しています。

ここまでコードを正しく書き、index.htmlをブラウザで確認するとこのように表示されるはずです。

結果

3. CSSを追加しよう

以下のCSSを追加して、ナビゲーションのデザインを整えていきましょう。

ここまでコードを書けるとこのように表示されます。

結果

4. シンプルにメニューのデザインを調整する

以下のCSSを追加して、メニューのデザインを調整します。

ここまでコードを書けるとこのように表示されます。

結果

5. アンカータグのデザインを調整しよう

アンカータグに下線が引かれていたり、色が青色になっていたりするので、そのデザインの調整をしましょう。

ここまでコードを書けるとこのように表示されます。

結果

6. 子メニューを非表示にする

ここまでコードを書けるとこのように表示されます。
結果

7. 親メニューにフォーカスが当たった時のCSSを追加

結果

8. アニメーションを追加する

transition: 0.2s;を追加し、子メニューが展開される時の秒数を指定する。
この設定だど、子メニューが表示されるまで0.2秒かける設定になります。

結果

 

これでプルダウンメニューは完成です。

コメント

  1. takakurafu より:

    ためになりました!

タイトルとURLをコピーしました