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

    自分らしさがアップ!WordPressのサイドバーにInstagramウィジェットを乗せる方法

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

  2. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  3. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

  4. Web Design

    カフェのサイトをwordpressでリニューアル制作しました。その時の覚書

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

  5. CSS

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

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

  6. Photoshop

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. Web Design

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

    今すぐできる!HTMLメールの作り方
  3. ブログ

    [書評]サラリーマンだけが知らない好きなことだけ食っていくための29の方法
  4. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。
  5. デザイン

    人は色で判断している!?ブランディングにおける色彩設計の基本
PAGE TOP