<!--

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);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.