Beiträge von Horstmann

Horstmann

Zitat von Endor

Hallo Mira_Belle .
Ich kann das Verhalten bestätigen.
Verhält sich hier genau so wie von Dir beschrieben.
Mfg.
Endor

Hmm, ich habe diverse Varianten bei mir getestet, auch das von Mira, keine Probleme.

Wenn du mal das vorhergegangene Script von #492 probierst, gibt es das gleiche Problem, dass erst beim zweiten Laden alle Anzeigen sichtbar sind?
Obwohl dir das bestimmt schnell aufgefallen wäre.

Eins könntet ihr noch testen, wenn das Problem auftritt: das Popup mit nur 3 Einträgen offenlassen für ein paar Sekunden, schauen ob der Rest lädt.

Horstmann

Zitat von saobento

Das Script aus #70 funktioniert hier auch, sorgt bei mir aber dafür, dass gespeicherte Suchanfragen nicht mehr aufrufbar sind. Die Suchfelder reagieren nicht mehr auf die Eingabe.

Danke für die Meldung!

ich habe in #70 das Script grob dafür angepasst, Zeilen 73/74, #PopupSearchAutoComplete ist neu.

Horstmann

Zitat von Mira_Belle

Stimmt schon, aber ich selber bin an der Stelle "CSS" (wie in #68) und mit dem Skript #43 ausgestiegen.
Damit sind meine Wünsche umgesetzt.

Mich interessiert halt auch ob was klappt oder nicht nach dem Aufwand, und wie es optimiert werden kann.
Daher ist jedes Feedback von Usern immer ein willkommener Beitrag - ich werd den Code selber eh nicht benutzen - aber natürlich nicht obligatorisch..

Horstmann

Zitat von Mira_Belle

Ist es nur bei mir so, dass beim Öffnen erst einmal nur bei den oberen drei "Einträgen" die "Werte" angezeigt werden
und erst beim zweiten Mal öffnen, dann bei allen Ordner?

Kann ich nicht nachvollziehen; kannste mal das Script mit deinen benutzten Einstellungen einstellen, am besten auch noch die Icons?

Horstmann

Zitat von Mira_Belle
Menüleistenbuttons? Was genau ist damit gemeint?
Datei ... Bearbeiten ... Ansicht ... Chronik ... Lesezeichen ... Extras ... Hilfe ?
Hatten wir schon.
Code
#file-menu
#edit-menu
#view-menu
#history-menu
#bookmarksMenu
#profiles-menu
#tools-menu
#helpMenu

Die Idee war eher das alles zu reduzieren, ohne jeden Button/Schaltfläche einzeln zu listen; Andreas hat inzwischen ja teils schon vorgegriffen.

Grober Testcode, inkl. Grobversuch mit Haupt Popups für Hamburger, Downloadbutton, Extensionbutton, Overflowkram; Menuleiste nicht testbar am Mac, aller anderer älterer Code muss raus:

JavaScript

//Popup Position Finder mit Popup Animationen CSS / universal test 2
//popup_position.uc.js

(function () {
if (!window.gBrowser) return;
    document.addEventListener("popupshowing", function (e) {
      let popup = e.target;
      if (popup.localName !== "menupopup") return;

      let anchor = popup.anchorNode;
      if (!anchor || typeof anchor.screenX === "undefined") return;

      let flippedH = popup.screenX < anchor.screenX;

      popup.classList.remove('flipper');
         if (flippedH) {
          popup.classList.add('flipper');
          }
    });

const sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`

menu > menupopup {
    --trans_x: -100%;
}
menu > menupopup.flipper {
    --trans_x: 100%;
}

/* --- Hauptmenus --- */

:is(toolbarbutton, menubar > menu) > menupopup {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}
:is(toolbarbutton, menubar > menu)[open] > menupopup {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}

/* --- Untermenus --- */

:is(toolbarbutton, menubar > menu) menu > menupopup {
    opacity: 0 !important;
    transform: translateX(var(--trans_x)) !important;
}
:is(toolbarbutton, menubar > menu) menu[open] > menupopup {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}

/* --- Panels test --- */

panel {
    outline: 2px solid red;
    outline-offset: -2px !important;
}

panel[mainviewshowing] {
    outline: 2px solid cyan;
    outline-offset: -2px !important;
}

panel {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}

panel[panelopen],
#PopupSearchAutoComplete {
    /*will-change: transform, opacity !important;
    transition-property: transform, opacity !important;
    --animation-easing-function: ease-in-out !important;*/
    --panelui-subview-transition-duration: 2s !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}

/*
panel:not([mainviewshowing]) {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}
panel[panelopen]:not([mainviewshowing])  {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
*/


	`), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

Alles anzeigen

Zitat von BrokenHeart
Hab jetzt nicht mehr den ganzen Thread mitverfolgt, aber hier mal als Anregung für die Untermenüs im Hamburger-Popup. Dürfte in der Umsetzung einfacher sein, da ja schon von Haus aus eine (wesentlich kürze) Animation vorgesehen ist:
CSS
panel#appMenu-popup[type="arrow"]
{
	--animation-easing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0) !important;
	--panelui-subview-transition-duration: 0.66s !important;
}

Guter Fund, hilft weiter an der Stelle, und in anderen ähnlichen Untermenus auch.
Von der Art gibt es Unmengen im Fx Code, da hatte ich mich noch nicht rangetraut.

Horstmann

Zitat von Endor

Obiges Script funktioniert hier in der Menüleiste überhaupt nicht.
Lesezeichenleiste geht es prima, und auch bei einzelnen Schaltflächen von Scripten.
.....
Alles funktioniert. Es fehlen mir nur die Hamburger Schaltfläche- bzw. das Popup
usw.

Ahhh, ok, dann vergessen wir das schnell wieder.

Die Menüleiste Button IDs in Windows könnte jemand rauszufinden, evtl. #menubar-items etc. oder sowas (unmöglich am Mac zu testen) und zu toolbarbutton mit einfügen, aber man kann auch einfach die Liste weiterbenutzen.

Auf die Schnelle würde mir noch sowas einfallen für den Rest, ist aber sehr grob, deckt die Untermenus nicht ab für Hamburger etc., und müsste gründlich getestet werden:

CSS

panel {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}

panel[panelopen] {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}

Horstmann

Zitat von Endor

Frage, kann man das Popup der Hamburger Schaltfläche, des #nav-bar-overflow-button,
der Unifiedextensionsschaltfläche, der Alletabsschaltfläche in der Tableise usw.
auch damit eventuell ansprechen? Weil dann wäre es komplett.
Mfg.
Endor

Danke für den Upload!

Und ja, man kann das erweitern, und die Frage nach einer universellen Anpassung habe ich befürchtet.

Ich weiss über die diversen Popups gerade soviel, und habe soviel Zeit damit verbracht die Dinger einzeln umzubauen in der Vergangenheit, dass ich für diesen Zweck lieber die Finger davon lasse.
Ausserdem hab ich das Ganze quasi blind geschrieben - nicht nur auf Mac, sondern auch auf 115esr.

Zum einen müsste man die jeweiligen "Hauptmenu" Popups raussuchen und die Animation anpassen, das deckt eine gewisse Spannbreite an Popupdesigns ab, ist aber machbar und kein Drama mit reinem CSS.
Die Submenus mit der horizontalen Animation sind erstmal auch nicht so schwierig - aber für die automatische rechts/links Anpassung müsste man auch den Javascript Teil anpassen, und das ganze dann wieder sauber verschachteln im CSS.
Was die potentiellen Auswirkungen auf andere Popups betrifft, Kontext etc., ist nochmal ein anderes Thema.

Oder man sucht die existierenden FX Animation mal durch, evtl. kann man die ja überschreiben wo vorhanden - und zugänglich.

Wenn jemand weiter daran basteln möchte, evtl. kann sowas als mehr generell gefasster Anfang dienen, könnte zumindest für die Basis-Button Popups klappen, und dafür evtl. sogar den ganzen Code von oben ersetzen:

JavaScript

//Popup Position Finder mit Popup Animationen CSS / universal test 1
//popup_position.uc.js

(function () {
if (!window.gBrowser) return;
    document.addEventListener("popupshowing", function (e) {
      let popup = e.target;
      if (popup.localName !== "menupopup") return;

      let anchor = popup.anchorNode;
      if (!anchor || typeof anchor.screenX === "undefined") return;

      let flippedH = popup.screenX < anchor.screenX;

      popup.classList.remove('flipper');
         if (flippedH) {
          popup.classList.add('flipper');
          }
    });

const sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`


menu > menupopup {
    --trans_x: -100%;
}
menu > menupopup.flipper {
    --trans_x: 100%;
}

/* --- Hauptmenus --- */
toolbarbutton > menupopup {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}
toolbarbutton[open] > menupopup {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}

/* --- Untermenus ---  */
toolbarbutton menu > menupopup {
    opacity: 0 !important;
    transform: translateX(var(--trans_x)) !important;
    /*margin-top: -7px !important;*/
    /*margin-inline: 16px !important;*/
}
toolbarbutton menu[open] > menupopup {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
	`), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

Alles anzeigen

Horstmann

Zitat von Endor

Script funktioniert

Prima, danke für die Rückmeldung!

Ich habe den Header mal genauer geschrieben, falls du das hochladen möchtest; nur den Link zum Posting #51 schafft mein Mac gerade nicht sauber, wohl zu viele Leer/Sonderzeichen, falls du den noch hinzufügen möchtest.

Horstmann

Zitat von Mira_Belle

Die ganze Arbeit

Danke!
Aber ich seh das ja als Mannschaftssport, und deine Beiträge und die wichtige Korrektur von Mitleser für mein kleines JS haben das Ganze um die Kurve gebracht.

Hoffe das Ganze funktioniert auch noch nach weiterem Benutzen oder Testen, Popups sind etwas temperamentvoll und sehr komplex geregelt in Fx, ist halt schon eine ernsthafte App.
Den CSS Code könnte man sicher mit Nesting und parent IDs deutlich straffen, aber lieber einfach anfangen.

Zitat von mkpcxxl

Coole Sache, funktioniert richtig gut und ich bin Stolz darauf eine faule Socke zu sein...

Danke für's Testen!

Horstmann

Sodele, mal was zum Testen für geneigte User, basierend auf dem Script von Mitleser , für die faulen Socken die alles in Einem brauchen.

Die optionalen Submenu Abstände (margins) sind vorhanden aber noch auskommentiert, benutzen nach Wunsch; die Idee ist dass die hier im Thread erwähnten Anpassungen in einem Aufguss funktionieren sollten.
Bitte alles andere CSS oder Scripts von zuvor deaktivieren, sonst gibt's Überschneidungen.

JavaScript

//Popup Position Finder mit Popup Animationen CSS / RC 1 
//popup_position.uc.js

(function () {
if (!window.gBrowser) return;
    document.addEventListener("popupshowing", function (e) {
      let popup = e.target;
      if (popup.localName !== "menupopup") return;

      let anchor = popup.anchorNode;
      if (!anchor || typeof anchor.screenX === "undefined") return;

      let flippedH = popup.screenX < anchor.screenX;

      popup.classList.remove('flipper');
         if (flippedH) {
          popup.classList.add('flipper');
          }
    });

const sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`

/*** --- Menu Popup Animation Anpassung Menuleiste, Lesezeichenmenu, Lesezeichenleiste --- ***/

menu > menupopup {
    --trans_x: -100%;
}
menu > menupopup.flipper {
    --trans_x: 100%;
}

/* --- Hauptmenus --- */
:is(
#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu,
#AppMenuButton,
#bookmarks-menu-button) > menupopup {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}
:is(#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu,
#AppMenuButton,
#bookmarks-menu-button)[open] > menupopup {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out !important;
}

/* --- Untermenus --- */
:is(#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu,
#AppMenuButton,
#bookmarks-menu-button) menu > menupopup {
    opacity: 0 !important;
    transform: translateX(var(--trans_x)) !important;
    /*margin-top: -7px !important;*/
    /*margin-inline: 16px !important;*/
}
:is(#file-menu,
#edit-menu,
#view-menu,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu,
#AppMenuButton,
#bookmarks-menu-button) menu[open] > menupopup {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out !important;
}

/* --- Lesezeichenleiste --- */
#PlacesToolbar .bookmark-item > menupopup {
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}
#PlacesToolbar .bookmark-item[open] > menupopup {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}

/* --- Lesezeichenleiste Untermenus ---  */
#PlacesToolbar .bookmark-item menu > menupopup {
    opacity: 0 !important;
    transform: translateX(var(--trans_x)) !important;
    /*margin-top: -7px !important;*/
    /*margin-inline: 16px !important;*/
}
#PlacesToolbar .bookmark-item menu[open] > menupopup {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out !important;
}
	`), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

Alles anzeigen

Horstmann

Zitat von Mitleser

Zitat von Horstmann

Beispiel Lesezeichenpopups:

Läuft! Das will-change habe ich auskommentiert; ohne läuft es auf meinem Recher einfach besser. Nette Spielerei, mal sehn' wie lange es hält.

Danke für's Testen, und das Einpflegen in ein Script.

will-change scheint tatsächlich unnötig zu sein, irgendwann in meinem Testverlauf hat das mal einen Unterschied gemacht.

Horstmann

Zitat von Mitleser

Zitat von Horstmann

Die Positionierung funktioniert ab dem zweiten Öffnen eines Popups.

Moin, das könnte an popupshown statt popupshowing liegen.

Unglaublich, das scheint zu klappen, Danke!!!
Ich habe mir den Wolf gesucht, und es ist so einfach, wie findest du nur immer diese Lösungen?

Also, das angepasste Script, für jeden der/die es testen möchte:

JavaScript

//popup position finder
//popup_position.uc.js

(function () {
if (!window.gBrowser) return;
    document.addEventListener("popupshowing", function (e) {
      let popup = e.target;
      if (popup.localName !== "menupopup") return;

      let anchor = popup.anchorNode;
      if (!anchor || typeof anchor.screenX === "undefined") return;

      let flippedH = popup.screenX < anchor.screenX;

      popup.classList.remove('flipper');
         if (flippedH) {
          popup.classList.add('flipper');
          }
    });
})();

Alles anzeigen

Im CSS wird Folgendes hinzugefügt, wie in #37 schon benutzt:

CSS

 menu > menupopup {
    --trans_x: -100%;
}

menu > menupopup.flipper {
    --trans_x: 100%;
}

X:
Die Einträge für transform: translateX(0) !important; bleiben genau so;
Die Einträge für transform: translateX(-100%) !important; werden geändert zu transform: translateX(var(--trans_x)) !important; .

Y:
transform: translateY(... wird nicht verändert.

Beispiel Lesezeichenpopups:

CSS

 menu > menupopup {
    --trans_x: -100%;
}

menu > menupopup.flipper {
    --trans_x: 100%;
} 

#PlacesToolbar .bookmark-item > menupopup {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

#PlacesToolbar .bookmark-item[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateY(0) !important;  
    transition: transform 0.9s ease, opacity 1.9s ease !important;  
} 

#PlacesToolbar .bookmark-item menu > menupopup { 
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
/*     transform: translateX(-100%) !important;   */
    transform: translateX(var(--trans_x)) !important;  
}

#PlacesToolbar .bookmark-item menu[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateX(0) !important;  
    transition: transform 0.9s ease, opacity 1.9s ease !important;  
}

Alles anzeigen

Horstmann

Zitat von Mira_Belle

mkpcxxl oder Endor
Bezüglich der Lesezeichenleiste hoffe ich ja, dass jemand einen Thread aufmacht.

Hat etwas gedauert, denke wir können das noch hier reinquetschen?

Damit werden alle Lesezeichen Menus von oben nach unten animiert; der zweite, auskommentierte Teil wäre dann eine Änderung nur für Submenus, und links nach rechts öffnen, Zeit-Werte anpassen nach Belieben.
translateX(100%) wäre dann wieder rechts nach links.

Könnte klappen:

CSS

#PlacesToolbar .bookmark-item > menupopup {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

#PlacesToolbar .bookmark-item[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateY(0) !important;  
    transition: transform 0.9s ease, opacity 1.9s ease !important;  
} 
/* 
#PlacesToolbar .bookmark-item menu > menupopup { 
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateX(-100%) !important;  
}

#PlacesToolbar .bookmark-item menu[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateX(0) !important;  
    transition: transform 0.9s ease, opacity 1.9s ease !important;  
}  
*/

