読者です 読者をやめる 読者になる 読者になる

チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

CSSのみでヘッダ用のドロップダウンメニューを作成してみた

 スポンサード リンク

f:id:chipsforest:20160608194552j:plain

 前の記事ではハンバーガーアイコンの作成方法を紹介しました。


 今回は作ったハンバーガーアイコンを利用して、クリックするとメニュー一覧が上から下りてくる「ドロップダウンメニュー(プルダウンメニュー)」をCSSのみで作成してみたので紹介します。

 ドロップダウンメニューは上の記事を参考にさせていただきました。

 完成品は今のところ、このブログのスマホ用ページのヘッダーで使用しているので、試していただいてどのような動きをするか確認していただければと思います。

※他に良いグローバルナビが出来たらそちらに変更してしまう場合があるので悪しからず(汗。

HTML

 コードの上部がハンバーガーアイコンとリンクの部分、「nav id="p-nav1」から下がメニュー一覧部分になります。

 ブロック要素をaタグで囲むのは良くないみたいなので、ハンバーガーアイコンにリンクをかけるのに苦戦しました(汗。

 「ul~ul」内はご自分のカテゴリに変更していただければと思います。

CSS

 ある程度コメントふっておいたのでCSSに関しての解説は省略します。


動作の仕組みと注意点

f:id:chipsforest:20160608194611j:plain

 今回作ったものは上の画像のように、メニュー一覧をページ先頭のさらに上に隠しておいて、メニューボタンを押すと隠れていたものが下がってくる仕組みになっています。

 ですので、メニューボタンをヘッダ以外に設置すると、ボタン押下時にページトップに飛ばされてしまいます。

 ということで、今回のドロップダウンメニューの設置はヘッダ(ページトップからスクロールしないで見える位置)専用となるのでご了承ください(汗。

PAGE TOP