How to make a responsive menu, which on width adjustment turns into a slide out menu

Question

I split my website into two parts. 70% of the left part is main content and on the other 30% is a menu.

Link for preview: https://codepen.io/ficko90/pen/xxJLxxr

Full Code:

 #main-content { width: 70%; height: 1000px; background: green; }.tag-menu { z-index: 10; position: absolute; top: 150px; right: 0; width: 400px; height: 650px; margin-right: 20px; margin-top: 10px; overflow-x: hidden; overflow-y: auto; }.tag-menu-header { width: 400px; margin-right: 20px; margin-top: 20px; z-index: 10; position: absolute; right: 0; }.tag-menu-header h1 { text-align: center; } #post-count { color: #8d8888; float: right; } /* Tag Start */.tag { border-radius: 10px; background-color: Transparent; background-repeat: no-repeat; border: 2px solid; cursor: pointer; overflow: hidden; outline: none; padding: 2px 5px; }.tag-dot { height: 10px; width: 10px; background-color: transparent; border: 2px solid; border-radius: 50%; display: inline-block; margin-right: 5px; }.tag:hover { border: 3px solid; } /* width */.tag-menu::-webkit-scrollbar { width: 8px; } /* Track */.tag-menu::-webkit-scrollbar-track { background: black; } /* Handle */.tag-menu::-webkit-scrollbar-thumb { background: rgb(25, 23, 23); } /* Handle on hover */.tag-menu::-webkit-scrollbar-thumb:hover { background: #555; }

 <,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3:1/css/bootstrap;min:css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>asdas</title> </head> <body> <div class="tag-menu-header"> <h1>Your Tags</h1> </div> <div class="tag-menu"> <table style="width: 100%; height: auto"> <tr> <td><a href="#"><span class="tag" style="border-color; red: color; red:"><span class="tag-dot" style="border-color; red: color; red:"></span>Math</span></a></td> <td> <p id="post-count">177 Posts</p> </td> </tr> <tr> <td><a href="#"><span class="tag" style="border-color; blue: color; blue:"><span class="tag-dot" style="border-color; blue: color; blue:"></span>English</span></a></td> <td> <p id="post-count">25 Posts</p> </td> </tr> <tr> <td><a href="#"><span class="tag" style="border-color; purple: color; purple:"><span class="tag-dot" style="border-color; purple: color; purple:"></span>German</span></a></td> <td> <p id="post-count">46 Posts</p> </td> </tr> <tr> <td><a href="#"><span class="tag" style="border-color; orange: color; orange:"><span class="tag-dot" style="border-color; orange; color: orange;"></span>Notes</span></a></td> <td> <p id="post-count">9 Posts</p> </td> </tr> </table> </div> <div id="main-content"> <h1>Main Content</h1> </div> </body> </html>

Error: When the window resizes its width, the menu goes over the main content due to its position: absolute

As of my preference, I don't want to have a slide-out-menu, when the page is in a full sized window, because I want to fill out the empty space. Instead, when the menu is about to come close to the main content, I want it to turn into a slide out button, that can showcase a menu and gray out everything behind it.

I haven't found anything like my request, without the use of SCSS

For my project I use: Bootstrap, pure CSS and JavaScript.

I have no such knowledge to fulfill the task, so any help would be appreciated. Thanks.

Answer 1

 <div class="circle-menu-button" tabIndex=0 onClick="openSideMenu()"></div>
 <div id="ready-to-show-by-click-on-circle-button" class="my-side-menu">
  <span>f line</span>
  <span>s line</span>
  <span>th line</span>
 </div>
 <div class="my-body-container">
 Foo
 </div>

Css

  /*mobiles*/


.my-body-container{
 Width: 100vw
}

.my-side-menu{
  display: none;
  Width: 300px
 }

.circle-menu-button{
  display: block
 }

/*pc or tablet*/
 Media-screen min-width 413px{

  .my-body-container{
   Width: 70vw
  }

 .my-side-menu{
  display: block;
  Width: 30vw
  }

 .circle-menu-button{
  With: 50px;
  Height: 50px;
  Border-radius: 50%;
  display: none;
  Background: lightblue;
  }

}

JS

function openSideMenu(){
document.getElementById('ready-to-show-by-click-on-circle- 
button').style.display='block'
 }

How to make a responsive menu, which on width adjustment turns into a slide out menu

Question

1 answers

solution1
0 2023-01-14 20:07:23

How to make a responsive menu, which on width adjustment turns into a slide out menu

Question

1 answers

solution1 0 2023-01-14 20:07:23

solution1
0 2023-01-14 20:07:23