htmlでサイドバーメニューを追加するにはどうすればよいですか？

Question

私はHTML、CSS、JavaScriptのいずれかのサイドバーメニューをWebサイトで使用したいと考えています。たとえば、W3 Schoolsのウェブサイトにはサイドメニューがあり、それを再現したいと思います。

Answer 1

あなたには次のようなルールがあります：もしあなたがCSSで何かできるのであれば、JavaScriptを使わないでください。そして幸いにも、あなたはflexboxレイアウトを使ってCSSでそれを行うことができます。それは単にあなたが移動、整列、simetrically elemntsをページに置くことができます。これをチェックしてくださいflexbox cheat sheet。 - フレックスレイアウトの影響を受けbody子供を作る

body { 
    display: flex; 
    flex-direction: row; 

    height: 200px; 
} 

display: flex：

このDemoを見てみましょう。

flex-direction: row - すべての子を一列に整列させます。可能な値はrow, row-reverse, column, column-reverseです。

body .side-bar { 
    background-color:yellow; 

    width: 150px 
} 

body .main-content { 
    background-color: red; 

    width: 100% 
} 

width: 150px - サイドバーの幅を設定します。

width: 100% - 残りのスペースを埋める幅を設定します。

Answer 2

過去にサイドバーを作成した方法は、html5とcss3のコーディングを使用していました。私はhtml5の中に、タグ、ナビタグ、セクションタグを脇に置いているのが好きです。

私は常にメインリンクリストのナビゲーション領域を使用します。通常、ページ上部にまたがります。しかし、サイドバーにリンクリストなど複数のナビゲーション領域を含める場合は、<aside>タグを使用します。

単純なCSS3コーディングを使用すると、サイドバーセクションのプロパティを簡単に設定できます。 W3SchoolのWebサイトでは、このためのチュートリアルが多数提供されています。

私は少し助けてくれることを願っています。=）あなたに最高の運があります。