Wed

08

Feb

2023

といっても、もちろん!?自身でこのような高度な技術は全くもって持っていないため、今回も数あるサイトの中から参考にさせていただいて実装いたしました。「固定メニューバー」と検索すると山のようにでもないとは思いますが、沢山の参考となるブログサイトが出てきます。ただし、私の場合はWordPressに実装し、かつ既に色々と構築した自己テーマを活かしつつ、かつプラグインなしで、といういつもながらの制約付きですので、条件にあうサイトを探すのにまずは苦労しました。
 基本的にはスクロールしてヘッダーメニューが上に消えた時に、上から代わりのメニューバーが表示されるという単純なものです。ただし、出てくるメニューバーにロゴを表示させたいのと、元から表示されているメニューバーとは違うコンパクトなメニューバーを表示させたかったので、単なるヘッダーメニューを固定する方式ではないコードを中心に参考にさせてもらっています。

そんな自身の知識もないのですが、我儘な要望に応えてくれるべく、ようやく見つけたサイトが下記になります。

こちらの方は配布されている?テーマに実装した内容を説明してくださっているようなので、私のようなケースには非常に参考になりました。実際のコードやファイルの場所は適宜、自分の自己テーマの構成に合わせて多少変更しましたが、ほとんど何も変更せずにそのまま実装することが出来ました!本当にありがとうございました。

今回も素人らしいミスで恥ずかしい限りですが、少々ハマったところを忘れないように備忘録として残しておきます。

追加する構成ファイルの文字コードが文字化けする(エディターのAtom上は問題ないのですが、実際にブラウザで見てみると文字化けしてました。。。)ため、新たに作成する追加ファイルは既存ファイルをコピペして使用する(文字コードの指定も未だによく分からない素人ということでしょうか。。。)

にゅるっと出てくるためのアニメーション部分

最後に上記サイトでは実装していなかった「にゅるっと出てくるためのアニメーション部分を実装」なのですが、そのままですが下記のサイトを参考にcssで実装してみました。

 

サブメニューの表示について

ここまでで、大体最初に自分が実装したかった機能とデザインが完了します。その後はサブメニューの表示なども下記のサイトを参考に整えていきます。

 

アイコンの追加など

その後は、こちらも久しぶりに使ってみたFont Awesomeで色々とアイコンを追加してみました。ただ、どうしてもいくつか欲しいアイコンがフリーのバージョン5系統では見つからなかったので、こちらも良く参考にさせてもらっているサイトなのですが、下記記事を参考に幾つかSVGアイコンを追加いたしました(こちらのサイトのfeedlyアイコンも使わさせていただいております。ありがとうございます。)

今回は上記のfeedlyに加えて、Push7というWeb通知サイトも導入してみました。その際に同じく寝ログさんからPush7のアイコンも使わせていいただいたのですが、feedlyのSVGアイコンファイルに追加するやり方は、下記サイトを参考にしています。

 

各国の国旗アイコン

後は各国駐在記などの国旗アイコンを使いたいと思い、下記サイトからflag-icon-cssというものを導入してみました。もちろん!コンパイルなどの高度な技は使えないため、CDNでのみの導入です。編集時に便利なアイコンを一覧表示してくれているサイトもあります。

 

 

一応念のためですが、上記サイトに紹介されているバージョンは少し前のようで、最新のver.6.6.6ですとcssの記述が短縮されているので注意が必要です(こちらの本家サイト?の下の方を読めば記載があるようですが)。

古いバージョンの記載

普通:<span class="flag-icon flag-icon-jp"></span>

四角:<span class="flag-icon flag-icon-jp flag-icon-squared"></span>

最新バージョンの記載

普通:<span class="fi fi-jp"></span>

四角:<span class="fi fi-jp fis"></span>

レスポンシブ対応の修正

それと今回はヘッダーメニューを改訂したのに合わせて、随分前にレスポンシブ対応したcssを今一度、見直してみました。

あまりきちんと確認したことはないのですが、一応、スマホ用とパッド用とPC用の3種類で対応させていますが、今回下記のサイトを参考にそれぞれの閾値(ブレイクポイント)を修正しています。結論としてはスマホ用は600px以下、パッド用は1024px以下でしょうか。

 

 

今回も例によって巷にある素晴らしいサイトを参考にさせてもらい、何とかメニューバーの実装をすることが出来ました!超初心者の備忘録ですが、すぐ忘れてしまう将来の自分のためと、もし誰かの参考になれば幸いです。


この記事をシェアする

ディスカッション

コメントはまだありません

コメントはお気軽にどうぞ

※メールアドレスは公開されませんのでご安心ください。


This site is protected by reCAPTCHA and the GooglePrivacy Policy and Terms of Service apply.

このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。

”ところによりエンジニア”