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

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

関連記事

  1. Illustrator

    メリハリがつく!Illustratorでドロップキャップを作る方法

    みなさんこんにちは、mayukouです。先日、雑誌広告のデザインを担…

  2. Photoshop

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

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

  3. Tutorial

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」

    みなさんこんにちは、mayukou です!目薬が欠かせない今日…

  4. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

  5. Photoshop

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

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  6. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順
  2. iPad Pro

    購入して半年♪iPad Proで描いたイラストをご紹介。(主にProcreate…
  3. jQuery

    ホームページに必須!?jQueryでトップへ戻るボタンの作り方
  4. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法
  5. illustration

    発見!スキャンで取り込んだイラストをIllustratorで使えるベクターにする…
PAGE TOP