Alles anzeigen

Für die Submenus könnte man stattdessen auch eine andere horizontale Transformation benutzen:

CSS

#PlacesToolbar .bookmark-item menu > menupopup { 
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: scaleX(0) !important;  
}

#PlacesToolbar .bookmark-item menu[open] > menupopup { 
    opacity: 1 !important;     
    transform: scaleX(100%) !important;  
    transition: transform 0.9s ease, opacity 1.9s ease !important;  
}

Alles anzeigen

Zitat von Mira_Belle

der hatte

Immer gerne, prima das es klappt soweit!

Horstmann

Zitat von Mira_Belle

So geht es!

Schweet!

Komplett könnte sowas klappen; weitere IDs wie für app menu oder wie das Teufelszeug heisst in Windows könnte man einpflegen.
Das lässt sich bestimmt auch weiter kürzen, aber wie erwähnt ohne Zugriff auf die Menüleiste am Mac ist das das Ende hier.
Bitte mal kurz antesten.

CSS

/*  ---  Flexible Popup Position ??? fuer zusaetzliches Javascript  ---  */

menu > menupopup {
    --trans_x: -100%;
}

menu > menupopup.flipper {
    --trans_x: 100%;
} 

/*  ---  Hauptmenu  ---  */
:is(
#file-menu,
#edit-menu,
#view-menu ,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu) > menupopup {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

:is(#file-menu,
#edit-menu,
#view-menu ,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu)[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateY(0) !important;  
    transition: transform 0.8s ease, opacity 0.3s ease !important;  
}

/* ---  Untermenus ---  */
:is(#file-menu,
#edit-menu,
#view-menu ,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu) menu > menupopup { 
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateX(var(--trans_x)) !important;  
}

:is(#file-menu,
#edit-menu,
#view-menu ,
#history-menu,
#bookmarksMenu,
#tools-menu,
#helpMenu) menu[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateX(0) !important;  
    transition: transform 0.8s ease, opacity 0.3s ease !important;  
}

Alles anzeigen

Aber, und evtl. können die Javascript Leute hier was dazu beitragen:

Popups öffnen sich je nach Position im Monitor/Browserfenster mal rechts, mal links vom übergeordneten Popup Fenster, je nachdem wo Platz ist.
Mit dem obigen CSS funktioniert die horizontale Animation nur von links nach rechts, idealerweise würde die Animation die Richtung wechseln, basiert auf der horizontalen Position des Popups.
Was nicht so einfach ist, weil nur das Hauptpopup eine via CSS zugänglich definierte Position hat; s. hier oder hier.

Der CSS Code oben hat eine Provision für den Fall, basierend auf diesem sehr groben JS Script (ohne das Script funktioniert der CSS Code ganz normal).

~~Die Positionierung funktioniert manchmal, oft aber nicht.~~
Edit: Die Positionierung funktioniert ab dem zweiten Öffnen eines Popups.
Warnung: dieses JS ist modifiziertes AI, konnte sonst nix finden.

JavaScript

//popup position finder
//pop_position.uc.js

(function () {

  if (!window.gBrowser) return;

    document.addEventListener("popupshown", function (e) {
      let popup = e.target;
      if (popup.localName !== "menupopup") return;

      let anchor = popup.anchorNode;
      if (!anchor || typeof anchor.screenX === "undefined") return;

      let flippedH = popup.screenX < anchor.screenX;

      if (flippedH) {
      popup.classList.add('flipper');
      };
    });

})();

Alles anzeigen

Horstmann

Probier mal #bookmarksMenu menupopup ==> #bookmarksMenu > menupopup

Also so:

CSS

/* Lesezeichen */
#bookmarksMenu > menupopup {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}
#bookmarksMenu[open] menupopup { 
    opacity: 1 !important;     
    transform: translateY(0) !important;  
    transition: transform 0.8s ease, opacity 0.3s ease !important;  
} 
/* ----------------------------------------------------------------------- */
#bookmarksMenu menu > menupopup { 
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateX(-100%) !important;  
}
#bookmarksMenu menu[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateX(0) !important;  
    transition: transform 0.8s ease, opacity 0.3s ease !important;  
}
/* ----------------------------------------------------------------------- */

