Solution 1 :

You can change div.menu into a label for a hidden checkbox instead and use the state of checkbox to toggle the nav.

<label class="menu" for="menu-cb">
...
</label>
<input type="checkbox" id="menu-cb" style="display: none;">
#menu-cb:checked + .nav {
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

See complete code:

html {
  scroll-behavior: smooth;
  --bg-primary: #2A2D34;
  --bg-secondary: #555;
}

body {
  background: #F8F4E3;
  font-family: 'Raleway', sans-serif;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  font: 16px;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgb(102, 102, 102);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: #8c8a89;
}

.navbar {
  margin-left: 0.3rem;
  position: fixed;
  background-color: var(--bg-primary);
  transition: width 600ms ease-out;
  box-shadow: 5px 6px 7px rgba(102, 102, 102, 0.5);
  border-radius: 10px;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  opacity: 0;
}

.items {
  width: 100%;
}

.link {
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 5rem;
  color: white;
  filter: grayscale(100%) opacity(0.7);
  border-radius: 10px;
  transition: 600ms;
}

.link:hover {
  filter: grayscale(0%) opacity(1);
  background: var(--bg-secondary);
  color: orange;
}

.link-text {
  display: none;
  margin-left: 1rem;
}

.link svg {
  width: 2rem;
  min-width: 2rem;
  margin: 0 1.5rem;
}

.menu svg {
  width: 2rem;
  min-width: 2rem;
  margin: 0 1.5rem;
}

.menu {
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 5rem;
  filter: grayscale(100%) opacity(1);
  border-radius: 10px;
  transition: 600ms;
}

.menu:hover {
  background: var(--bg-secondary);
  color: orange;
}

#menu-cb:checked + .nav {
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .navbar {
    width: 2rem;
    height: 8rem;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .link svg {
    width: 1rem;
  }
  .navbar:hover {
    width: 7rem;
  }
  .navbar:hover .link-text {
    display: inline;
  }
  .link svg {
    width: 1rem;
    min-width: 1em;
    margin: 0 0.4rem;
  }
  .link {
    height: 2rem;
  }
}

@media only screen and (min-width: 600px) {
  .navbar {
    width: 5rem;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .navbar:hover {
    width: 16rem;
  }
  .navbar:hover .link-text {
    display: inline;
  }
  .link svg {
    width: 2rem;
    min-width: 2rem;
    margin: 0 1.4rem;
  }
}
<body>
  <div class="menu-container">
    <nav class="navbar">
      <label class="menu" for="menu-cb">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars"
          class="svg-inline--fa fa-bars fa-w-14" role="img"  viewBox="0 0 448 512">
          <path fill="#a6a6a6"
            d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
          </path>
        </svg>
      </label>
      <input type="checkbox" id="menu-cb" style="display: none;">
      <ul class="nav">
        <li class="items">
          <a href="#top" class="link">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust"
              class="svg-inline--fa fa-adjust fa-w-16" role="img" 
              viewBox="0 0 512 512">
              <path fill="currentColor"
                d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
              </path>
            </svg>
            <span class="link-text">Home</span>
          </a>
        </li>

        <li class="items">
          <a href="#" class="link">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust"
              class="svg-inline--fa fa-adjust fa-w-16" role="img" 
              viewBox="0 0 512 512">
              <path fill="currentColor"
                d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
              </path>
            </svg>
            <span class="link-text">Bio</span>
          </a>
        </li>

        <li class="items">
          <a href="#" class="link">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust"
              class="svg-inline--fa fa-adjust fa-w-16" role="img" 
              viewBox="0 0 512 512">
              <path fill="currentColor"
                d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
              </path>
            </svg>
            <span class="link-text">Gallery</span>
          </a>
        </li>

        <li class="items">
          <a href="#bottom" class="link">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust"
              class="svg-inline--fa fa-adjust fa-w-16" role="img" 
              viewBox="0 0 512 512">
              <path fill="currentColor"
                d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
              </path>
            </svg>
            <span class="link-text">Contact</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</body>

Solution 2 :

may this can help, I use jquery for solve your problem.

 $(document).ready(function () {
      $('.menu svg').click(function (e) {
        e.preventDefault();
        $('.navbar').toggleClass('menu-open');
      });
  });
html{
scroll-behavior: smooth;
--bg-primary: #2A2D34;
--bg-secondary:#555;
}
body{
  background: #F8F4E3;
  font-family: 'Raleway', sans-serif;
  font-family: 'Open Sans', sans-serif;
  margin:0;
  font: 16px;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(102,102,102);
    -webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover
{
  background: #8c8a89;
}
.navbar
{
  margin-left: 0.3rem;
  position: fixed;
  background-color: var(--bg-primary);
  transition: width 600ms ease-out;
  box-shadow: 5px 6px 7px rgba(102,102,102,0.5 );
  border-radius: 10px;
}
.nav
{
  list-style: none;
  padding: 0;
  margin: 0;
  height: 0;
  transition: 0.5s;
  opacity: 0;
}

.items
{
  width: 100%;
}

.link
{
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 5rem;
  color: white;
  filter: grayscale(100%) opacity(0.7);
  border-radius: 10px;
  transition: 600ms;
}
.link:hover
{
  filter: grayscale(0%) opacity(1);
  background: var(--bg-secondary);
  color: orange;
}
.link-text
{
  display: none;
  margin-left: 1rem;
}
.link svg
{
  width: 2rem;
  min-width: 2rem;
  margin: 0 1.5rem;
}
.menu svg
{
  width: 2rem;
  min-width: 2rem;
  margin: 0 1.5rem;
}
.menu
{
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 5rem;
  filter: grayscale(100%) opacity(1);
  border-radius: 10px;
  transition: 600ms;
}
.menu:hover
{
  background: var(--bg-secondary);
  color: orange;
}
/* .menu:active + .nav
{
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
} */
@media  only screen and (max-width: 600px) {
.navbar
{
  width: 2rem;
  height: 8rem;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.link svg
{
  width: 1rem;
}
.navbar:hover {
  width: 7rem;
}

.navbar:hover .link-text {
  display: inline;
}
.link svg
{
  width: 1rem;
  min-width: 1em;
  margin: 0 0.4rem;
}
.link {height: 2rem;}
}
@media only screen and (min-width: 600px) {
  .navbar {
    width: 5rem;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  /* .navbar:hover {
    width: 16rem;
  } */

  .navbar:hover .link-text {
    display: inline;
  }
  .link svg
  {
    width: 2rem;
    min-width: 2rem;
    margin: 0 1.4rem;
  }
}


nav.navbar.menu-open {
    width: 16rem;
}

nav.navbar.menu-open ul.nav {
    opacity: 1;
    display: block;
    transition: 0.5s;
    height: 320px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
  <script src="https://kit.fontawesome.com/a8c6ed706b.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>VTT</title>
<link rel="stylesheet" href="css/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
<link rel="manifest" href="icon/site.webmanifest">
  </head>
<body>
  <div class="menu-container">
<nav class="navbar">
  <div class="menu">
    
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img"  viewBox="0 0 448 512"><path fill="#a6a6a6" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
    
  </div>
  <ul class="nav">
    <li class="items">
      <a href="#top" class="link">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust" class="svg-inline--fa fa-adjust fa-w-16" role="img"  viewBox="0 0 512 512"><path fill="currentColor" d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"></path></svg>
        <span class="link-text">Home</span>
      </a>
    </li>

    <li class="items">
      <a href="#" class="link">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust" class="svg-inline--fa fa-adjust fa-w-16" role="img"  viewBox="0 0 512 512"><path fill="currentColor" d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"></path></svg>
        <span class="link-text">Bio</span>
      </a>
    </li>

    <li class="items">
      <a href="#" class="link">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust" class="svg-inline--fa fa-adjust fa-w-16" role="img"  viewBox="0 0 512 512"><path fill="currentColor" d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"></path></svg>
        <span class="link-text">Gallery</span>
      </a>
    </li>

    <li class="items">
      <a href="#bottom" class="link">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust" class="svg-inline--fa fa-adjust fa-w-16" role="img"  viewBox="0 0 512 512"><path fill="currentColor" d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"></path></svg>
        <span class="link-text">Contact</span>
      </a>
    </li>
  </ul>
</nav>
</div>
</body>
</html>

Solution 3 :

.item:active{ your effect}

this should work

Problem :

I planned to make a menu button that when I click on, it will show my vertical navigation bar.

But there’s a problem: After i released my pointer, it went back to the Menu icon and I cannot touch to my links.

What i want is when i click on the menu icon, it will stay and open my links below. And when i click the menu again, it return to original.

This is what i have done so far:

html {
  scroll-behavior: smooth;
  --bg-primary: #2A2D34;
  --bg-secondary: #555;
}

body {
  background: #F8F4E3;
  font-family: 'Raleway', sans-serif;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  font: 16px;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgb(102, 102, 102);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: #8c8a89;
}

.navbar {
  margin-left: 0.3rem;
  position: fixed;
  background-color: var(--bg-primary);
  transition: width 600ms ease-out;
  box-shadow: 5px 6px 7px rgba(102, 102, 102, 0.5);
  border-radius: 10px;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  opacity: 0;
}

.items {
  width: 100%;
}

.link {
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 5rem;
  color: white;
  filter: grayscale(100%) opacity(0.7);
  border-radius: 10px;
  transition: 600ms;
}

.link:hover {
  filter: grayscale(0%) opacity(1);
  background: var(--bg-secondary);
  color: orange;
}

.link-text {
  display: none;
  margin-left: 1rem;
}

.link svg {
  width: 2rem;
  min-width: 2rem;
  margin: 0 1.5rem;
}

.menu svg {
  width: 2rem;
  min-width: 2rem;
  margin: 0 1.5rem;
}

.menu {
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 5rem;
  filter: grayscale(100%) opacity(1);
  border-radius: 10px;
  transition: 600ms;
}

.menu:hover {
  background: var(--bg-secondary);
  color: orange;
}

.menu:active+.nav {
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .navbar {
    width: 2rem;
    height: 8rem;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .link svg {
    width: 1rem;
  }
  .navbar:hover {
    width: 7rem;
  }
  .navbar:hover .link-text {
    display: inline;
  }
  .link svg {
    width: 1rem;
    min-width: 1em;
    margin: 0 0.4rem;
  }
  .link {
    height: 2rem;
  }
}

@media only screen and (min-width: 600px) {
  .navbar {
    width: 5rem;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .navbar:hover {
    width: 16rem;
  }
  .navbar:hover .link-text {
    display: inline;
  }
  .link svg {
    width: 2rem;
    min-width: 2rem;
    margin: 0 1.4rem;
  }
}
<body>
  <div class="menu-container">
    <nav class="navbar">
      <div class="menu">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars"
          class="svg-inline--fa fa-bars fa-w-14" role="img"  viewBox="0 0 448 512">
          <path fill="#a6a6a6"
            d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
          </path>
        </svg>
      </div>
      <ul class="nav">
        <li class="items">
          <a href="#top" class="link">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust"
              class="svg-inline--fa fa-adjust fa-w-16" role="img" 
              viewBox="0 0 512 512">
              <path fill="currentColor"
                d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
              </path>
            </svg>
            <span class="link-text">Home</span>
          </a>
        </li>

        <li class="items">
          <a href="#" class="link">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust"
              class="svg-inline--fa fa-adjust fa-w-16" role="img" 
              viewBox="0 0 512 512">
              <path fill="currentColor"
                d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
              </path>
            </svg>
            <span class="link-text">Bio</span>
          </a>
        </li>

        <li class="items">
          <a href="#" class="link">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust"
              class="svg-inline--fa fa-adjust fa-w-16" role="img" 
              viewBox="0 0 512 512">
              <path fill="currentColor"
                d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
              </path>
            </svg>
            <span class="link-text">Gallery</span>
          </a>
        </li>

        <li class="items">
          <a href="#bottom" class="link">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust"
              class="svg-inline--fa fa-adjust fa-w-16" role="img" 
              viewBox="0 0 512 512">
              <path fill="currentColor"
                d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
              </path>
            </svg>
            <span class="link-text">Contact</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</body>

Sorry if i can’t explain clearly because my English is not good, and long codes :(.

Thanks for helping me!

Comments

Comment posted by tomdapchai

I’m kinda new on HTML/CSS (actually i have just learn it in 1 week), so i will try this after i have learn JS. But thank you very much for helping me ^^.

Comment posted by tomdapchai

Hmm, where can i put it in?

Comment posted by Salil Rajkarnikar

anywhere inside css file(section)

Comment posted by Al Foиce ѫ

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

By