PHP Fusion Akkordeon-Generator ohne JavaScript

Neue Methode zur Erstellung von Dropdown-Listen - Akkordeon-Generator ohne JavaScript und Bootstrap-CSS-Stil.

Hast du dich jemals gefragt, wie man eine Dropdown-Liste ohne lästige Verwendung von JavaScript-Dateien oder CSS-Stilen erstellen kann? Das ist möglich dank des neuen Akkordeon-Generators, der auf HTML5-Elementen basiert.

Ich werde ein Beispiel verwenden, um den Unterschied visuell zu vergleichen. So sieht der HTML-Code mit veralteten Tags aus: `<div>`

<div class="accordion">
    <div class="accordion-item">
        <a class="accordion-title" href="#section1">Verwendung veralteter Tags</a>
        <div id="section1" class="accordion-content">
            Test
        </div>
    </div>
</div>

Neue Methode mit HTML5:

<details>
<summary>Titel</summary>
Inhalt
</details>

Identischer Effekt, dreimal weniger HTML-Code.

Funktioniert korrekt ohne CSS-Stil:

Die neuen Tags funktionieren auch ohne zusätzliche CSS-Stile korrekt. Styling ist jedoch besonders wichtig für mobile Geräte, um den Zugang zu erleichtern und die Benutzererfahrung zu verbessern.
Obwohl derzeit nur CMS PHP Fusion v9 alle notwendigen Elemente von Texteditor bis hin zu integrierten CSS-Klassen besitzt, steht es dir frei, CSS-Stile zu übernehmen. Um sie in jede Vorlage oder CMS-System einzufügen. Im Folgenden präsentieren wir einen Beispiel-CSS-Stil, der nützlich sein könnte.
Natürlich können wir diesen Stil nicht direkt auf unsere Seite einfügen. Vor dem Einfügen des CSS-Stils müssen wir den Stil zuerst komprimieren. Für uns sind Leerzeichen und leere Zeilen Platz, aber für Browser, einschließlich der Indexierungsroboter, sind das zusätzliche Bits zur Analyse. Zu diesem Zweck können wir ein CSS-Komprimierungsprogramm verwenden, das ebenfalls auf den Seiten von CMS PHP Fusion v9 zu finden ist.

Online CSS-Stilkomprimierungsprogramm.

Beispiel-CSS-Stil.

