Generator akordeonu bez JavaScriptu: Skrypty.Szybkie i efektywne tworzenie interaktywnych stron www online,za darmo

Nowy sposób tworzenia rozwijanej listy - Kreator akordeonu bez JavaScriptu,jak i stylu CSS Bootstrap. Czy kiedykolwiek zastanawiałeś się, jak stworzyć rozwijaną listę bez uciążliwego stosowania plików JavaScript lub stylu CSSL? To możliwe dzięki nowemu kreatorowi akordeonu opartemu na elementach HTML5

. Pozwala to na szybkie i efektywne tworzenie interaktywnych sekcji na Twojej stronie internetowej, bez konieczności angażowania skomplikowanych skryptów.

Posłużę się przykładem, w tym celu, aby wzrokowo porównać różnicę. Tak wygląda kod HTML, z użyciem przestarzałych znaczników `<div>`

<div class="accordion">
    <div class="accordion-item">
        <a class="accordion-title" href="#section1">Użycie przestarzałych znaczników </a>
        <div id="section1" class="accordion-content">
            test
        </div>
    </div>
</div>

Nowy sposób z HTML5:

<details>
<summary>tytuł</summary>
Zawartość
</details>

Efekt identyczny,zmniejszenie ilości kodu HTML,trzykrotnie mniejsza.

Poprawne działanie bez stylu CSS:

Nowe znaczniki działają poprawnie nawet bez dodatkowych stylów CSS. Jednak stylowanie jest szczególnie ważne dla urządzeń mobilnych, aby ułatwić dostęp i poprawić doświadczenie użytkownika.
Mimo iż obecnie jedynie CMS PHP Fusion v9, posiądę wszystkie niezbędne elementy, od edytora tekstu po wbudowane klasy CSS. Nic nie stoi na przeszkodzie, aby zapożyczyć styl CSS. Aby wstawić do dowolnego szablonu lub systemu CMS. Poniżej przedstawiamy przykładowy styl CSS, który może być użyteczny.
Oczywiście nie możemy w takiej postaci wstawić bezpośrednio na naszą stronę. Przed wstawieniem stylu CSS, musimy wcześniej skompresować styl. Dla nas spacje, białe linie to puste miejsce, ale dla przeglądarek, w tym robotów indeksujących to kolejne bity do analizy. W tym celu możemy skorzystać z programu do kompresji stylów CSS, który również znajduje się na stronach CMS PHP fusion v9.

Program do kompresji stylów CSS online.

Przykładowy styl CSS.

 <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>

Nowy sposób tworzenia rozwijanej listy - Kreator akordeonu bez JavaScriptu

Jak stworzyć rozwijaną listę bez uciążliwego stosowania plików JavaScript lub uciążliwego kodu HTML? To możliwe dzięki nowemu kreatorowi akordeonu opartemu na elementach <details> i <summary>. Pozwala to na szybkie i efektywne tworzenie interaktywnych sekcji na Twojej stronie internetowej, bez konieczności angażowania skomplikowanych skryptów.

Zalety nowego kreatora

Brak konieczności JavaScriptu: Tradycyjne akordeony często wymagają użycia JavaScriptu do obsługi interakcji. Ten nowy generator opiera się na wbudowanych elementach HTML, co eliminuje potrzebę stosowania zewnętrznych skryptów.
Prostota użytkowania: Dzięki prostocie struktury HTML, korzystanie z tego generatora jest niezwykle łatwe. Wystarczy użyć elementów <details> i <summary>, a cały proces tworzenia interaktywnych sekcji staje się intuicyjny.
Lekki kod: Kod generowany przez ten mechanizm jest niesamowicie lekki i niezawężający. Oznacza to, że Twoja strona będzie ładować się szybko i płynnie, nawet na urządzeniach o mniejszej mocy obliczeniowej.
Dostępność i semantyka: Elementy <details> i <summary> są zgodne z zasadami dostępności internetowej i semantycznie poprawne. Dzięki temu Twoja strona będzie bardziej dostępna dla użytkowników z różnymi potrzebami.
Konfigurowalność: Ten kreator akordeonu pozwala na dowolne dostosowanie wyglądu i stylu za pomocą arkuszy stylów CSS. Możesz kontrolować takie elementy jak kolor, wielkość czcionki, tło i wiele więcej, aby dopasować wygląd do swoich preferencji.

