jQuery

簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法


みなさんこんにちは、mayukouです。
さて、4月21日から、googleでモバイル検索した時に、
スマホ対応をランキング要因として使用することを発表しました。
そこで、急いで仕事で公開しているサイトのレスポンシブ化を実施しました。

その時、一番考えるのがナビゲーションメニューの部分です。
狭いスペースにメニュー項目を入れるのにやっぱり最適なのは、
三本線のハンバーガーボタンをつけてメニュー開閉させるものでしょうか。
ということで、レスポンシブに対応したナビゲーションメニューのjQueryプラグインが便利だったので、使い方をご紹介します。

スポンサードリンク

レスポンシブのメニューに最適なSlickNavの使い方

1.まずは、公式サイトからSlickNavのJqueryプラグインをダウンロードしましょう。

125-slicknav

公式サイト デモ 以下のファイルが入っていることが確認できます。
124-rwd
そのなかのjquery.slicknav.min.jsとslicknav.cssを使用します。

2.head内に以下のファイルを明記し、読み込みます。

3.HTMLを書きます。リスト表示でドロップダウンにしたい場合は、入れ子にしましょう。

4.Javascriptも記載しましょう

5.CSSは、以下を記載します

上記を記載したら、レスポンシブメニューの実装は完了です!

デモ

オプション設定

オプション設定では、MENUという文字を消したり、メニューの出てくる場所を変えたり、
アニメーションを変えたりすることができます。記述法は以下の通りです。

最後に

いかがでしたか?レスポンシブのメニューのSlickNavのご紹介でした。
google対策に、ぜひご活用ください!

さらに、こんな記事も書きました

こちらの記事も参考にされてください>>軽量スクリプトのレスポンシブメニュー

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約5年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

  2. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  3. Illustrator

    自分で作れると便利!illustratorでチェック柄を描く方法

    みなさんこんにちは、mayukouです。※熊本・大分で地震の被害に…

  4. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

コメント

  • コメント (0)

  • トラックバックは利用できません。

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

  1. Photoshop

    イラストをスタンプにしよう!描いたイラストをphotoshopのカスタムシェイプ…
  2. Illustrator

    webデザインのトレンド!文字によって変形するゴーストボタンをイラレで作る方法
  3. Illustrator

    webデザインに活用するゴーストボタンを作るときの文字をセンタリングする方法
  4. iPhone

    生活が変わるかも!iphone7 に変えてみて思ったこと
  5. wordpress

    wordpressバックアップツールの決定版!All in one Migrat…
PAGE TOP