Page Overlay

Beispiel für ein Page Overlay in Mobirise

☰ Klick
Page Overlay in Mobirise


Klicke oben auf den Hamburger Button für eine Demo von diesem Overlay.
Ein Seiten Overlay dunkelt die gesamt Seite ab, um andere Elemente hervorzuheben.

Gefunden auf w3schools.com


Hier zur Info meine CSS für das "Page Overlay":

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  overflow-x: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 24px;
  color: #ffffff;
  display: block;
  transition: 0.5s;
}
.overlay a:hover, .overlay a:focus {
  color: #ffa200;
}
.overlay .closebtn {
  position: absolute;
  top: 60px;
  right: 55px;
  font-size: 60px;
}
.mylink {
  color: #ff0000;
}
.mylink:hover {
  color: #ffa200;
}
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}


Hier zur Info meine HTML für das "Page Overlay", hier eingefügt in einem einfachen Textblock:

<!-- Beginn Page Overlay Klick Button -->
<span class="mylink" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Klick<br></span>
<!-- Ende Page Overlay Klick Button -->
<b> Page Overlay in Mobirise</b></p><p><b><br></b>Klicke oben auf den Hamburger Button für eine Demo von diesem Overlay.<br>Ein Seiten Overlay dunkelt die gesamt Seite ab, um andere Elemente hervorzuheben.</p>
<!-- Beginn Inhalt vom Page Overlay -->
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <div class="overlay-content">
    <h1 style="color: #ffba40; font-weight: bold;">Page Overlay</h1>
    <br><br>
    <a href="Akkordeon.html">Akkordeon Bootstrap</a>
    <a href="Hotspot.html">Hotspot Responsive</a>
    <a href="Inline-Border.html">Inline Border</a>
    <a href="index.php">Schlagwörter Box</a>
  </div>
</div>
<!-- Ende Inhalt vom Page Overlay -->


Hier zur Info mein JavaScript, hier eingefügt in den Seiteneinstellungen im Bereich "End of <body> code"

  <!-- Script für das Page Overlay -->
  <script>
    function openNav() {
      document.getElementById("myNav").style.width = "100%";
    }
    function closeNav() {
      document.getElementById("myNav").style.width = "0%";
    }
  </script>