Overlays für Websites
Beispiel: Telefon-Icon auf den Seiten...
Auto Mertens: www.auto-mertens.de
Hoffmeier: http://cwpitch2.de.212-227-198-197.server5.creativhost.de
So funktionierts:
Im Seitenlayout (bzw. in allen Seitenlayouts) unter "JavaScript" folgendes eintragen:
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
Weiter:
- Bildmotiv erstellen
- Artikel anlegen und html-Elemente einfügen (das fett geschriebene ist variabel)
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<p><strong>24/7 Hotline:</strong><br><a href="tel:+492388330">+49 (0) 23 88 / 33-0</a></p>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()"><img src="files/bilder-layout/Hoffmeier-Industrieanlagen_24-Stunden_Hotline.png" alt="Rufen Sie uns an..." width="150" height="80"></span>
- html-Modul anlegen und folgendes eingeben:
Der Eintrag "....." existiert leider nicht.
...... = Artikel ID eintragen
Modul in Seitenlayout einfügen (body-top) - In verschiedenen Stylesheets / Media queries die Formatierungen einfügen (desktop, mobil-767px, mobil-500px, mobil-415px)
Dies bitte bei Auto Mertens oder Hoffmeier rauskopieren. Farben und Abstände eventuell noch anpassen
Fertig
Umgesetzt mit: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
Geht aber eventuell auch einfacher mit: https://www.w3schools.com/howto/howto_css_overlay.asp