レスポンシブメガメニューの作成方法【ワードプレスでもOKな「megamenu.js」】

仕事でwebサイトを作成しているのですが、
お問い合わせフォームやメニューなどの効率化のためにワードプレス(WordPress)を使用して作成を進めていました。

途中でヘッダー部分のメニューをメガメニューにしたいと思ったのですが・・・

使っていたテーマのcssが、どこを変更すればいいのかよくわからない・・・

あきらめて自分でレスポンシブデザインのメガメニューを作成しました!

ちなみに使用していたテーマは「onepress」です。

「megamenu.js」のダウンロード

こちらから、まず「megamenu.js」をダウンロードします。

https://github.com/marioloncarek/megamenu-js

画面右側の「Clone or download」のボタンを押して、「Download ZIP」を選んでください。
するとZipファイルのダウンロードが始まります。

テストページなどを作成して、挙動を確認

適当に「page-test.php」などを作成して、ダウンロードしたファイルの中にあった「index.html」の内容をコピペします。

ダウンロードしたCSS、JSファイルを読み込ませます。

ワードプレスは相対パス気を付けてください。

こちらのデモの通りに動いたらひとまずOK。

あとはCSSを好みにカスタマイズしていくだけ。

「ionicons」が読み込めないときの原因と改善方法

httpsだと「ionicons」が読み込めません。

そのときはこの行に置き換えましょう。

<link rel=”stylesheet” href=”https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css”>

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は驚異の4万冊。