仕事でwebサイトを作成しているのですが、
お問い合わせフォームやメニューなどの効率化のためにワードプレス（WordPress）を使用して作成を進めていました。
途中でヘッダー部分のメニューをメガメニューにしたいと思ったのですが・・・
使っていたテーマのcssが、どこを変更すればいいのかよくわからない・・・
あきらめて自分でレスポンシブデザインのメガメニューを作成しました！
ちなみに使用していたテーマは「onepress」です。
こちらから、まず「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”>
コメントを残す