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

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;
}

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

Das sind, inkl. "Profile", jene Selektoren.

Und das Hamburgermenü.

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;
}

2002Andreas

Zitat von Mira_Belle

hier das komplette CSS für das animierte Öffnen der Menüs.

Nur mal so, reicht hier so auch aus:

CSS

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

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

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

Alles anzeigen

Mira_Belle

2002Andreas Das hat aber lange gedauert bis Du hier eingeschritten bist.

Aber Sören war auch schon da und hat erklärt, warum will-change: transform, opacity !important; nicht genutzt werden soll.

Also:

CSS

#main-menubar > menu > menupopup { 
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

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

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

Alles anzeigen

Werde ich so gleich mal ausprobieren!

Mitleser

Zitat von 2002Andreas

Nur mal so, reicht hier so auch aus:

Zitat von Mira_Belle

Werde ich so gleich mal ausprobieren!

Doppelt hält besser; siehe Zeile 12-22.

2002Andreas

Zitat von Mira_Belle

bis Du hier eingeschritten bist

Zitat von Mira_Belle

Werde ich so gleich mal ausprobieren!

Es geht auch einzeln.

So von links nach rechts:

CSS

#main-menubar > menu > menupopup {
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

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

Und so von oben nach unten:

CSS

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

Es reicht also einer der Codes aus denke ich.

Mira_Belle

Zitat von Mira_Belle

Werde ich so gleich mal ausprobieren!

Habe ich,
und die Untermenüs funktionieren so nicht!

Aber so:

CSS

    #main-menubar > menu > menupopup { 
        opacity: 0 !important;  
        transform: translateY(-100%) !important;  
    }

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

    #main-menubar > menu menu > menupopup { 
        opacity: 0 !important;  
        transform: translateX(-100%) !important;  
    }
    #main-menubar > menu menu[open] > menupopup { 
        opacity: 1 !important;     
        transform: translateX(0) !important;  
        transition: transform 0.8s ease, opacity 0.3s ease !important;  
    }

Alles anzeigen

Aber Danke für die Vorlage
Ist viel einfacher als:

CSS

    #file-menu > menupopup,     /* Datei */
    #edit-menu > menupopup,     /* Bearbeiten */
    #view-menu > menupopup,     /* Ansicht */
    #history-menu > menupopup,  /* Chronik */
    #bookmarksMenu > menupopup, /* Lesezeichen */
    #tools-menu > menupopup,    /* Extras */
    #helpMenu > menupopup       /* Hilfe */
    {
        opacity: 0 !important;  
        transform: translateY(-100%) !important;  
    }
    #file-menu[open] > menupopup,       /* Datei */ 
    #edit-menu[open] > menupopup,       /* Bearbeiten */
    #view-menu[open] > menupopup,       /* Ansicht */
    #history-menu[open] > menupopup,    /* Chronik */
    #bookmarksMenu[open] > menupopup,   /* Lesezeichen */
    #tools-menu[open] > menupopup,      /* Extras */
    #helpMenu[open] > menupopup         /* Hilfe */
    { 
        opacity: 1 !important;     
        transform: translateY(0) !important;  
        transition: transform 0.8s ease, opacity 0.3s ease !important;  
    }

    #file-menu menu > menupopupp,    /* Datei */
    #edit-menu menu > menupopupp,    /* Bearbeiten */
    #view-menu menu > menupopup,     /* Ansicht */
    #history-menu menu > menupopup,  /* Chronik */
    #bookmarksMenu menu > menupopup, /* Lesezeichen */
    #tools-menu menu > menupopup,    /* Extras */
    #helpMenu menu > menupopup       /* Hilfe */
    { 
        opacity: 0 !important;  
        transform: translateX(-100%) !important;  
    }
    #file-menu menu[open] > menupopup,     /* Datei */
    #edit-menu menu[open] > menupopup,     /* Bearbeiten */
    #view-menu menu[open] > menupopup,     /* Ansicht */
    #history-menu menu[open] > menupopup,  /* Chronik */
    #bookmarksMenu menu[open] > menupopup, /* Lesezeichen */
    #tools-menu menu[open] > menupopup,    /* Extras */
    #helpMenu menu[open] > menupopup       /* Hilfe */
    { 
        margin-left: 6px !important;
        opacity: 1 !important;     
        transform: translateX(0) !important;  
        transition: transform 0.8s ease, opacity 0.3s ease !important;  
    }

