Wie sieht ein Aufklappmenü im HTML-Format aus? Aktualisiert 12.07.19
Will man das Aufklappmenü in einer HTML-Homepage unterbringen, lassen sich mehrere Menüs auf einfachste Weise realisieren. Man braucht nur die 3 Zahlen im Menü ändern (Zeile 11, 15 + 20) und muss darauf achten, dass jedes weitere Menü, wenn es getrennt geöffnet und geschlossen werden soll, eine andere Zahl bekommt. Sonst kann z.B. Menü 2 Menü 1 zuklappen oder entsprechend anders!
3-D Button für das Aufklappmenü Aktualisiert (08.09.21)
Mit Hilfe eines neuen Scriptes von WolverineX, kann ein 3-D Button für das Aufklappmenü eingesetzt werden. Der neue 3-D Button hat auch den Vorteil, das er keine "ID" braucht. Das heißt, das man den gleichen BB-Code für unendlich viele Aufklappmenü's verwenden kann.
Die neuen Forum-Codes sehen dann so aus (bitte anklicken):
Ohne Abschluß:
[button] Text [/button]
Button für kurze Texte [cool2]
Mit Abschluß:
[button] Text [/button+]
Button für lange Texte mit Abschluß-Button zum Schließen [nerd2]
• Das Script kommt in die Fußzeile oder besser als Plugin in den "bottom_header"! • Das Template wird somit nicht verändert!
• HTML-Code in Forum-Code umsetzen unter "Neue Smiley anlegen > Foren-Code" und "Ersetze ... Mit" • Die neuen Spoiler erscheinen als kleine Grafik in der Iconbar • Grafik z.B:
• Sollen die neuen Spoiler in einem Auswahlmenü zur Verfügung stehen, wie folgt vorgehen • Erstellte Spoiler einfach auf der Seite "Neue Icons hinzufügen" in eine vorhandene "Gruppe" ziehen!
• Oder - Neue Gruppe anlegen unter "Neue Smileys anlegen" und "Gruppe" • Erstellte Spoiler einfach auf der Seite "Neue Icons hinzufügen" in die neue "Gruppe" ziehen! • Fertig
• DropDown-Menü unter "Neue Smiley anlegen > HTML" anlegen • Namen vergeben z.B. Menü oder Spoiler • Unter "Neuen Smileys anlegen > HTML" den folgenden Code eintragen.
Mouseover für das Aufklapp-Menü Aktualisiert 08.09.21
Mit Hilfe dieser Variante des Aufklapp-Menüs ist es möglich einen verborgenen Text, ein Bild oder eine Info mit einem "Mouseover" zum Vorschein zu bringen. Wenn die Maus ein Bild, ein Smiley oder ein Wort überfährt, wird der verborgene Beitrag angezeigt.
Dieser "Spoiler" eignet sich besonders gut für kurze Beiträge, in denen nicht gescrollt werden braucht. Das Menü basiert auf dem Skript "3-D Button für das Aufklappmenü" und ist so umfunktioniert, dass es nicht mit einem Mausklick, sondern mit einem "Mouseover" geöffnet wird.
Der neue Forum-Code (BB-Code) sieht so aus:
Bitte mit der Maus über den Button fahren!
[button03] TEXT [/button03]
• Das Script kommt in die Fußzeile oder besser als Plugin in den "bottom_header"! • Das Template wird somit nicht verändert!
• DropDown-Menü unter "Neue Smiley anlegen > HTML" anlegen • Namen vergeben z.B. Menü oder Spoiler • Unter "Neuen Smileys anlegen > HTML" den folgenden Code eintragen. • Oder Zeile 4 in das DropDown-Menü aus Beitrag #5 kopieren
Spoiler mit Speicherfunktion Aktualisiert 12.07.19
In bestimmten Fällen kann ein Spoiler mit Speicherfunktion gute Dienste leisten. Wird die Webseite neu gestartet, bleibt der letzte Zustand des Spoilers erhalten. Hier im Forum wird eine Speicherfunktion in der Kategorien-Ausblendung angewandt, allerdings wird ein anderes, aufwendigeres Skript genutzt.
Das komplette HTML-Skript:
• Werden mehrere Spoiler benötigt, müssen die Zeilen 46-49 vervielfacht und die Zahlen der Variablen "container" + "piccontainer" steigend angepasst werden.
function readKlappCookie() { if (document.cookie) { var ca = document.cookie.split(';'); for (var i=0;i < ca.length;i++) { var t = ca[i]; while (t.charAt(0)==' ') t = t.substring(1,t.length); var c = t.split('=');
<img style="cursor:pointer;border:0;width:20px;height:16px;" onclick="javascript:klapp('container1');" src="https://png-1.findicons.com/files//icons/1156/fugue/16/minus.png" id="piccontainer1"> <div id="container1"> <p>Hier folgt der Inhalt der aus- und eingeblendet werden soll - container1</p> </div>
<br> <br>
<img style="cursor:pointer;border:0;width:20px;height:16px;" onclick="javascript:klapp('container2');" src="https://png-1.findicons.com/files//icons/1156/fugue/16/minus.png" id="piccontainer2"> <div id="container2"> <p>Hier folgt der Inhalt der aus- und eingeblendet werden soll - container2</p> </div>
Manchmal ist es nötig, Spoiler einzusetzen, die untereinander in Abhängigkeit stehen! Ab besten ist das hier im Online Radio zu sehen! Das folgende, minimierte Script (Zeile 6) ist mit "jQuery" aufgebaut. Die Div-Container werden über ID's gesteuert. Sie können an einer beliebiger Stelle eingebaut werden! Es bleibt maximal immer nur ein Spoiler geöffnet! Hier wird ein offener Spoiler geschlossen, sobald ein anderer geöffnet wird! Zusätzlich veranlasst ein weiterer Klick auf den selben Spoiler, ein Schließen!
<!--Nur wenn JQuery nicht vorhanden ist, die kommentierenden Zeichen am Anfang und am Ende (Zeile 2) löschen--> <!--<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
TAB-Spoiler in Forum-Beiträgen: Spoiler öffnen sich unabhängig voneinander -Teil 1 Aktualisiert 21.09.21
Die Xobor-Spoiler lassen sich nicht wie in einem TAB-Menü nebeneinander aufstellen, sie können nur untereinander stehen! Werden die Spoiler nebeneinander aufgestellt, muss man schauen, wo der Inhalt des geöffneten Spoilers bleibt. Auch muss man sich die Frage stellen, ob nur ein Spoiler geöffnet sein darf und ob er sich selber wieder schließen kann!
Was kann der folgende Eintrag?
Im folgenden Skript besteht die Möglichkeit, die XOBOR-Spoiler nebeneinander aufzustellen.
Die Spoiler öffnen und schließen sich unabhängig voneinander!
Der Inhalt des Spoilers wird direkt unter dem geöffneten Spoiler angezeigt!
Der Xobor-Spoiler bekommt einen Schließen-Button und ein neues Design aus Beitrag #5
Für die Templates (v1-4) wird die CSS in Eigener CSS Code kopiert!
Der Xobor-Spoiler bekommt ein neues Aussehen, mit Rändern, abgerundete Ecken, etwas mehr Farbe und die Code- und Pre-Tabellen werden in ihrer Breite maximiert!
Veränderbares TAB-Menü für Foren-Beiträgen - Teil 2 Aktualisiert 01.10.23
Möchte man ein richtiges TAB-Menü in den Beiträgen nutzen, geht das mit dem folgenden Beitrag! Es spart Platz und sorgt für eine gute Übersicht bei großen und vielfältigen Beiträgen!
Was kann das Skript:
Die TAB's lösen sich gegenseitig aus, das heist, es bleibt immer nur ein TAB geöffnet! Der Inhalt des geöffneten Box steht der ganzen Seite voll zur Verfügung!
Die Tab's können auch zweireihig geschrieben werden!
Das Tab-Menü hat noch zusätzlich einen Schließen-Button für lange Inhalte und scrollt immer in Lesehöhe zurück!
Einfache Kaskadierung. Es wird keine Nummerierung der TAB's und Inhaltsboxen benötigt!
Die Forencodes können zur besseren Übersicht mit beliebigen Zeilenumbrüchen gesetzt werden, ohne das sie das Layout verändern!
Es können von einander unabhängig, mehrere TAB-Menü's auf einer Seite eingerichtet werden.
Verschachtelungen der TAB sind auch möglich!
Das TAB-Menü ist so aufgebaut, dass es keine ID's zur Kennung der Inhaltsboxen benötigt! Der erste TAB öffnet die erste Box, der zweite TAB öffnet die zweite Box, ...
TAB-Menü im Business (v4)
Installation für alle Templates
Das TAB-Menü in Aktion:
Der HTML-Code zur Übersicht
Neue Foren-Codes
CSS + JavaScript
Das komplette HTML-Script zur Übersicht!
Um sich einen Eindruck zu verschaffen, wie das TAB-Menü aufgebaut ist, hier das HTML-Script!
Das komplette Skript mit CSS und JavaScript kann zum Testen für die Templates (v1-4) in die Kopfzeile, fürs V6 in Eigene Kopfzeile kopiert werden! Soll das Skript außerhalb vom Forum getestet werden, wird "jQuery" benötigt. Hierzu Zeile 107 freigeben!
Beim Menü-Start kann auch ein beliebiger TAB geöffnet angezeigt werden, wie hier im Beispiel! Hierfür wird zusätzlich die Class "current" (Zeile 66) benötigt und "display: none" auf "display: block" (Zeile 71) geändert!
<div class="tabcontent" style="display:block;"> <div class="verlauf">Impressum & Kontakt</div> <h4>Verantwortlicher Betreiber der Webseite</h4> <p>Gründer von "Hilfe-Tricks-Tipps" und Inhaber der Domaint .......</p> <br> <div class="exit">Schließen</div> </div>
<div class="tabcontent" style="display:none;"> <div class="verlauf">Datenschutz & Nutzungshinweise></div> <h4>Allgemeine Hinweise</h4> <p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert .......</p> <br> <div class="exit">Schließen</div> </div>
<div class="tabcontent" style="display:none;"> <div class="verlauf">Mitglieder des Forums</div> <h4>Mitgliederliste</h4> <p>Eine Liste aller Mitglieder des Forums .......</p> <br> <div class="exit">Schließen</div> </div>
<div class="tabcontent" style="display:none;"> <div class="verlauf">FAQ (Hilfe)</div> <h4>Funktion und Suche</h4> <p>Hier finden Sie Hilfe zu den Xobor-Foren .......</p> <br> <div class="exit">Schließen</div> </div>
</div>
<!-- Nur wenn JQuery nicht vorhanden ist, die kommentierenden Zeichen am Anfang und am Ende löschen --> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> --> <script> window.addEventListener('load', function(){ /* Nur Business: Umbrueche zwischen den TAB's loeschen - Nur fuer TAB's in Forum-Beitraegen */ $('.tabmenu_live > br,.tabcontent + br').replaceWith(' ');
<script> window.addEventListener('load', function(){ /* Nur Business: Umbrueche zwischen den TAB's loeschen - Nur fuer TAB's in Forum-Beitraegen */ $('.tabmenu_live > br,.tabcontent + br').replaceWith(' ');
Bevor das jetzige JavaScript entstanden ist, gab es mehrere Anläufe. Alle folgenden Skripte haben so ihre Vorteile aber auch Nachteile!
Zum Testen für die Templates (v1-4) wird das komplette Skript in die Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert! Für das neue Xobor (v6) kommt beides in Eigenes Javascript!
Vorteile:
Kleines jQuery-Script, kleines TAB-Menü, kommt ohne ID-Kennung aus!
Inhaltboxen werden durch Überschriften zugeordnet, die die gleiche TAB-Bezeichnung enthalten!
Farbe, Schrift und Form lassen sich leicht anpassen!
Eignet sich für die Erstellung neuer Foren-Codes!
Nachteile:
Fehlöffnung bei gleicher Namensgebung. TAB-Namen dürfen nicht doppelt verwendet werden oder in mehreren Überschriften eingebunden werden!
<div class="tabcontent" style="display:block;"> <div class="verlauf">Impressum & Kontakt</div> <div>Verantwortlicher Betreiber der Webseite</div> <div>Gründer von "Hilfe-Tricks-Tipps" und Inhaber der Domaint .......</div> <br> </div>
<div class="tabcontent" style="display:none;"> <div class="verlauf"><font color="#550000">Datenschutz & Nutzungshinweise></font></div> <h4>Allgemeine Hinweise</h4> <p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert .......</p> <br> </div>
<div class="tabcontent" style="display:none;"> <div class="verlauf"><font color="#005555">Mitglieder des Forums</font></div> <h4>Mitgliederliste</h4> <p>Eine Liste aller Mitglieder des Forums .......</p> <br> </div>
<div class="tabcontent" style="display:none;"> <div class="verlauf"><font color="#000088">FAQ (Hilfe)</font></div> <h4>Funktion und Suche</h4> <p>Hier finden Sie Hilfe zu den Xobor-Foren .......</p> <br> </div>
</div>
<!-- Nur wenn JQuery nicht vorhanden ist, die kommentierenden Zeichen am Anfang und am Ende löschen --> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<div id="tab1" class="tabcontent" style="display:block"> <div class="verlauf">Impressum</div> <h4>Verantwortlicher Betreiber der Webseite</h4> <p>Gründer von "Hilfe-Tricks-Tipps" und Inhaber der Domaint .......</p> <br> </div>
<div id="tab2" class="tabcontent" style="display:none"> <div class="verlauf">Datenschutz</div> <h4>Allgemeine Hinweise</h4> <p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert .......</p> <br> </div>
<div id="tab3" class="tabcontent" style="display:none"> <div class="verlauf">Mitglieder</div> <h4>Mitgliederliste</h4> <p>Eine Liste aller Mitglieder des Forums .......</p> <br> </div>
<div id="tab4" class="tabcontent" style="display:none"> <div class="verlauf">FAQ</div> <h4>Funktion und Suche</h4> <p>Hier finden Sie Hilfe zu den Xobor-Foren .......</p> <br> </div>
</div>
<br><br><br>
<!--Nur wenn JQuery nicht vorhanden ist, die kommentierenden Zeichen am Anfang und am Ende löschen--> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<div id="tab1" class="tabcontent"> <div class="verlauf">Impressum</div> <h4>Verantwortlicher Betreiber der Webseite</h4> <p>Gründer von "Hilfe-Tricks-Tipps" und Inhaber der Domaint .......</p> <br> </div>
<div id="tab2" class="tabcontent"> <div class="verlauf">Datenschutz</div> <h4>Allgemeine Hinweise</h4> <p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert .......</p> <br> </div>
<div id="tab3" class="tabcontent"> <div class="verlauf">Mitglieder</div> <h4>Mitgliederliste</h4> <p>Eine Liste aller Mitglieder des Forums .......</p> <br> </div>
<div id="tab4" class="tabcontent"> <div class="verlauf">Hilfe</div> <h4>Funktion und Suche</h4> <p>Hier finden Sie Hilfe zu den Xobor-Foren .......</p> <br> </div>
Ein TAB-Menü nur mit CSS (Cascading Style Sheets) aufbaut ist an Schnelligkeit kaum zu überbieten. Wird die Seiten neu geladen oder gewechselt, wird das TAB-Menü sofort angezeigt. Einfach Klasse! TAB-Menüs mit JavaScript-Bibliotheken wie jQuery oder jQueryUI lassen da auf sich warten!
CSS TAB-Menüs haben allerdings auch so ihre Nachteile! Sie sind ungeeignet für Text- und Formatwechsel von außen, also ungeeignet für neue Foren-Codes. Auch weiterführende Texte und Bilder müssen auf das CSS Tab-Menü abgestimmt werden! Braucht man allerdings ein kleines TAB-Menü, das mit einer festen Position und festen Texten mit nahzu gleicher Länge auskommt, ist man hier bestens bedient!
Gut für den direkten und festen Einbau in Portal-Boxen, V6-Boxen oder in Webseiten!
×
CSS TAB-Menü / Business-Template (v4)
CSS TAB-Menü / Business-Template (v4)
Installation für alle Templates
Was kann das CSS TAB-Menü:
Die Tab's lösen sich gegenseitig aus, es bleibt nur 1 TAB geöffnet!
Wahlweise können beim Start alle TAB's geschlossen oder eins geöffnet sein!
Der Boxinhalt wird animiert eingeblendet!
Das TAB-Menü hat einen Schließen-Button!
Überschriften mit Farbverlauf!
Mouseover-Effekte!
Zum Testen kann die gesamte CSS und die DIV-Boxen für die Template (v1-4) in die Kopf- oder Fußzeile und fürs neue XOBOR (v6) am besten in Eigene Kopfzeile kopiert werden!
In Zeile 55-65 kann der Farbverlauf der Überschriften angepasst werden!
Zeile 52, 66-69 ist für die animierte Einblendung zuständig!
Zeile 11 ist für die Hintergrundfarbe der TAB's zuständig
In Zeile 32 wird die Hover-Farbe der Tab's eingestellt!
In Zeile 36+49 ist der Text-Hintergrund und die Hintergrundfarbe des geöffneten TAB zu finden!
Soll beim Start der erste TAB geöffnet sein, wird in Zeile 88 nur "checked" eingetragen!
Wichtig! In Zeile 71-76 befinden sich die Einstellungen für Höhe Abstand und Breite des TAB-Menüs!
<div class="tab"> <input class="radioClass" type="radio" name="tabs" id="tab3"> <label for="tab3">Mitglieder</label> <div class="content"> <div class="verlauf">Mitglieder des Forums</div><br> <h4>Mitgliederliste</h4> <p>Eine Liste aller Mitglieder des Forums mit Online-Status .......</p>