CSS3 SimpleSlideOutSidebar für WBB 4

  • Ich habe mich drangesetzt und eine Slide Sidebar auf CSS3-Basis gecoded, in dieser kann man beliebig selber Linkeinträge tätigen. Das ganze basiert auf selbst erstellte & bearbeitete Templates (leider kein Plugin da ich nicht die Fähigkeiten dazu mitbringe), optisch kann man mit etwas CSS-Kenntnissen diese sehr gut an diverse Stile anpassen.


    Eingeklappter Modus:


    Mouse over-Modus:


    Bitte beachtet die hier angefügte Anleitung als PDF-Datei, dann sollte die Bearbeitung ganz leicht sein. Die Sidebar kann entweder linksseitig oder rechtsseitig angezeigt werden, je nach verwendeter CSS-Definition.

  • Das wollte ich auch nicht so zu Ausdruck bringen. Ich hätte gerne darauf verzichtet das kannst du mir glauben. Nur leider waren damals meine Kenntnisse noch so weit
    das ich ein eigenen entwickeln konnte. :( CSS HTML sind schon gut vorangegangen. Mit PHP und Skripten tue ich noch schwer das zu verstehen :S

  • Ohhh wenn ich diese Linkbar sehe, kommt mir gleich die passende Idee meine Schatz-Navigation damit einzubauen, anstatt sie als Sidebarbox zu verwenden (Gino weiss was ich meine). :D


    Eine Frage hierzu: Kann ich auch Rahmen drumherum machen um die einzelnen Links? Gerade wenn ich mobil unterwegs bin, ist es sonst schwierig mit großen Fingern auf die Links zu tapsen und dabei den richtigen zu erwischen^^

  • Das wollte ich gerade schreiben um euch das nicht länger vorzuenthalten
    (Musst dazu aber erwähnen das ich den Template-Code etwas anders geschrieben habe als hier angegeben!!!!)
    Um das noch mal genauer anzugeben brauchst eine extra Klasse für die Links.
    z.B.: <h3><span class="block">Testblock1</span></h3>


    die mit diesem Code ersetzt werden:


    <h1>Sidebar Linkarea</h1>


    diese werden dann in der CSS so mit angegeben:


    CSS
    1. .block {
    2. background: transparent gradient(center top , #F1F1F1, #CECECE) repeat scroll 0% 0%;
    3. box-shadow: 0px 0px 1px rgba(255, 255, 255, 0.2) inset, 0px 1px 3px #2C2C2C;
    4. border-top: 1px solid #FFF;
    5. border-radius: 2px;
    6. padding: 0px 8px 1px;
    7. }

    Hintergrund : background (nach belieben den Farbcode umändern)
    Boxshatten: box-shadow (nach belieben den Farbcode umändern)
    Schwarzer Strich oben: border-top (nach belieben den Farbcode umändern)
    Rundungen: border-radius (nach belieben umändern)
    Button optisch vergrößern: padding (nach belieben umändern)


    Der Link Button kann also beliebig gestaltet werden. Ob mit einfachen Farben oder Gradienten.
    Ihr müsst einfach eure Farben von euren Stil wählen.


    Wenn ihr Unterstützung braucht bin ich gerne bereit euch zu helfen. ;)

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von Hitman ()

  • So jetzt habe ich das noch mal so angepasst wie es in der Anleitung von Gino steht, damit man es auch nachvollziehen kann, was geändert wurde ;) 
    Leider funktionierten meine mobilen CSS-Codes nicht und musste ein bisschen nachhelfen.
    Schliesslich gibt es ja keine Mouse bei Smartphones und Tablets :P


    Hier die Bilder und danach der CSS-Code und das Template


    Ansicht auf PC´s / Desktop



    Ansicht Mobil ab 800px abwärts
    Hierbei wurde der Button als Bsp. in die UserPanel-Ebene geschoben (den Ort kann man flexibel halten!!)
    Aber garantiert das auch noch zwei Blöcke mobil dargestellt werden können ;)



    Und hier die aufgeklappte Variante im Mobilbreich
    Testblock3 passt hier nicht mehr rein und wird ausgeblendet.






    Sollten doch irgendwo Fehler sein oder was fehlt kann er das gerne kundtun! :D


    edit: eben noch gesehen, auf Tablets lässt sich die Sidebar nicht wieder einklappen.
    Den Code reiche ich noch nach ;)


    Viel Spass!!


    LG


    Hitman

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von Hitman ()

  • Kann ich irgendwie auch bewirken, dass z.B. Blöcke eingeklappt werden können?


    Beispiel: Ich möchte eine Kategorie "Wissen" anlegen. Darunter gibt es die Kategorien "Allgemeines" und "Weltkarte". Unter Weltkarte wiederum soll sich "Auridon" öffnen.


    Grundsätzlich sollten aber die Subkategorien immer zugeklappt sein und sich nur auf Klick öffnen, da sonst die Sidebar bei mir riiiiiesig lang werden würde.


    Wie genau müsste das aussehen?