How do I add a sidebar menu in html?

Question

So I want to make a sidebar menu with either HTML, CSS, or JavaScript to use in a website. For example the W3 Schools website has a side menu and I would like to replicate that.

Answer 1

There is a rule that tells you: If you can do something in CSS, then don't use JavaScript for it. And fortunately you can do it in CSS using flexbox layout. It simply lets you move, align, put simetrically elemnts on the page. Check this flexbox cheat sheet .

Take a look at this Demo :

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

    height: 200px;
}

display: flex - makes body children affected by flex layout.

flex-direction: row - makes all the children align in a row. Possible values are: row, row-reverse, column, column-reverse .

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

    width: 150px
}

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

    width: 100%
}

width: 150px - set the width of a sidebar.

width: 100% - set the width to fill the remaining space.

Answer 2

The way I have created sidebars in the past was using html5 and css3 coding. I like that in html5 they have aside tags, nav tags and section tags.

I always use the navigation area for the main links list, usually spanning across the top of the page. However, when I want to include more than one navigation area such as a links list in a sidebar I will use the <aside> tags.

Using simple CSS3 coding you can setup the properties for your side bar sections pretty easily. the W3Schools website provides tons of tutorials for this.

I hope that helped you out a bit =) Best of luck to you.