|
Sidebar
|
| Leon Schlemmer | Geschrieben am 08.10.2026 - 16:07 |
Jung Mitglied
Beiträge: 25
Registriert am:
02.01.2023 - 21:35
|
Hey ihr Lieben!
Ich möchte gerne eine Sidebar in meinem Chat haben, weiß aber nicht genau wie ich das machen soll bzw womit ich anfangen muss.
Die Bar soll auf der Linken Seite sein und beim anklicken automatisch ausfahren. Ich habe im Forum keinen Beitrag dafür gefunden, deshalb habe ich einen neues Thema diesbezüglich angefangen. Vielleicht hilft es anderen auch, die es gerne haben möchte. Weiß jemand in welche Dateien ich rumfuchteln muss??
Danke im voraus.
LG Leon
|
| |
|
|
| Leon Schlemmer | Geschrieben am 08.10.2026 - 17:12 |
Jung Mitglied
Beiträge: 25
Registriert am:
02.01.2023 - 21:35
|
Hallöchen nochmal!
Hab es geschafft die Bar einzufügen....Juchuuuuuuu.... 
LG Leon
|
| |
|
|
| Tommy | Geschrieben am 09.10.2026 - 05:19 |
Mitglied
Beiträge: 120
Registriert am:
02.01.2022 - 11:27
|
Mich würde interessieren wie das ganze aussieht.
|
| |
|
|
| Harlekin | Geschrieben am 09.10.2026 - 07:06 |
Seiten Administrator
Beiträge: 197
Registriert am:
11.04.2021 - 09:12
|
Ich habe meine linke Sidebar in die chat.tpl.html und style.css eingebaut.
Codepfuscher bei der Arbeit.
Das Grauen hat halt viele Gesichter!
|
| |
|
|
| Leon Schlemmer | Geschrieben am 09.10.2026 - 09:44 |
Jung Mitglied
Beiträge: 25
Registriert am:
02.01.2023 - 21:35
|
Ihr könnt es gerne in meinem Chat anschauen.
https://funhitmix...o.com/chat
Ich habe es ebenfalls in der chat.tpl.html eingefügt, allerdings ohne irgendwas in der style.css einzufügen.
Da ich eine BrwoserAPP für das Smartphone für unser Webradio nutze, für Musik und Info´s Unterwegs. Habe ich auch dort die Sidebar eingebunden und es funktioniert. Hier der Weg zu BrowserApp
https://funhitmix...
Das einfügen der Sidebar ist ganz simpel, wenn man weiß an welche Stellen das ganze kommt.
Der HTML Code sieht insgesamt wie folgt aus.
 Code  <!-- Dein Button vor dem Home-Button --><img id="open-iframe-menu" class="img_button" src="dein_button.jpg" width="40" height="35" frameborder="0" style="border:0px" align="middle" alt="Menü öffnen"title="Menü öffnen">
