Html - Make side menu disappear when resizing window

Kotor2
October 1, 2023
322 views
0 votes
2 Answers

So I’m building my first site, and I’m finding that the page looks really bad when I resize the browser window. I haven’t used any absolute values except for a SNS follow button down the bottom of the page.

I’d like to make the side menu disappear when you resize the window so the quiz section doesn’t get completely squashed. How could I go about doing this? I’m guessing that absolute is not the only thing that can make a website look bad on resizing the window, but what other considerations do you all recommend I consider?

Also, I’ve created space on the left and right sides for future advertising using padding. Is this standard practice?

.whole_doc_edit {
  padding-left: 260px;
  padding-right: 260px;
  background-color: aliceblue;
}

img {
  width:150px;
}

.quiz_space {
  display: flex;
  flex-direction: row-reverse;
  border: 5px solid #555;
  background-color: #ffffff;
  padding-left: 15px;
}

.instructions {
  padding-top: 20px;
  padding-bottom: 10px;
}

.side_menu {
  display: flex;
  list-style: none;
  flex-direction: column;
  border: solid, 3px;
  color:#f1f1f1;
  
}

.quiz_space__content {
  flex-grow: 1;
  padding-right: 5px;
}

.side_heading { 
  color:#f9f9f9;
  padding: 14px 16px;
  padding-left: 20px;
  padding-top: 5px;
  border: solid, 2px #f1f1f1;
}

.advert_space {
  padding-left: 200px;
  padding-right: 200px;
  padding-bottom: 200px;
}

.side_menu_container {
  background-color: #333;
  border: #333 3px;
  max-width: 250px;
}

.container-fluid {
  padding-top: 5px;
}


/* SNS SECTION */
.sns_box {
  color: black;
}

.sns_box:hover {
  color: #D3DAE5;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.sns_btn {
  width: 280px;
  height: 60px;
  border: 3px solid #333;
  border-radius: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  color: black;
  cursor: pointer;
  overflow: hidden;
  font-size: 24px;
  transition: all 0.5s ease;
}

.sns_btn:before {
  content: "FOLLOW US";
  font-family: "Poppins", sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  font-size: 16px;
  letter-spacing: 1px;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #D3DAE5;
  transition: all 0.5s ease;
}

.sns_btn:hover {
  background: #FFF
}

.sns_btn:hover:before {
  top: -50%;
}

.side_menu_options {
  background-color: #FFF;
  border:#333 3px;
}

.answer_space {
  padding-right: 40px;
}


.bottom_flex {
  display:flex
}

.top {
  --offset: 50px; 
  position: sticky;
  bottom: 20px;      
  margin-right: 10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));
  align-self: flex-start;

  /* visual styling */
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
  white-space: nowrap;
}

<!DOCTYPE html>
<html class="whole_doc_edit" lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>