Alles anzeigen

Zitat von grisu2099

Zitat von Mira_Belle

Bis auf Ansicht und die Lesezeichen haben die anderen Menüs keine solchen Untermenüs.

Chronik -> Kürzlich geschlossene Fenster/Tabs
Extras -> Browser-Werkzeuge

Mal auf das #bookmarksMenu warten; wenn das klappt mach ich einen Komplettvorschlag.

Horstmann

Zitat von Mira_Belle

So ist es schon besser und dass die Untermenüs eben auch von links nach rechts aufscrollen.

Aber nur bei den Untermenus von #view-menu, ist das so gewollt?

Horstmann

Aaaaalso:

Mal nur für eines komplett, das alte CSS dafür erstmal entfernen; es wird nur die ID für das Hauptmenü Bearbeiten benutzt.
Die ersten beiden Codeblöcke sind für das erste Popup, was wir schon hatten, aber mit > ; die letzten beiden Codeblöcke sind für die Untermenüs.

CSS

#edit-menu > menupopup {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

#edit-menu[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateY(0) !important;  
    transition: transform 1.5s ease, opacity 1.5s ease !important;  
}

#edit-menu menu > menupopup { 
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateX(-100%) !important;  
}
#edit-menu menu[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateX(0) !important;  
    transition: transform 1.5s ease, opacity 1.5s ease !important;  
}

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Werde noch einmal nach Horsmann's Anregung auf die Suche nach den richtigen Parametern der Selektoren gehen.