<div class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></div>
<!-- partial -->
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js'></script>
</div>
<!-- Overlay -->
<div id="iframe-overlay">
<div id="iframe-menu">
<iframe src="deine_anzeige.php" width="100%" height="100%" frameborder="0" allowfullscreen loading="lazy">
</iframe>
</div>
</div>
<style>
/* Overlay-Hintergrund */
#iframe-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 90%;
display: none;
z-index: 1000;
}
/* Seitenmenü */
#iframe-menu {
position: absolute;
top: 5%;
left: 0;
width: 260px;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);;
border: 2px solid #6600CC;
border-radius: 10px;
overflow: hidden;
box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3);
}
</style>
<script>
const openIframeBtn = document.getElementById('open-iframe-menu');
const iframeOverlay = document.getElementById('iframe-overlay');
const iframeMenu = document.getElementById('iframe-menu');
openIframeBtn.addEventListener('click', () => {
iframeOverlay.style.display = 'block';
});
// Klick auf Overlay = Menü schließen (außerhalb vom Menü)
iframeOverlay.addEventListener('click', (e) => {
if (!iframeMenu.contains(e.target)) {
iframeOverlay.style.display = 'none';
}
});
</script>
Diesen Teil habe ich nach </head> gesetzt
Code <!-- Dein Button vor dem Home-Button --><img id="open-iframe-menu" class="img_button" src="dein_button.jpg" width="40" height="35" frameborder="0" style="border:0px" align="middle" alt="Menü öffnen"title="Menü öffnen">
Den anderen Teil zwischen </body> und </html>
Code <div class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></div>
<!-- partial -->
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js'></script>
</div>
<!-- Overlay -->
<div id="iframe-overlay">
<div id="iframe-menu">
<iframe src="deine_anzeige.php" width="100%" height="100%" frameborder="0" allowfullscreen loading="lazy">
</iframe>
</div>
</div>
<style>
/* Overlay-Hintergrund */
#iframe-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 90%;
display: none;
z-index: 1000;
}
/* Seitenmenü */
#iframe-menu {
position: absolute;
top: 5%;
left: 0;
width: 260px;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);;
border: 2px solid #6600CC;
border-radius: 10px;
overflow: hidden;
box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3);
}
</style>
<script>
const openIframeBtn = document.getElementById('open-iframe-menu');
const iframeOverlay = document.getElementById('iframe-overlay');
const iframeMenu = document.getElementById('iframe-menu');
openIframeBtn.addEventListener('click', () => {
iframeOverlay.style.display = 'block';
});
// Klick auf Overlay = Menü schließen (außerhalb vom Menü)
iframeOverlay.addEventListener('click', (e) => {
if (!iframeMenu.contains(e.target)) {
iframeOverlay.style.display = 'none';
}
});
</script>
Das selbe habe ich in meiner BrowserApp gemacht und es funktioniert bei beiden super. Auch ohne etwas in der style.css zu ändern. Da der Code für die Sidebar schon selbst seinen Style/Layout mitbringt. Die Anleitung Oben ist zutreffend für die BrowserApp. Für den ET-Chat, in der chat.tpl.html muss es anders eingebunden werden.
In der chat.tpl.html muss dieser Abschnitt hier nach eingefügt werden.
<div id="rahmen_um_alles">
<div id="kopf">
Code <!-- Dein Button vor dem Home-Button --><img id="open-iframe-menu" class="img_button" src="dein_button.jpg" width="40" height="35" frameborder="0" style="border:0px" align="middle" alt="Menü öffnen"title="Menü öffnen">
Der andere Teil vor </body>
Code <div class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></div>
<!-- partial -->
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js'></script>
</div>
<!-- Overlay -->
<div id="iframe-overlay">
<div id="iframe-menu">
<iframe src="deine_anzeige.php" width="100%" height="100%" frameborder="0" allowfullscreen loading="lazy">
</iframe>
</div>
</div>
<style>
/* Overlay-Hintergrund */
#iframe-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 90%;
display: none;
z-index: 1000;
}
/* Seitenmenü */
#iframe-menu {
position: absolute;
top: 5%;
left: 0;
width: 260px;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);;
border: 2px solid #6600CC;
border-radius: 10px;
overflow: hidden;
box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3);
}
</style>
<script>
const openIframeBtn = document.getElementById('open-iframe-menu');
const iframeOverlay = document.getElementById('iframe-overlay');
const iframeMenu = document.getElementById('iframe-menu');
openIframeBtn.addEventListener('click', () => {
iframeOverlay.style.display = 'block';
});
// Klick auf Overlay = Menü schließen (außerhalb vom Menü)
iframeOverlay.addEventListener('click', (e) => {
if (!iframeMenu.contains(e.target)) {
iframeOverlay.style.display = 'none';
}
});
</script>
Wenn jemand die Sidebar in einem anderen Projekt einfügen möchte, dann kann es ggf. Abweichungen geben. Daher bitte vorab eine Sicherungskopie von euren Dateien machen an der ihr rum doktern wollt.
Viel Spaß damit.... :wink:
Bearbeitet von Leon Schlemmer am 09.10.2026 - 09:54
|
| |
|
Community
Web
Harlekins Welt
Eingangshalle
Besprechung
Alle Inhalte unterliegen dem Urheberrecht und dürfen nicht ohne Erlaubnis kopiert werden!