Sidebar rechts mit Hover

  • Hallo,

    ich bitte um Unterstützung.

    Wenn ich die Sidebar normal links habe und den CSS Code mit Hover zum ein-und ausblenden benutze funktioniert es einwandfrei.

    Wenn ich dann die Sidebar auf rechts umschalte bleibt sie aber links.

    Erst wenn ich in dem Code die Zeile mit Position lösche ist die Sidebar rechts und man kann sie auch mit der Maus ein- und ausblenden aber dann bleibt rechts eine graue Spalte und die Webseite ist schmaler


    Der Code lautet


    #sidebar-box {


    osition:fixed !important;


    top:110px;

    bottom:-5px;

    width: 0px !important;

    overflow-x: hidden !important;

    -moz-appearance: none !important;

    border: 1px solid transparent !important;

    border-left: 0px !important;

    margin-top: -15px !important;

    opacity: 0 !important;

    -moz-transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;

    }


    #sidebar-box:hover {

    width: 230px !important; /*-adjust sidebar width here-*/

    opacity: 1 !important;

    -moz-transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;

    }



    habt Ihr eine Idee wie nach dem ausblenden mit der Maus die Webseiten wieder normal breit werden und die graue Spalte verschwindet.

    Die Sidebar rechts finde ich praktischer als links und das mit der Maus zum ein-und ausblenden ist auch praktisch


    mfg ritchi3000

  • Das ist kein Wunder. Die Eigenschaft position hat den Wert fixed. Das heißt, dass das entsprechende Element (hier die Sidebar-Box) „festgenagelt“, sprich fixiert, wird, nämlich auf einen Punkt von 110px von oben und -5px von unten. Von links und rechts ist nicht die Rede. Du kannst position weiterhin auf fixed lassen, füge aber die Eigenschaft right hinzu, z. B.: right: 20px; Da sollte dann die Sidebar 20px vom rechten Rand sein.


    Übrigens fehlt bei dir der Buchstabe p von position.


    Schließlich: Setze bitte zukünftig Code in eine Code-Box (Symbol </> in der Editorsymbolleiste, sonst verliert man die Übersicht, wenn der Code mitten im Fließtext steht.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice und WordPress

  • Hallo milupo,

    erstmal vielen Dank für Deine Mühe und die Erklärung.

    Ich habe right:20px; eingefügt und 1x konnte ich die Leiste rechts mit der Maus einblenden.

    Seitdem ist sie nicht mehr zu sehen wie gesagt links einwandfreit aber rechts keine Einblendung mehr.


    Gruße ritchti3000

  • Also bei mir klappt es, wenn ich right auf 0px setze. Allerdings bleibt mir die Sidebar mit deinem Code leer, außer das Auswahlfeld oben. Aber du kannst deine Sidebar einfacher nach rechts verschieben. Klicke oben auf den kleinen Pfeil neben dem Auswahlfeld, du hast da wahscheinlich Leszeichen ausgewählt. Ein Fenster klappt auf und unten in diesem Fenster steht dann Sidebar nach rechts verschieben. Einfach drauf klicken und deine Sidebar ist am rechten Fensterrand. Auf die gleiche Weise kannst du die Sidebar wieder an den linken Rand verschieben, da steht dann nur Sidebar nach links verschieben.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice und WordPress

  • Mit dem obigen Code bleibt die Sidebar hier auch leer.


    Damit ist alles ok hier:


    Die Werte dann noch anpassen.


  • Hallo,

    jetzt mit der Einstellung right:0px; klappt es bei mir auf der rechten Seite einwandfrei auch mit meinem obigen Code.

    In der Sidebar sind alle Lesezeichen ich hoffe es bleibt so.


    für Eure Mühe vielen Dank

    ritchi3000


    ich habe wieder einiges gelernt

  • Teste bitte:


  • Für die "weiteren Lesezeichen" gibt es eine Möglichkeit sie "unsichtbar" zu machen:


    CSS
    1. .sidebar-placesTree treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {
    2. list-style-image: none !important;}
    3. .sidebar-placesTree treechildren::-moz-tree-cell-text(container, queryFolder_unfiled_____) {
    4. color: transparent !important;
    5. font-size: 0 !important; }
  • Teste für die Hintergrundfarbe der Sidebar:

    CSS
    1. /* Sidebar Hintergrundfarbe */
    2. #sidebar{
    3. background: #e4bca0 !important;
    4. opacity: 1 !important;
    5. }

    Die Farbe nach Bedarf anpassen.