How to use multiple side navs in the same spot?

Question

I'm trying to do what Microsoft word does with the tabs on top and when you click on one, a menu appears and can disappear. Each tab has it's own menu. How would I code this in html and css? I need them to side out from the side while pushing the screen. Currently when I click on the first tab it works, but then when I click the second tab it just shows up underneath the first tab's slide out menu. Thanks!

Answer 1

Make a dropdown menu
See this code below👇👇👇
https://code.sololearn.com/W9gYZEUAZwGV/?ref=app

Answer 2

I'm guessing you could create this by making one sidenav that pushes the rest of the non sidenav content then inside that one sidenav create multiple div containers for each tab, then style each of them separately, hide the rest while working on each of them, then when you select a new tab, using JavaScript (or jQuery) hide every container that is not related to the tab clicked, then only show the one that is then slide out the sidenav

Answer 3

maybe like this?

https://code.sololearn.com/WMlCRs66myj8/?ref=app

Answer 4

Maybe like one of these?

https://www.w3schools.com/howto/howto_js_sidenav.asp