<body>
  <div class="content">
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <img src="Home Page Logo.png" alt="J.L.P.T Logo">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Donate</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Select Level
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">N5</a></li>
              <li><a class="dropdown-item" href="#">N4</a></li>
              <li><a class="dropdown-item" href="#">N3</a></li>
              <li><a class="dropdown-item" href="#">N2</a></li>
              <li><a class="dropdown-item" href="#">N1</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

    <div class="quiz_space">
      <div class="side_menu_container">
        <h4 class="side_heading">Learn Japanese Through Popular Culture</h4>
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action">Anime</a>
          <a href="#" class="list-group-item list-group-item-action">Netflix</a>
          <a href="#" class="list-group-item list-group-item-action">Manga</a>
          <h4 class="side_heading">Learn Japanese Through Everyday Life</h4>
          <a href="#" class="list-group-item list-group-item-action">Signs</a>
          <a href="#" class="list-group-item list-group-item-action">Common Documents</a>
          <a href="#" class="list-group-item list-group-item-action">Real Life Scenarios</a>
        </div>
      </div>

      <div class="quiz_space__content">
        <p class="instructions">Choose the correct responses</p>
        <p class="questions" id="question1">
          <b> 1. 小説がベストセラーになってから、彼は毎日<u>執筆</u>で忙しくなった</b></p>
        <input type="radio" name="answer1" value="wrong"><span class="answer_space">しゅっぴつ</span>
        <input type="radio" name="answer1" value="correct"><span class="answer_space">しっぴつ</span>
        <input type="radio" name="answer1" value="wrong"><span class="answer_space">しっしょ</span>
        <br>
        <br>
        <p class="questions" id="question2">
          <b> 2. 彼女は度胸を<u>据えて</u>部長の部屋に入った</b></p>
        <input class="answer_space" type="radio" name="answer2" value="wrong"><span class="answer_space">とらえて</span>
        <input type="radio" name="answer2" value="wrong"><span class="answer_space">そなえて</span>
        <input type="radio" name="answer2" value="correct"><span class="answer_space">すえて</span>
        <br>
        <br>
        <p class="questions" id="question3">
          <b> 3. 時間<u>厳守</u>は最低限度のマナーである</b></p>
        <input type="radio" name="answer3" value="wrong"><span class="answer_space">ぎんしゅ</span>
        <input type="radio" name="answer3" value="wrong"><span class="answer_space">きんしゅ</span>
        <input type="radio" name="answer3" value="correct"><span class="answer_space">げんしゅ</span>
        <br>
        <br>
        <p class="questions" id="question4">
          <b>4. 海は<u>穏やか</u>に見えるとはいえ、実際強い急流が流れている</b></p>
        <input type="radio" name="answer4" value="wrong"><span class="answer_space">なめらか</span>
        <input type="radio" name="answer4" value="correct"><span class="answer_space">おだやか</span>
        <input type="radio" name="answer4" value="wrong"><span class="answer_space">あざやか</span>
        <br>
        <br>
        <p class="questions" id="question5">
          <b>５. 合計が高いと思ったから<u>内訳</u>を確認した</b></p>
        <input type="radio" name="answer5" value="correct"><span class="answer_space">Real Madrid</span>
        <input type="radio" name="answer5" value="wrong"><span class="answer_space">F.C. Barcelona</span>
        <input type="radio" name="answer5" value="wrong"><span class="answer_space">A.C. Milano</span>
        <br>
        <br>
        <p class="questions" id="question6">
          <b>6. 台風を抜け出したと聞いた彼女は<u>安堵</u>のため息をもらした</b></p>
        <input type="radio" name="answer6" value="correct"><span class="answer_space">Real Madrid</span>
        <input type="radio" name="answer6" value="wrong"><span class="answer_space">F.C. Barcelona</span>
        <input type="radio" name="answer6" value="wrong"><span class="answer_space">A.C. Milano</span>
        <br>
        <br>
        <p class="questions" id="question7">
          <b> 7. この雑誌は不安を<u>煽る</u>記事ばかりでわざわざ読む必要はないと思う</b></p>
        <input type="radio" name="answer7" value="correct"><span class="answer_space">Real Madrid</span>
        <input type="radio" name="answer7" value="wrong"><span class="answer_space">F.C. Barcelona</span>
        <input type="radio" name="answer7" value="wrong"><span class="answer_space">A.C. Milano</span>
        <br>
        <br>
        <p class="questions" id="question8">
          <b> 8. 彼は先生のことを<u>仰いでいる</u></b></p>
        <input type="radio" name="answer8" value="correct"><span class="answer_space">Real Madrid</span>
        <input type="radio" name="answer8" value="wrong"><span class="answer_space">F.C. Barcelona</span>
        <input type="radio" name="answer8" value="wrong"><span class="answer_space">A.C. Milano</span>
        <br>
        <br>
        <p class="questions" id="question9">
          <b>9. ドイツに行ってみたいと<u>かねがね</u>思っていました。</b></p>
        <input type="radio" name="answer9" value="correct"><span class="answer_space">Real Madrid</span>
        <input type="radio" name="answer9" value="wrong"><span class="answer_space">F.C. Barcelona</span>
        <input type="radio" name="answer9" value="wrong"><span class="answer_space">A.C. Milano</span>
        <br>
        <br>
        <p class="questions" id="question10">
          <b> 10. テレワークが増えているので自分の<u>書斎</u>を求めている人が多い</b></p>
        <input type="radio" name="answer10" value="correct"><span class="answer_space">Real Madrid</span>
        <input type="radio" name="answer10" value="wrong"><span class="answer_space">F.C. Barcelona</span>
        <input type="radio" name="answer10" value="wrong"><span class="answer_space">A.C. Milano</span>
        <br>
        <br>
        <button class="submit" onclick="return getResults();" type="submit">
                Check answers</button>
        <br>
        <br>

        <button a href="CV.pdf" download class="btn btn--download">Download <span class="u-bolder">CV</span></a></button>
        <h2 id="results-h">Results</h2>
        <p id="results"></p>
      </div>
  
  
    </div>
    <div class="wrapper">
      <div class="sns_btn">
        <a class="sns_box" href="#"><i class="fa fa-github-square"></i></a>
        <a class="sns_box" href="#"><i class="fa fa-codepen"></i></a>
        <a class="sns_box" href="#"><i class="fa fa-youtube-play"></i></a>
        <a class="sns_box" href="#"><i class="fa fa-facebook-square"></i></a>
        <a class="sns_box" href="#"><i class="fa fa-twitter-square"></i></a>
        <a class="sns_box" href="#"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
  </div>
  <div class="bottom_flex">
  <a href="#" class="top">Back to Top ↑</a>
</div>
</div>
</body>
</html>

Tags: css html

Answers

- URMine
- October 1, 2023 at 6:31 am
- 0 votes
0
I think you should use @media to adjust the sidebar. With it, you can make it so mobile, tablet, and computer users would see a different screen.

Login or Signup to reply.

- TSX
- October 1, 2023 at 7:04 am
- 0 votes
0
You can use the CSS media rule- in below example, if the screen width becomes less than 600px, the side menu might disappear.
```
 @media (max-width: 600px) {
  .side_menu_container {
    display: none;
  }
}
```
I’d recommend looking more into the @media rule! (https://www.w3schools.com/cssref/css3_pr_mediaquery.php)
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Make side menu disappear when resizing window

Answers