<!--
Forum question answer only
https://www.sitepoint.com/community/t/move-the-function-of-white-button-to-yellow-button/403676
-->
<header data-hide-all class="top">
<div class="ilb">
<button data-destination="alarm" class="button alarm-button RED active"></button>
<a href="">
<div class="ogo" style="background:BLUE;top:2.2rem;
left:0.5rem;border-radius:50%;padding:0.5rem;width:19px;height:19px">
KR
</div>
</a>
</div>
<div class="mid">
<div class="modal show" id="alarm">
<p class="title">
<a href="output.php">
<img src="http://load.dot.kr/dmg/output.png" alt="output" style="background:white" class="bdr5 pdg3 wide20">
</a>
<a href="" style="color:white">Dynamic<br>Alarm Title</a>
<a href="innput.php">
<img src="http://load.dot.kr/dmg/innput.png" alt="innput" style="background:white" class="bdr5 pdg3 wide20">
</a>
</p>
<div class="alarm">
alarm<br>
alarm<br>
alarm<br>
</div>
</div>
<div class="modal hide" id="menu">
<p class="title">
<a href="output.php">
<img src="http://load.dot.kr/dmg/output.png" alt="output" class="WHITE bdr5 pdg3 wide20">
</a>
<a href="" class="white alnL mgnLR5">Menu Title<br> has <br>two lines</a>
<a href="innput.php">
<img src="http://load.dot.kr/dmg/innput.png" alt="innput" style="background:white" class="bdr5 pdg3 wide20">
</a>
</p>
<div class="menu">
menu<br>
menu
</div>
</div>
</div>
<div class="ilb">
<a href="my/">
<div class="ogo" style="background:BLACK;top:0.5rem;right:0.5rem;border-radius:50%;padding:0.5rem;width:22px;height:22px">
MY
</div>
</a>
<button data-destination="menu" class="button menu-button WHITE"></button>
</div>
</header>
<div>
<div>This is root index page.</div>
<p><a href="">1st link</a> <a href="">2nd link</a> <a href="">3rd link</a> <a href="">4th link</a> <a href="">5th link</a> <a href="">6th link</a> </p>
<p>This is main contents.</p>
<p>This is main contents.</p>
<p>This is main contents.</p>
<p>This is main contents.</p>
<p>This is main contents.</p>
<p>This is main contents.</p>
<p>This is main contents.</p>
<p>This is main contents. This is main contents. This is main contents.</p>
<a href="">link</a><br>
This is<br>main contents.<br>main contents.<br>
This is main contents.<br>
This is main contents.<br>
This is main contents.<br>
This is main contents.<br>
This is main contents.<br>
This is main contents.<br>
This is main contents.<br>
This is main contents.<br>
</div>
<footer data-hide-all id="footer">
left footer right footer
</footer>
<script src="script/ht.js"></script>
<div data-hide-all id="flexZ1">
<div class="flex5">
<a href="output.php" style="background:RED"></a>
<a href="output.php" style="background:black">
<img src="http://load.dot.kr/dmg/output.png" alt="output" style="background:white" class="bdr5 pdg3 wide20">
</a>
<span class="green">
<button class="button-footer" style="background:yellow" id="contents-only">X</button>
</span>
<a href="innput.php" style="background:black">
<img src="http://load.dot.kr/dmg/innput.png" alt="innput" style="background:white" class="bdr5 pdg3 wide20"></a>
<a href="innput.php" style="background:BLUE"></a>
</div>
</div>
<div id="bottom" class="high30"></div>
p.title {
display: flex;
align-items: center;
margin: 0.5rem 0;
font-size: 1rem;
background: #000;
color: #fff;
font-weight: normal;
text-align: center;
padding: 5px;
border-radius: 5px;
}
.top {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
right: 0;
display: flex;
padding: 0 8rem;
}
.top {
padding: 0 0.5rem;
}
.top > * {
pointer-events: initial;
}
.top .mid {
pointer-events: none;
}
.hide,
[data-hide-all].hide {
display: none;
}
.mid {
flex: 1 0 0;
display: flex;
align-items: center;
flex-direction: column;
}
.mid > * {
pointer-events: initial;
}
.alarm-button,
.menu-button {
position: fixed;
font-size: 2rem;
}
.alarm-button {
top: 1rem;
left: 1rem;
}
.menu-button {
top: 2.8rem;
right: 1rem;
}
.button,
.button-footer {
pointer-events: initial;
cursor: pointer;
-wbekit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
margin: 0;
border-radius: 50px;
padding: 0.2px;
border: 1px solid #000;
background: white;
transition: 0.3s ease;
}
.button:hover,
.button:focus,
.button-footer:hover,
.button-footer:focus {
outline: 0;
border: 1px solid red;
}
.button.active {
outline: 5px solid black;
}
.alarm,
.menu {
background: white;
border: 1px solid black;
border-radius: 5px;
margin: 0 auto 0.75rem;
transition: transform 0.3s ease;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
z-index: 2;
padding: 0.5rem;
min-width: 8rem;
}
@media screen and (max-width: 480px) {
p.title {
margin-top: 3rem;
}
}
footer {
background: gray;
border-style: solid;
text-align: center;
}
.ogo {
display: flex;
align-items: center;
color: white;
position: fixed;
}
#flexZ1 {
/*toward top, mid, btm*/
text-align: center;
position: fixed;
border-radius: 5px;
bottom: 0px;
left: 1px;
right: 1px;
z-index: 1;
}
.flex5 {
display: flex;
}
.flex5 > * {
flex: 1 0 5%;
height: 30px;
}
.flex5 > a:first-child,
.flex5 > a:last-child {
flex: 1 0 42%;
}
.alnL {
text-align: left;
}
.alnC {
text-align: center;
}
.alnR {
text-align: right;
}
.bdr3 {
border-radius: 3px;
}
.bdr5 {
border-radius: 5px;
}
.bdr30 {
border-radius: 30px;
}
.bdw1 {
border-width: 1px;
}
.bdw2 {
border-width: 2px;
}
.bdw3 {
border-width: 3px;
}
.bdw5 {
border-width: 5px;
}
.pdg1 {
padding: 1px;
}
.pdg2 {
padding: 2px;
}
.pdg3 {
padding: 3px;
}
.pdg5 {
padding: 5px;
}
.pdg10 {
padding: 10px;
}
.ilb {
display: inline-block;
}
.mgnLR5 {
margin-left: 5px;
margin-right: 5px;
}
.solid {
border-style: solid;
}
.high30 {
height: 30px;
}
.wide1 {
width: 1px;
}
.wide2 {
width: 2px;
}
.wide3 {
width: 3px;
}
.wide5 {
width: 5px;
}
.wide10 {
width: 10px;
}
.wide20 {
width: 20px;
}
.wide30 {
width: 30px;
}
.wide40 {
width: 40px;
}
.wide50 {
width: 50px;
}
.wide100 {
width: 100px;
}
.wide200 {
width: 200px;
}
.wide300 {
width: 300px;
}
.wide500 {
width: 500px;
}
.wide800 {
width: 800px;
}
.wiP100 {
width: 100%;
}
.op02 {
opacity: 0.2;
}
(function (d) {
("use strict");
const content = d.querySelectorAll(".modal");
const buttons = d.querySelectorAll(".button");
const footer = d.querySelector(".button-footer");
const hideAllControls = d.querySelectorAll("[data-hide-all]");
buttons.forEach((item) => {
item.addEventListener("click", (event) => {
if (item.classList.contains("active")) {
// this is the current one so hide this one and hide its destination
item.classList.remove("active");
d.querySelector("#" + item.dataset.destination).classList.add("hide");
item.blur(); // remove focus
// no need to do anything else
} else {
// we don't know which button is clicked so we hide all and only show this and its destination.
hideAll();
item.classList.add("active");
d.querySelector("#" + item.dataset.destination).classList.remove(
"hide"
);
}
});
});
function hideAll() {
content.forEach((item) => {
item.classList.add("hide");
item.classList.remove("show");
});
buttons.forEach((item) => {
item.classList.remove("active");
});
}
// hide everything when footer button is clicked.
footer.addEventListener("click", (event) => {
hideAllControls.forEach((item) => {
item.classList.add("hide");
});
});
})(document);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.