HTML と CSS を使用して最新のサイドバー メニューをデザインするにはどうすればよいですか?

典型的な Web サイトのレイアウトを考えるとき、ほとんどの場合、重要なリンク (ページのさまざまなセクションへのナビゲーション リンク) のリストを Web サイトの右側または左側に含めることになります。メインコンテンツエリア。)。

このコンポーネントは「サイドバー」と呼ばれ、通常は Web ページ上のメニューとして使用されます。これは広く使用されていますが、開発者は多くの場合、ページ間のナビゲーションや、Web ページの異なる部分に移動するためにこの要素を Web サイトに追加します。

この機能を理解して、HTML と CSS だけを使用してモダンなサイドバーを作成してみましょう。

サイドバーメニューとは何ですか?

サイドバーは、メイン コンテンツ領域の右側または左側にある静的な列です。このコンポーネントには、ナビゲーション リンク、ウィジェット、または Web サイト内のその他の必要なリンク (ホームページ、コンテンツ、またはその他の部分) が含まれています。

簡単なサイドバー メニューを作成する方法を示す例を以下に示します。メニューはメイン コンテンツ領域の左側にあります (ほとんどの Web サイトと同じレイアウト)。

＃＃＃例＃＃＃

この例では、CSS グリッドを使用して Web ページを 2 つの部分に分割します。 Web ページの 15% がサイドバー メニューを構成し、85% がメイン コンテンツを構成します。

CSSグリッド

display:grid を設定すると、開発者は任意の要素をグリッド コンテナーに変換できます。使用する列を追加するには、

リーリー

value は列の幅を表します。長さ (px、cm、em) またはパーセンテージで表すことができます。

タグ (アンカー要素)

Web ページ内で外部ページをリンクするために使用されます。ドキュメント内のセクションをリンクするために使用することもできます。 id 属性は要素を一意に定義します。

リーリー

href 属性には、外部ページの URL またはドキュメントの内部部分の ID が含まれます。

リーリー ＃＃＃例＃＃＃

ここでは、切り替え可能なサイドバーを作成します。この例では、サイドバーを作成し、コンテンツ領域の左側に配置します。コンテンツ領域にボタンがあり、クリックすると作成したサイドバーが折りたたまれます。

CSS トランジション プロパティ

を使用して、サイドバーの位置をスムーズに変更しました。ボタンをクリックすると、サイドバーの

position

が

0 から -160px (サイドバーの幅と同じ) に変更されます。つまり、サイドバーは幅分 left に移動します。 リーリー ＃＃＃結論は＃＃＃ この記事では、Web ページの 2 種類のサイドバー メニューについて説明しました。 1 つは基本サイドバーで、もう 1 つは切り替えサイドバーです。これらはすべて HTML と CSS のみを使用してデザインされています。

以上がHTML と CSS を使用して最新のサイドバー メニューをデザインするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。