Alles anzeigen

Ach und das Menü "Profile" ist dann ja auch gleich mit dabei.

2002Andreas

Zitat von Mira_Belle

die Untermenüs funktionieren so nicht!

Ich bin nur von diesem Code von dir mal ausgegangen:

CSS

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

/* Bearbeiten */
#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 0.8s ease, opacity 0.3s ease !important;  
}

/* Ansicht, inkl. Untermenü */
#view-menu > menupopup {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

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

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

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

/* 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;  
} 

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

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

/* Ausrichtung der Untermenüs in Ansicht */
#viewToolbarsMenu menupopup {
    margin-left: 6px !important;
    margin-top: -7px !important;
}
#viewSidebarMenuMenu menupopup {
    margin-left: 6px !important;
    margin-top: -7px !important;
}
#viewFullZoomMenu menupopup {
    margin-left: 6px !important;
    margin-top: -7px !important;
}
#pageStyleMenu menupopup {
    margin-left: 6px !important;
    margin-top: -7px !important;
}

Alles anzeigen

Weil den fand ich reichlich lang.

Zitat von Mira_Belle

Aber so:

Ist doch wesentlich kürzer dann

Zitat von Mira_Belle

das Menü "Profile" ist dann ja auch gleich mit dabei.

So ist es.

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.

Mira_Belle

Zitat von Horstmann

Die Idee war eher das alles zu reduzieren, ohne jeden Button/Schaltfläche einzeln zu listen; ...

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.

Aus Beitrag #1

Zitat

Also wenn man über die Einträge der Menüleiste streift, soll das Menü, wenn man auf einem Eintrag verweilt, nach einer gewissen Zeit sich von alleine öffnen.

Jetzt kommt Punkt zwei!
Das Menü soll sich soft von oben nach unten "ausrollen".

Wobei es ja noch weiter ging! Die Untermenüs scrollen ja seitwärts!

Aber ich finde es schön, dass ich den Einen oder Anderen auf "dumme" Ideen gebracht habe,
und dass das Ganze auch auf andere Menüs und Popups ausgeweitet wird.

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..

Endor

Hallo Horstmann

Das Script aus #70 funktioniert hier einwandfrei.
Absolute Klasse!!
Vielen Dank.
Mfg.
Endor

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. Siehe Anhang, einmal mit Script (084442.png) und einmal ohne (084331.png)

Mira_Belle

Zitat von Horstmann

Mich interessiert halt auch ob was klappt oder nicht ...

Dito, deshalb lese ich hier weiter uuund probiere aus.
Wenn es Verbesserungen oder doch etwas Cooles gibt, wird, werden diese übernommen,
wie z.B. Andreas Optimierung.

Endor

Zitat von saobento

dass gespeicherte Suchanfragen nicht mehr aufrufbar sind

Ja das ist hier auch so. Ist mir eben erst aufgefallen.
Mfg.
Endor

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.

Endor

Hallo Horstmann .

Ja so funktioniert es hier einwandfrei.
Vielen Dank für die schnelle Anpassung.

Mfg.
Endor

Horstmann

Zitat von Endor

Ja so funktioniert es hier einwandfrei.

Danke !
Keine saubere Lösung, aber die einfachste.
Nur nochmal: speziell die panel Codeteile sind schwer zu kontrollieren und offensichtlich nicht durchgetestet, und das Ganze ist nur ein Test!
Als nächstes kommt noch Einer und will die Suchergebnisse Popups auch umanimiert haben, etc.., ...

saobento

Bei mir hat die Änderung nicht geholfen, ist allerdings in einem Linuxsystem, vielleicht macht das dann einen Unterschied.

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

Ähnliche Themen

"Neues", altes Appmenu. Update, und bräuchte Hilfe!

Div. Skripte funktionieren im aktuellem Nightly nicht mehr