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. Photoshop

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

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

  2. CSS

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

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

  3. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  4. Web Design

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

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

  5. Photoshop

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

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

  6. Illustrator

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

    こんにちは、mayukouです。九州は梅雨入りしました〜。今日は天…

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ
  2. Illustrator

    ロゴやイラストに!Illustratorでかすれ表現をする方法!
  3. Web Design

    WordPressブログを同じサーバーに複数作る方法
  4. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ
  5. Mac

    気に入った画像を切り抜いて保存できる!スクラップアプリ、Pixaveの使い方
PAGE TOP