スライド式のサイド ナビゲーション メニューを使用してレスポンシブ デザインを作成する

このチュートリアルでは、JavaScript と CSS を使用して、展開可能なサイド ナビゲーション メニューを作成します。最終的な製品を以下に示します:

1. タグを作成します

まず、サイド メニューにマークアップを追加しましょう:

リーリー

ここでは、sidenav クラスを使用してサイド メニュー div を作成したことがわかります。次に、<nav></nav> タグを使用して実際のトップ バー ナビゲーションを追加し、サイド メニュー アイコンには SVG を使用しました。

Web サイトのすべてのコンテンツを div id="main" コンテナに入れて、右にスライドするようにしてください。

2.JavaScript コードの作成

次に、ham-icon クラスを使用してハンバーガー アイコンのクリック イベントと、サイド ナビゲーション メニューが画面にスライドした後に表示される閉じるボタンをリッスンする JavaScript を追加しましょう。

リーリー

ハンバーガー アイコンをクリックすると、サイド ナビゲーションが表示されます。これを行うには、ナビゲーションの幅を 250px に設定し、メイン サイトのコンテンツに 250px の左マージンを追加します。

閉じるボタンをクリックすると、サイド ナビゲーションが非表示になります。これを行うには、ナビゲーションの幅を 0 に戻し、メイン サイト コンテンツの左マージンも 0 に設定します。

3. CSS スタイルの使用

最後に、CSS を使用してページ上のサイド メニューとリンクのスタイルを設定する必要があります。 CSS は、すべての Web ページ要素を必要な場所に正確に配置します。また、transition プロパティを使用して、いくつかの簡単なアニメーションを適用します。 CSS を一度に 1 つずつ見てみましょう。

リーリー

サイド ナビゲーションの height を 100% に設定し、初期の width を 0 に設定して非表示にします。ただし、サイド ナビゲーションのコンテンツは、overflow-x 属性の値が hidden に設定されている場合にのみ非表示のままになります。

transition プロパティにより、サイド ナビゲーションの幅の変更が突然起こらないようになっており、イージング機能により多少の弾力性が得られます。

サイド ナビゲーション内のリンクについては、メニュー テキストが複数行にはみ出さないように、white-space 属性の値を nowrap に設定します。

リーリー

上記の CSS スタイルにより、閉じるボタンがサイド ナビゲーションの他のリンクから分離されます。閉じるボタンに絶対位置を適用し、ホバー時に背景が明るい灰色にならないようにしました。また、ユーザーがその上にマウスを置くと、サイズが 20% 増加します。

次の CSS では、同じ遷移期間と同じイージング関数を使用して、メイン コンテンツの位置がナビゲーション メニューと同期して移動するようになります。 overflow-x プロパティの値を hidden に設定すると、コンテンツの移動時に水平スクロール バーが表示されなくなります。

リーリー

次の CSS を使用して、ハンバーガー アイコンに少しの回転動作を追加することもできます。ハンバーガーアイコンを0.5秒で180度回転させます。

リーリー

最後に、次の CSS を使用してリンクの間隔とサイズを調整して、ナビゲーション メニューの応答性を高めましょう。これにより、垂直方向のスペースが狭い画面上でメニューが範囲外に拡張されることがなくなります。

リーリー

この時点で、ナビゲーション メニューは次の CodePen デモのように表示されるはずです。

4. スライドショーを削除します

スライド アニメーションなしでメニューを表示するには、以下の省略形に示すように、CSS プロパティ transition を変更するだけです。 リーリー

これにより、

transition で遅延が指定されていないため、変更がすぐに表示されます。使用するデフォルト値は 0.5s です。 ＃＃＃結論は＃＃＃

サイド メニューの作成には数行のコードのみが必要で、多くのリソースを使用する必要はありません。特定のケースに合わせてメディア クエリを追加して CSS を変更し、コードをさまざまなデバイスの画面解像度に対応できるようにします。

さらに一歩進めるために、Bootstrap や Bulma などの CSS フレームワークを使用してメニューのスタイルを設定することもできます。

この記事は、Monty Shokeen からの寄稿により更新されました。 Monty はフルスタックの開発者であり、チュートリアルを書いたり、新しい JavaScript ライブラリを学習したりすることも楽しんでいます。

以上がスライド式のサイド ナビゲーション メニューを使用してレスポンシブ デザインを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。