<!DOCTYPE HTML>  

<html lang="ko">

<head>
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 
<title>menus</title> 

<link rel="stylesheet" href="ht.css" media="screen">
<link rel="stylesheet" href="css.css" media="screen"> 
</head> 

<body>

<div id="buttonWrap">

<div id="buttonInner">

<div data-destination="menu1" class="button"> <span></span> <b></b>

<div class="menu123">menu1</div> 
</div> 

<div data-destination="menu2" class="button"> <span></span> <b></b>
<div class="menu123">menu2</div> 
</div> 

 <div data-destination="menu3" class="button"><span></span> <b></b>
<div class="menu123">menu3</div> 
</div> 
  </div> 


<div class="menu" id="menu1"> 
menu1<br>
menu1<br>
menu1<br>
menu1<br>
menu1<br>
</div> 

<div class="menu hide" id="menu2"> 
menu2<br>
menu2<br>
menu2<br>
menu2<br>
menu2<br>
</div> 

<div class="menu hide" id="menu3"> 
menu3<br>
menu3<br>
menu3<br>
menu3<br>
menu3<br>
</div> 
 
<script src="ht.js"></script>   
</div> 

</body> 
</html>


.button {
pointer-events: initial; /*clickable*/ 
cursor: pointer;
}  


.button:hover,
.button:focus,
.button.active {
  outline: 0;
  background: red;
}  

.button b {
  display: none;
}  

.button span {
  font-weight: bold;
}  

.button.active span {
  display: none;
}  

.button.active b {
  display: inline-block;
} 


.menu {
background:white;
border:1px solid black;
border-radius:5px;
padding:5px;
text-align:center;
margin:auto;
transition:transform 0.3s ease;
text-align:left;
box-shadow:0 0 10px 10px rgba(0, 0, 0, 0.5);
}


html {
  box-sizing: border-box;
}

a{text-decoration:none;}

a:hover,
a:focus,
a.active {
outline: 0;
background: red;
color:yellow;
border-radius:5px;
} 



html,
body {
  margin: 0;
  padding: 5px;
}  


#buttonWrap {
  position:absolute;
  max-width: 50rem;
  margin: 5px auto;
  padding: 10px;
   display: flex;
  flex-direction:column;
  align-items:center;
  flex-wrap: wrap;
  left: 0;
  right: 0;
  pointer-events: none;
}  

#buttonInner {
  display: flex;
  justify-content: center;
}  

#menu0{
text-align:left;
background:yellow;
border-radius: 5px;
padding: 5px;
margin: 5px auto;
border: 2px solid #000;
pointer-events: initial; /*clickable*/  
max-width:70%} 


.hide {
  transform: scale(0.0001);
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
}  

.show {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
  top: 100%;
  pointer-events: initial;
}  


.menu123{display:inline-block; background:white; color:black; 
border-style:solid; border-width:1px; border-radius:5px; margin:3px; padding:5px}
(function (d) {

const content = d.querySelectorAll(".menu");
const advert = d.querySelector("#menu1");
var menu0 = true; 

 
"use strict";  

const buttons = d.querySelectorAll(".button");
var toggleClass = "show";  

  buttons.forEach((item) => {

    item.addEventListener("click", (event) => {

      if (item.classList.contains("active")) {
toggleClass = "hide"; 
      } else {
toggleClass = "show"; 
      } 
hideAll(); 
toggleDiv(item, item.dataset.destination); 
    }); 
  }); 

  function hideAll() {

    content.forEach((item) => {
item.classList.add("hide"); 
item.classList.remove("show"); 
    }); 

    buttons.forEach((item) => {
item.classList.remove("active"); 
    }); 

if ( menu0 === true ) {

  advert.classList.add("hide");
  menu0 = false 
} 
  } 

  function toggleDiv(targetButton, targetDiv) {

if (toggleClass === "show") {
targetButton.classList.add("active"); 
} 
d.querySelector("#" + targetDiv).classList.add(toggleClass); 
} 
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.