Hallo, Besucher der Thread wurde 922 aufgerufen und enthält 1 Antwort

letzter Beitrag von Belarus am

[CSS] Sidebar Menü

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,


    nachfolgend eine Möglichkeit ein Sidebar Menü zu verwirklichen, welche links neben dem Content integriert wird.

    Features

    • Reines HTML / CSS
    • Beliebig erweiterbar
    • Individuell an Deinen Style anpassbar
    • Auch mit Notification-Badges gestaltbar *
    • Möglichkeit Links über das ACP anzulegen und zu entfernen *

      *
      Bisher noch nicht umgesetzt!


    Demo


    Eine Live Demo kann hier betrachtet werden: Codepen.io: CSS Side Menü ;)

    (leider nur ohne Suite und zusätzlichen Funktionen möglich)

    Quellcode

    Das Sidebar Menü kann zwar bereits so in der Form genutzt werden, bietet jedoch derzeit keine Notification-Badges und zudem nur die Möglichkeit Links von Hand (also statisch) einzutragen. Beachte bitte auch, dass die Sidebar für den Standard-Stil entwickelt wurde und bei anderen genutzten Styles ggfls. CSS-Anpassungen notwendig sind!

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.


    Benutzung


    Zum integrieren der Sidebar müssen zudem Änderungen am Template vorgenommen werden (es wird dabei nichts überschrieben). Entsprechend dessen sind Grundvoraussetzungen in HTML und CSS zwingend erforderlich! Beachte, dass unbedachte Eingriffe mit einen Fatal Error enden können!


    1. Gehe zu Anpassung Templates und klicke auf + Template hinzufügen.
    2. Wähle Dein Style unter der Templategruppe aus, vergebe einen Namen (als Beispiel: SidebarMenu), füge den HTML-Code ein und speicher das Template ab.
    3. Suche das Template header und klicke auf um das Template zu bearbeiten.
      Hinweis: Sollte das Template header noch nicht vorhanden sein, so kopiere dieses bitte vorab in Deine Style-Templategruppe.
    4. Suche im header-Template nach dem öffnenden Body-Tag (<body)
    5. Füge danach in einer neuen Zeile folgenden Code ein: {include file='SidebarMenu'}
      Achtung: Solltest Du das Template wie unter Punkt 2 genannt einen anderen Namen als SidebarMenu gegeben haben so ist dieser mit diesem zu ersetzen!
    6. Füge nun den CSS Code unter Stil Stilunabhängiges CSS und SCSS - oder - unter Stil Dein_Style Erweiterte Einstellungen Individuelles CSS und SCSS ein.
    7. Passe die Links im HTML und den Style im CSS-Code nach Deinen Bedürfnissen an.
    8. Fertig!

    Hinweis

    Das Sidebar Menü kann zwar bereits so in der Form genutzt werden, bietet derzeit jedoch noch keine Notification-Badges und zudem nur die Möglichkeit Links von Hand (also statisch) einzutragen.

    Lizenz

    Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

    Screenshots

    Eingeklappt (Normalzustand)Aufgeklappt



    Viel Spaß damit ;)


    Gruss,

    Andreas

    Update:


    Bisher ist es mir gelungen das Sidebar Menu in die Suite per Template zu integrieren (per Box jedoch sicher auch möglich). Der zu sehende Stil ist jedoch nur obligatorisch und steht erst einmal nur auf der zweiten Spur, da dass integrieren von Funktionen wie u.a. die Notification-Badges und die Übernahme der Links welche im ACP festgelegt werden Vorrang haben. Die Sidebar liegt nun links direkt neben den eigentlichen Content und dockt unterhalb des Standard-Woltlab Menüs an. Bei Mouse-over (hover) wird der Content überdeckt und die Sidebar in voller Größe angezeigt. Aber seht selbst ...


    Sidebar eingeklappt (Originalzustand)Sidebar ausgeklappt


    To be continued ;)


    Gruss,
    Andreas


    Edit(h): Veränderungen wurden im ersten Beitrag übernommen.

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!