Jak używać kreator rozwijanej listy ?

Korzystanie z tego kreatora jest niezwykle proste. Wystarczy w pierwszym polu wpisać tytuł zakładki.Następnie używając wbudowanego edytora tekstu, wypełnić zawartość zakładki.Wbudowany edytor tekstu pozwala poprawnie ,umieścić wszystkie znaczniki HTML.Edytor tekstu nie pozwoli na ewentualne błędy, kodu HTML.Następnie w odpowiednie miejsca na stronie, wstawiamy wygenerowany kod. Aby dostosować ich wygląd za pomocą arkuszy stylów CSS. Styl CSS, musimy dodać samodzielnie.

Jak samodzielnie dostosować arkusz stylu CSS, do własnych potrzeb.

<style>
        /* Stylowanie elementu <details> */
        details {
            border: 1px solid #1a70b0; /* Ustawienie koloru obramowania */
            background-image: linear-gradient(380deg, #ddd, #fff 40%, #eee); /* Tło gradientowe */
            border-radius: 14px; /* Zaokrąglone narożniki */
            padding: 0.5em; /* Wewnętrzne odstępy */
            width: 70%; /* Szerokość elementu */
            margin-left: auto; /* Wyśrodkowanie elementu */
            margin-right: auto; /* Wyśrodkowanie elementu */
        }

        /* Stylowanie elementu <summary> */
        summary {
            font-weight: bold; /* Pogrubienie tekstu */
            margin: -0.5em -0.5em 0; /* Ustawienie marginesów */
            padding: 0.5em; /* Wewnętrzne odstępy */
            cursor: pointer; /* Kursor wskazujący na możliwość klikania */
        }

        /* Stylowanie otwartego elementu <details> */
        details[open] {
            padding: 0.5em; /* Wewnętrzne odstępy */
        }

        /* Stylowanie <summary> w otwartym <details> */
        details[open] summary {
            border-bottom: 1px solid #1a70b0; /* Dolne obramowanie */
            margin-bottom: 0.5em; /* Dolny margines */
        }

        /* Stylowanie zawartości <details> gdy jest otwarte */
        details[open] div {
            background-color: #fff; /* Białe tło */
            padding: 1em; /* Wewnętrzne odstępy */
            border-radius: 10px; /* Zaokrąglone narożniki */
        }
    </style>

Jak dodać na stronę wygenerowany kod HTML.

Po wygenerowaniu odpowiedniej ilości, rozwijanych zakładek ,Tabs. Możesz pobrać do schowka gotowy kod HTML.
Ponadto. Wygenerować kompletny plik HTML, aby umieścić go na serwerze. Jeśli twoje strony są zbudowane przy użyci popularnego CMS PHP Fusion v9, możesz wygenerować gotowy plik PHP jako dodatkową stronę. Jeśli zainstalowałeś inny CMS być może czas zmienić na dobry CMS, jakim jest PHP Fusion v9.

Nowy generator akordeonu oparty na elementach <details> i <summary> to innowacyjne podejście do tworzenia interaktywnych sekcji na stronie internetowej. Dzięki braku konieczności stosowania JavaScriptu, prostocie użytkowania, lekkości kodu, dostępności i konfigurowalności, jest to idealne rozwiązanie dla każdego, kto poszukuje szybkiego i efektywnego sposobu na wzbogacenie swojej strony o interaktywne sekcje.

Generator akordeonu bez JavaScriptu