クリエイター:コーディング備忘録ブログ

コーディング

第四十七回「SlickNavを使って、Gnaviをレスポンシブ化する方法」

こんな感じでメニューが出ます。(templeのデモです)

bandicam 2016-06-29 21-39-55-634

                   ↓
bandicam 2016-06-29 21-39-59-944

■「SlickNav」の使い方

1.インターネットより「SlickNav」をダウンロードします。
bandicam 2016-06-29 21-07-23-306

2.画像の二つを使用したいjsフォルダとcssフォルダにそれぞれ移動します。
bandicam 2016-06-29 21-14-19-079

3.表示させたいHTMLにスクリプトを読み込みます。

4.レスポンジブ化を行いたいソースのリストに「id=”menu”」を書きます。

5.CSSに下記を記載します。

★完成★

以上で簡単に、レスポンシブ時のメニュー表示ができるのでレスポンシブコーディングをする時は設定しましょう。

★参考サイト★

jQuery レスポンシブメニュープラグイン SlickNav の使い方

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP