Does anyone know how to create a menu without exiting the page? I want to create a settings menu.

<style>
.material-symbols-outlined {
   align: right;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
         }
      </style>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

     <a OnClick="open()" <span >
engineering
</span></a>
<div >
<p>Settings</p>
</div>

(I know that i should not use onclick but i don't know how to use anything else)

<script>
function show(){
div.menu.show=(true)
}
</script>

I wanted it to show div but div is always shown

CodePudding user response：

Welcome! you want to use style="display:none" on your div and in the show() function, you want to try this :

document.getElementsByClassName('menu')[0].style.display = "block";

CodePudding user response：

The issue why your <div> is always showing is that you never used any CSS to hide it, and the reason why your onClick handler isn't working is because you are calling a function that hasn't been defined.

You can add an event listener to the link and toggle the .style.display attribute of the menu.

document.getElementById('openMenu').addEventListener('click', () => {
  const menu = document.getElementById('menu');
  if (menu.style.display === 'block') menu.style.display = 'none';
  else menu.style.display = 'block';
});

#menu {
  display: none;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

<a id="openMenu">
  <span >engineering</span>
</a>
<div id="menu">
  <p>Settings</p>
</div>