HTML、CSS、JavaScript を使用したスライドイン ナビゲーション メニューの作成

現代の Web デザインでは、ナビゲーション メニューはユーザー エクスペリエンスを大幅に向上させる重要なコンポーネントです。トレンディでユーザーフレンドリーなデザインの 1 つは、スライドイン ナビゲーション メニューです。このブログでは、HTML、CSS、JavaScript を使用してスライドイン ナビゲーション メニューを作成する手順を説明します。このチュートリアルは、洗練された機能的なナビゲーション システムで Web サイトを強化したいと考えている Web 開発者に最適です。

CSSのTransitionプロパティ
CSS の遷移プロパティは、CSS プロパティがある状態から別の状態に変化するときに滑らかなアニメーションを作成するために使用されます。これにより、どのプロパティをアニメーション化するか、アニメーションの長さ、タイミング関数 (アニメーションの進行方法)、およびアニメーションが開始するまでの遅延を指定できます。ここでは、transition プロパティとその使用方法の詳細な内訳を示します:

構文

リーリー

コンポーネント

1. プロパティ: アニメーション化する CSS プロパティを指定します。幅、高さ、背景色、不透明度など、ほぼすべての CSS プロパティをアニメーション化できます。キーワード all を使用して、遷移できるすべてのプロパティをアニメーション化することもできます。
2. 期間: これは、移行にかかる時間を定義します。秒 (例: 1 秒の場合 1s) またはミリ秒 (例: 500 ミリ秒の場合 500ms) で指定します。
timing-function: これは、遷移の中間値がどのように計算されるかを説明します。一般的な値は次のとおりです:

線形: 移行は最初から最後まで均一です。
緩和: トランジションはゆっくりと始まり、その後速度が上がり、その後再び遅くなります (デフォルト値)。
• イーズイン: 移行はゆっくりと始まります。
• イーズアウト: 移行はゆっくりと終了します。
• イーズインアウト: 移行はゆっくりと始まり、ゆっくりと終わります。
• 三次ベジェ関数を使用してカスタム タイミング関数を定義することもできます。

遅延: これは、移行を開始するまでの待機時間を定義します。期間と同様に、秒またはミリ秒で指定します。デフォルト値は 0s (遅延なし) です。

まず、HTML の構造から始めましょう。これにより、スライドイン メニューに必要な要素が定義されます。(続きを読む)

出力:

リーリー
次に、CSS を追加してメニューのスタイルを設定し、スライド動作を制御しましょう。 styles.css という名前のファイルを作成し、次のスタイルを追加します:

リーリー
次に、メニューのスライド動作を処理するための JavaScript を追加しましょう。 script.js という名前のファイルを作成し、次のコードを追加します:

リーリー
JavaScript の動作は次のとおりです:

toggleMenu(): この関数は、メニュー上のアクティブなクラスを切り替えて、ビューの内外にスライドさせます。

1. closeMenu(): この関数はメニューからアクティブなクラスを削除し、閉じるリンクがクリックされたときに確実にスライドして表示から消えます。

すべてをまとめる

スライドイン ナビゲーション メニューの動作を確認するには、3 つのファイル (index.html、styles.css、script.js) がすべて同じディレクトリにあることを確認し、Web ブラウザでindex.html を開きます。 [メニューの切り替え] ボタンをクリックすると、メニューが左側からスムーズにスライドして表示されるはずです。メニュー内の「閉じる」リンクをクリックすると、スライドして表示から消えます。

結論

HTML、CSS、JavaScript を使用したスライドイン ナビゲーション メニューの作成は簡単なプロセスであり、Web サイトのユーザー エクスペリエンスを大幅に向上させることができます。さまざまなスタイル、アニメーション、機能を試してみることで、Web サイトのニーズに合わせたユニークでユーザーフレンドリーなナビゲーションを作成できます。
記事全文を読む - CSS Translate プロパティの技術をマスターする

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