<!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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.