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

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた

    みなさんこんにちは、mayukouです。ウェブデザインのトレンドであ…

  2. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

  3. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する方法!

    みなさんこんにちは、mayukouです。今回は、Photoshopで…

  4. jQuery

    ボックス要素を横並びにしたときに高さが揃えられるJQuery、jquery.matchheight.…

    みなさんこんにちは、mayukouです。今回はwebデザインするとき…

  5. Photoshop

    スキャンで取り込んだイラストの線をPhotoshopで抽出するSeparate Lineartが便利…

    みなさん、こんにちは、mayukouです。デザインやイラストの仕事…

コメント

  • コメント (0)

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

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

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 現像すると写真が生き生きする!Macの写真アプリが素敵
  2. 売り上げアップを実感♪目から鱗の本「どうすれば売れるのか」を…
  3. 購入して半年♪iPad Proで描いたイラストをご紹介。(主…
  4. ブロガーの味方?高級コンデジ、Panasonic LX9を買…
  5. デザインが成功するテンプレがここに。「なるほどデザイン」を読…

facebook更新中!

  1. デザイン

    デザインの引き出しを増やすために!スクラップがオススメ♪
  2. Web Design

    丸からスライドして出てくる検索ボックスの作り方
  3. お仕事紹介

    お仕事紹介:保育園のお祭りパンフレットを作りました!
  4. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介
  5. 書評

    売り上げアップを実感♪目から鱗の本「どうすれば売れるのか」を読んで
PAGE TOP