<style>
    details {
        border: 1px solid #1a70b0;
        background-image: linear-gradient(380deg, #ddd, #fff 40%, #eee);
        border-radius: 14px;
        padding: 0.5em;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    summary {
        font-weight: bold;
        margin: -0.5em -0.5em 0;
        padding: 0.5em;
        cursor: pointer;
    }
    details[open] {
        padding: 0.5em;
    }
    details[open] summary {
        border-bottom: 1px solid #1a70b0;
        margin-bottom: 0.5em;
    }
    details[open] div {
        background-color: #fff;
        padding: 1em;
        border-radius: 10px;
    }
</style>

Neue Methode zur Erstellung von Dropdown-Listen - Akkordeon-Generator ohne JavaScript

Wie erstellt man eine Dropdown-Liste ohne lästige Verwendung von JavaScript-Dateien oder mühsamem HTML-Code? Das ist möglich dank des neuen Akkordeon-Generators, der auf den Elementen <details> und <summary> basiert. Dies ermöglicht eine schnelle und effiziente Erstellung interaktiver Abschnitte auf deiner Website, ohne komplizierte Skripte einbinden zu müssen.

Vorteile des neuen Generators

Keine Notwendigkeit für JavaScript: Traditionelle Akkordeons erfordern oft die Verwendung von JavaScript zur Handhabung von Interaktionen. Dieser neue Generator basiert auf integrierten HTML-Elementen, was die Notwendigkeit externer Skripte eliminiert.
Benutzerfreundlichkeit: Dank der einfachen HTML-Struktur ist die Verwendung dieses Generators äußerst einfach. Man muss nur die Elemente <details> und <summary> verwenden, und der gesamte Prozess der Erstellung interaktiver Abschnitte wird intuitiv.
Leichter Code: Der von diesem Mechanismus generierte Code ist unglaublich leicht und nicht einschränkend. Das bedeutet, dass deine Seite schnell und flüssig lädt, selbst auf Geräten mit geringerer Rechenleistung.
Barrierefreiheit und Semantik: Die Elemente <details> und <summary> entsprechen den Richtlinien für Web-Zugänglichkeit und sind semantisch korrekt. Dadurch wird deine Seite für Benutzer mit unterschiedlichen Bedürfnissen zugänglicher.
Anpassbarkeit: Dieser Akkordeon-Generator ermöglicht es, das Aussehen und den Stil mithilfe von CSS-Stylesheets beliebig anzupassen. Du kannst Elemente wie Farbe, Schriftgröße, Hintergrund und vieles mehr steuern, um das Aussehen nach deinen Vorlieben anzupassen.

Wie verwendet man den Dropdown-Generator?

Die Verwendung dieses Generators ist äußerst einfach. Gib einfach im ersten Feld den Titel des Tabs ein. Verwende dann den integrierten Texteditor, um den Inhalt des Tabs auszufüllen. Der integrierte Texteditor ermöglicht es, alle HTML-Tags korrekt zu platzieren. Der Texteditor verhindert mögliche Fehler im HTML-Code. Anschließend fügen wir den generierten Code an die entsprechenden Stellen auf der Seite ein, um ihr Aussehen mithilfe von CSS-Stylesheets anzupassen. Den CSS-Stil müssen wir selbst hinzufügen.

Wie man das CSS-Stylesheet selbst anpasst.

<style>
        /* Styling des <details>-Elements */
        details {
            border: 1px solid #1a70b0; /* Rahmenfarbe festlegen */
            background-image: linear-gradient(380deg, #ddd, #fff 40%, #eee); /* Gradient-Hintergrund */
            border-radius: 14px; /* Abgerundete Ecken */
            padding: 0.5em; /* Innenabstände */
            width: 70%; /* Breite des Elements */
            margin-left: auto; /* Element zentrieren */
            margin-right: auto; /* Element zentrieren */
        }

        /* Styling des <summary>-Elements */
        summary {
            font-weight: bold; /* Text fett darstellen */
            margin: -0.5em -0.5em 0; /* Ränder festlegen */
            padding: 0.5em; /* Innenabstände */
            cursor: pointer; /* Zeiger für Klickmöglichkeit */
        }

        /* Styling des geöffneten <details>-Elements */
        details[open] {
            padding: 0.5em; /* Innenabstände */
        }

        /* Styling des <summary> in geöffnetem <details> */
        details[open] summary {
            border-bottom: 1px solid #1a70b0; /* Unterer Rahmen */
            margin-bottom: 0.5em; /* Unterer Rand */
        }

        /* Styling des Inhalts von <details>, wenn es geöffnet ist */
        details[open] div {
            background-color: #fff; /* Weißer Hintergrund */
            padding: 1em; /* Innenabstände */
            border-radius: 10px; /* Abgerundete Ecken */
        }
    </style>

Wie man den generierten HTML-Code auf die Seite hinzufügt.

Nachdem du die entsprechende Anzahl an Dropdown-Tabs generiert hast, kannst du den fertigen HTML-Code in die Zwischenablage kopieren.
Außerdem kannst du eine vollständige HTML-Datei generieren, um sie auf dem Server zu platzieren. Wenn deine Seiten mit dem beliebten CMS PHP Fusion v9 erstellt wurden, kannst du eine fertige PHP-Datei als zusätzliche Seite generieren. Wenn du ein anderes CMS installiert hast, könnte es an der Zeit sein, auf ein gutes CMS wie PHP Fusion v9 umzusteigen.

Der neue Akkordeon-Generator, der auf den Elementen <details> und <summary> basiert, ist ein innovativer Ansatz zur Erstellung interaktiver Abschnitte auf einer Website. Dank der fehlenden Notwendigkeit für JavaScript, der Benutzerfreundlichkeit, des leichten Codes, der Barrierefreiheit und der Anpassbarkeit ist es die ideale Lösung für jeden, der nach einer schnellen und effektiven Möglichkeit sucht, seine Seite mit interaktiven Abschnitten zu bereichern.


/* Styling des-Elements */
summary {
    font-weight: bold; /* Text fett darstellen */
    margin: -0.5em -0.5em 0; /* Ränder festlegen */
    padding: 0.5em; /* Innenabstände */
    cursor: pointer; /* Zeiger für Klickmöglichkeit */
}

/* Styling des geöffneten-Elements */
details[open] {
    padding: 0.5em; /* Innenabstände */
}

/* Styling des in geöffnetem */
details[open] summary {
    border-bottom: 1px solid #1a70b0; /* Unterer Rahmen */
    margin-bottom: 0.5em; /* Unterer Rand */
}

/* Styling des Inhalts von, wenn es geöffnet ist */
details[open] div {
    background-color: #fff; /* Weißer Hintergrund */
    padding: 1em; /* Innenabstände */
    border-radius: 10px; /* Abgerundete Ecken */
}

Wie man den generierten HTML-Code auf die Seite hinzufügt.