このjQueryプラグインを使ってスマートなレスポンシブナビゲーションメニューを作成する
すべての現代的なサイトには レスポンシブレイアウト そして 使えるナビゲーション. それは与えられた.
しかし、ハンバーガーのメニューはここまでしかない ユーザビリティを根本的に変える さまざまな画面サイズ用。これを処理するためのより良い方法は 徐々にリンクを隠す のようなプラグインで OkayNav.
この無料のjQueryプラグイン 非常にシンプルなメニュー機能を追加しました 任意のページにナビゲーション項目を非表示にする, 異なるビューポートに基づきます。このように、スマートフォンユーザーは単一のハンバーガーメニューを持っていますが、タブレットユーザーもいくつかのリンクを見ることができます.
デフォルトでは、 素子 そして 長い順不同リスト. これまでのところ、このプラグインはマルチレベルのドロップダウンをサポートしているとは思いませんが、jQueryを少し知っていれば自分でこれを追加することができます。.
OkayNavは非常にシンプルです より単純なウェブサイト向け それはナビゲーションリンクのほんの一握りを持っています。これらのリンク オフスクリーンメニューの背後にゆっくりと隠れる あるビューポートにぶつかると より多くのリンクが隠れ続ける ブラウザが小さくなるほど.
あなたがする必要があります 番号なしリストをラップする ナビゲーション要素で、それに特定のIDを与えます。そうすれば、 ナビゲーション全体をターゲットにする とともに okayNav()
このような機能:
var navigation = $( '#nav-main')。okayNav();
これはただの 最も簡単な設定 カスタム機能なし。一緒に働くことができます 1ダース以上のカスタムオプション アイコンスタイル、メニューアニメーション、スワイプサポート、コールバック関数を制御するためにこのライブラリに組み込まれています。.
そして、あなたもメニューを呼び出すことができます 自由に開閉 関数に特定の値を渡すことによって。これは簡単な例です。 ナビゲーションを開く:
navigation.okayNav( 'openInvisibleNav');
これらのコードのすべてはよく文書化されています。 GitHubリポジトリ スクリプトのダウンロードも含まれています。あなたがCDNルートを好むならば、あなたはまた使用することができます RawGitリンク このスクリプトをGitHubから直接追加する.
OkayNavは 小規模サイトに最適 これはプログレッシブナビゲーション技術の恩恵を受けます。しかし、これがどのように機能するのかがまだわからない場合は、この小さなプラグインで何ができるのかを示すCodePenのこのデモを確認してください。.