レスポンシブナビゲーションを作成するための10個のCSSおよびJavaScriptコードスニペット

優れたレスポンシブサイトの最も複雑な部分の1つは、ナビゲーションです。 これは理解するのに時間がかかる場合があり、それを支援するチュートリアルがたくさんあります。 しかし、私はこの記事で収集したようなコードスニペットを使用するのも好きです。

これらのレスポンシブナビゲーションスニペ​​ットはすべて、独自のプロジェクト用に自由に編集および複製できます。 また、さまざまなスタイルを備えているため、あらゆるタイプのWebサイトで機能するものがここにあります。

1. JohnnyMangoによるレスポンシブフルページレイアウト

このレスポンシブな例は、Webサイトのプロトタイピングフェーズをどこまで進めることができるかを示しています。 リンクにカーソルを合わせてオートフォーカスすると、ナビゲーションに興味深い機能があることに気付くでしょう。 この効果は、同じナビゲーションを備えた「ライブ」Webサイトで変更できますが、この例では、ページのUI / UXをアピールするのに役立ちます。

JohnnyMangoによるKube付きのペンレスポンシブナビゲーションデモを参照してください

2. TaniaRasciaによるドロップダウンナビゲーションバー

ナビゲーションでより長いドロップダウンアイテムが必要な場合は、このメニューの方が適している可能性があります。 これは、ほんの一握りのメニュー項目しか備えていない、より基本的なナビゲーションの強力な代替手段です。 この場合、ドロップダウンが非常に小さいリンクの簡単なリストが表示されます。 サブメニューのリンクは、jQueryによって処理されるクリックイベントにのみ表示されます。 これをCSSのみに変更することもできますが、クリックトリガーは失われます。

それでも、このようなすっきりとしたデザインの場合、このスニペットが開発者にどれほどの多様性を提供するかに驚いています。

TaniaRasciaによるペンレスポンシブドロップダウンナビゲーションバーを参照してください

3. JanCzizikowによる単一ページのレイアウト

単一ページのナビゲーションメニューには、他のメニューと同じように愛情が必要です。 これは、実際の単一ページナビゲーションの完璧な例です。 リンクはスムーズなアニメーションで下にスクロールしますが、あまり長く待たされることはありません。

言うまでもなく、ブラウザのサイズに関係なく、最適なサイズに自動的にサイズ変更されます。 私は主に、販売ページや単純なポートフォリオサイトにこのタイプのナビゲーションをお勧めします。 クリーンで、レスポンシブテクニックに加えていくつかの優れたアニメーション機能を備えています。

JanCzizikowによるCSSアニメーションとjQueryを使用したペンの完全レスポンシブナビゲーションをご覧ください

4.ステファニーウォルターによる赤いドロップダウンメニュー

開発者のStephanieWalterは、Web用のいくつかのエキサイティングなプロジェクトを構築しました。 このスニペットは、真っ赤でレスポンシブなナビゲーションを特徴とする一例にすぎません。

リンクには、カスタム選択さ​​れた機能と起動するための優れたホバー効果を備えたもう少しピザがあります。 サイズを変更すると、ナビゲーションで代わりにスライド式のドロップダウンメニューが使用されることに気付くでしょう。 私はほとんどモバイル用のリンクのブロックレベルのリストを選ぶでしょうが、これはサブメニューを考慮するとはるかにうまく機能します。

ステファニーウォルターによるペンレスポンシブナビゲーションマルチレベルを参照してください

5. AhmadHjazyによる純粋なCSSデザイン

これは、ナビゲーションに純粋なCSSを使用したユニークなデザインです。 これは、元素の周期表を模倣したナビゲーションリンクを備えた垂直メニューです。

ホバー効果は少し遅れていますが、間違いなく興味深いものです。 レスポンシブスタイルは言うまでもなく、驚くほど使いやすいです。 おそらく最も印象的な部分は、この例全体でCSSのみを使用する方法です。

AhmadHjazyによるペンCSSレスポンシブナビゲーションメニューを参照してください

6. MarcLibunaoによるレスポンシブスティッキーヘッダー

以前のスニペットで単一ページのデザインについて説明しましたが、このレスポンシブヘッダーも同様の軌跡をたどります。 唯一の違いは、このナビゲーションではページ上に少し大きなブロックがあり、レスポンシブページデザインの処理が少し異なることです。

ブラウザのサイズを変更すると、この例ではハンバーガーアイコンと楽しいアニメーションが使用されていることがわかります。 スタイルを考えるといいのですが、全員ではないかもしれません。

MarcLibunaoによるペンレスポンシブスティッキーヘッダーナビゲーションを参照してください

7. Dragoecoによるレスポンシブ＆タッチフレンドリー

すべての優れたWebサイトは、デフォルトでタッチフレンドリーである必要があります。これが、このナビゲーションを設計者にとってさらに魅力的なものにしている理由です。

各リンクは新しいページにつながりますが、タッチベースのデバイスでタップしてドロップダウンメニューに簡単にカーソルを合わせることができます。 この機能はナビゲーションメニューにないことが多く、ドロップダウンの設計が難しい理由の1つです。

Dragoecoによるペンドロップダウンナビゲーション：レスポンシブでタッチフレンドリーを参照してください

8.AnabolicHippoによるシンプルなナビゲーションリンク

シンプルなナビゲーションメニューと言えば、こんなデザインだと思います。 小さい画面でも、各リンクは独自のブロック要素として表示されます。 ハンバーガーメニューや非表示のアニメーションメニュー機能はありません。 代わりに、リンクのサイズが変更され、別々の行に分割されます。

最も難しい部分は、モバイルデバイスでのドロップダウン効果の処理です。 リンクの多くにはサブメニューがあり、小さい画面でも同じように機能します。

これはサブメニューがほとんどまたはまったくないサイトに最適であると私は主張しますが、モバイルで試してみて、体験についてどう思うかを確認する価値があります。

AnabolicHippoによるペンレスポンシブナビゲーションメニューを参照してください

9. LouisChenaisによるプレイステーションカーテンメニュー

開発者のLouisChenaisは、PlayStationのWebサイトに基づいて、私のお気に入りのレスポンシブナビゲーションの1つを作成しました。 ルイはこれを「カーテンメニュー」と呼んでおり、ページ全体を追い越してスライドして表示されます。 これはモバイルインターフェイスでは一般的であり、Webデザイナーにも急速に普及しています。

私が本当に好きなのはアニメーションのスタイルです。 なめらかで高速なので、ユーザーを飽きさせずにリンクを表示できます。 そして何よりも、これは本番Webサイトで機能する可能性があるように感じます。

ペンレスポンシブナビゲーションの原則＃3 – LouisChenaisによるカーテンメニューを参照してください。

10. SamirAlleyによるレスポンシブメガメニュー

Webを検索して、何百ものメガナビゲーションメニューの例を見つけることができます。 これらは通常、より大きなブログやニュースWebサイトに表示されますが、eコマースショップや大規模な代理店サイトでも人気があります。 メガメニューの最も難しい部分は、完全に応答性を高めることです。 この小さなスニペットのおかげで、メガメニューのデザインを簡単にどんな画面にも合うように作り直すことができます。

モバイルでは、スライドナビゲーションを使用して、すべての内部リンクを1つのメニューに表示します。 これは少し面倒に思えるかもしれませんが、それが理にかなっている場合は、jQueryを使用してサブリンクを非表示にすることもできます。 これは、モバイルユーザーを遠ざけることなくデスクトップでメガメニューを実行するために私が見た中で最も応答性の高いソリューションの1つです。

ペンレスポンシブメガメニュー–サミール路地によるナビゲーションを参照してください