Mal schnell, wieder für's Lesezeichenmenü.

Wichtig das > zu setzen für den Hauptbutton (hier Zeile 1 + 7), um die erste Animation auf das Hauptpopup einzugrenzen; das solltest du dann für alle machen.
Allerdings öffnen sich die Popups immer von links nach rechts - was für die Menüleiste ok sein könnte - muss ich nochmal anschauen.

translateX(100%) würde dann von rechts nach links gehen.

CSS

#bookmarks-menu-button > menupopup {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

#bookmarks-menu-button[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateY(0) !important;  
    transition: transform 1.5s ease, opacity 1.5s ease !important;  
}

#bookmarks-menu-button menu > menupopup { 
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateX(-100%) !important;  
}
#bookmarks-menu-button menu[open] > menupopup { 
    opacity: 1 !important;     
    transform: translateX(0) !important;  
    transition: transform 1.5s ease, opacity 1.5s ease !important;  
}

Alles anzeigen

Horstmann

Hmm, sowas als Ansatz?
#bookmarks-menu-button wäre dann mit dem entsprechenden Menüleistenbutton zu ersetzen.
Weiter komm ich mit Raten aber nun nicht mehr.

CSS

#bookmarks-menu-button menupopup{
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

#bookmarks-menu-button[open] menupopup { 
    opacity: 1 !important;     
    transform: translateY(0) !important;  
    transition: transform 1.5s ease, opacity 1.5s ease !important;  
}

Alles anzeigen

Horstmann

Zitat von Mira_Belle

CSS

#menu_HelpPopup {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

#menu_HelpPopup[animate="open"] {
    opacity: 1 !important;     
    transform: translateY(0) !important;  
    transition: transform 1.5s ease, opacity 1.5s ease !important;  
}

Alles anzeigen

Das Menü erscheint erst gar nicht!
So ist es auch bei allen anderen Menüs.

Dann schau evtl. mal in den Browserwerkzeugen - in html und CSS - nach anderen Attributen für open; evtl. [panelopen="true"], [panelopen], [open], [open="true"] oder so; irgendein Attribut dafür sollte es ja geben, [animate="open"] funktioniert offensichtlich nicht.

Das Attribut kann auch am übergeordneten Button hängen, etc..

Wie gesagt komm ich da leider nicht dran.

Beiträge von Horstmann

Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.