Firefox Sidebar per Maushover öffnen

Standardmäßig ist im Firefox die Sidebar nach Aktivierung immer geöffnet. Nachteil, bei kleineren Monitoren fehlt dann der Platz in der Ansicht von Webseiten, und alles verschiebt sich nach rechts.

In meinem Beispiel soll nun die Sidebar auf der linken Seite vom Firefox darum nur durch einen Maushover erscheinen, bzw. automatisch wieder ausgeblendet werden wenn man die Maus wieder entfernt.

Hier möchte ich mal beschreiben wie man diese hover Funktion per CSS erstellt.

Aus diesem Grund muss man jetzt diese optischen Änderungen am Firefox mit einer userChrome.css Datei erstellen.

Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.

Sidebar per Maushover öffnen

Als erstes gehen wir in den Profilordner vom Firefox, öffnen den dort selber angelegten Ordner chrome, und klicken dann auf die Datei: userChrome.css und öffnen sie.

Dann fügen wir diesen CSS Code in die Datei ein:

/* Sidebar per Maushover einblenden */

@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"),

url("chrome://browser/content/browser.xul"),

url("chrome://browser/content/history/history-panel.xul") {

#menu_bookmarksSidebar {
display:-moz-box !important;
}

#sidebar-box {
display:-moz-box !important;
position:fixed!important;
top:125px; /* Abstand nach oben bis zur untersten Leiste vom Browser */
bottom:0px; /* Abstand nach unten bis zur Taskleiste */
width: 0px !important;
overflow-x: hidden !important;
-moz-appearance: none !important;
border: 1px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
-moz-transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}

#sidebar-box:hover {
width: 230px !important; /* Breite der Sidebar */
opacity: 1 !important;
-moz-transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}

#sidebar-header {
width:100%;
border: 0 !important;
}

#sidebar {
display:-moz-box !important;
width:100%!important;
height:92%!important; /* Höhe der Sidebar */
}
}

So sieht das dann mit dem Code aus:

Sollte schon ein anderer Code in der userChrome.css vorhanden sein, dann schreibt man den neuen Code einfach unten drunter.

Hier mal ein Beispiel wie das bei einem schon vorhandenen Code aussieht.

Nachdem wir den Code eingetragen haben, schließen und speichern wir die Datei userChrome.css.

Jetzt muss man einmalig die Sidebar aktivieren durch setzen eines Hakens unter:

Ansicht..Sidebar..

und hier dann als Beispiel mal auf: Lesezeichen

Sollte der Firefox noch geöffnet sein bitte schließen und neu starten, denn erst nach einem Neustart wird der CSS Code aktiviert.

Wenn man jetzt mit der Maus an den linken Rand vom Desktop geht, öffnet sich die Sidebar und schiebt sich über die gerade geöffnete Webseite.

Entfernt man die Maus wieder vom Rand, schließt sich die Sidebar automatisch, ohne dass sich die Position der Webseite verändert.

userChrome.css aufräumen