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

Mira_Belle

Die Überschrift ist nur die Kurzversion!

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

Ich selbst bastele gerade am meinem Appmenü herum, aber es will nicht.

Habe versucht, irgendwie diesen Codefetzen da rein zu basteln.

JavaScript

      // Funktion zum Animieren des Menüs
  function animateMenuOpening() {
    var menuPopup = document.getElementById('AMpopup');
    menuPopup.style.opacity = '0';
    menuPopup.style.transform = 'translateY(-10px)';
    menuPopup.style.transition = 'opacity 0.3s ease, transform 0.3s ease';

    setTimeout(() => {
      menuPopup.style.opacity = '1';
      menuPopup.style.transform = 'translateY(0)';
    }, 10);
  }

Alles anzeigen

Will aber nicht!

Mira_Belle

Die Selektoren der Menüs:

Code

#AMpopup

#menu_FilePopup
#menu_EditPopup
#menu_viewPopup
#historyMenuPopup
#bookmarksMenuPopup
#menu_ToolsPopup
#menu_HelpPopup

BrokenHeart

Zitat von Mira_Belle

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.

Du kannst ja mal hier schauen, ob das für dich passt:

Beitrag

Autopopup.uc.js für Menüs gesucht

moin, moin...

Ich benutze momentan für meine Bookmark-Folder in der Lesezeichen-Symbolleiste ein Autopopup.uc.js, zuletzt von aborix von hier:

RE: [Script] [Nightly] Autopopup für Lesezeichenleiste funktioniert nicht mehr... Gibts das auch irgendwo/irgendwie für die Menüleiste, also daß nur die Menüs aufklappen?

harff182

19. Juli 2021 um 15:56

Ich hatte anfänglich für harff182 eine Version erstellt, welche ich in Anlehnung an das Autopopup-Skript der Lesezeichen-Symbolleiste von aborix zusammengefrickelt hatte. Habe es dann wieder nachträglich entfernt, weil es bei mir nicht richtig funktionierte, bei anderen aber wohl schon. aborix hat dann noch ein paar Änderungen vorgenommen und diese Version sollte eigentlich laufen. Ich nutze dieses Skript allerdings nicht...

Mira_Belle

Danke BrokenHeart , aber z.Z. beise ich mir erst einmal am smooten (soften) Aufklappen der Menüs
die Zähne aus.

Hier ein Versuch, der, wie sollte es auch anders sein, nicht funktioniert!

JavaScript

// Warten, bis das Dokument vollständig geladen ist
window.addEventListener('DOMContentLoaded', function() {
    // Funktion zum Hinzufügen von Übergängen zu den Menüs
    function addTransitions() {
        var menus = [
            '#AMpopup',
            '#menu_FilePopup',
            '#menu_EditPopup',
            '#menu_viewPopup',
            '#historyMenuPopup',
            '#bookmarksMenuPopup',
            '#menu_ToolsPopup',
            '#menu_HelpPopup'
        ];

        menus.forEach(function(selector) {
            var menu = document.querySelector(selector);
            if (menu) {
                menu.style.transition = 'opacity 2s ease-in-out, transform 2s ease-in-out';
                menu.style.opacity = '0';
                menu.style.transform = 'translateY(-10px)';

                // Event-Listener hinzufügen, um den Übergang zu starten, wenn das Menü geöffnet wird
                menu.addEventListener('popupshowing', function() {
                    this.style.opacity = '1';
                    this.style.transform = 'translateY(0)';
                });

                // Event-Listener hinzufügen, um den Übergang zurückzusetzen, wenn das Menü geschlossen wird
                menu.addEventListener('popuphiding', function() {
                    this.style.opacity = '0';
                    this.style.transform = 'translateY(-10px)';
                });
            }
        });
    }

    // Übergänge hinzufügen
    addTransitions();
});

Alles anzeigen

BrokenHeart

Ohne, dass ich mir das jetzt genau angeschaut habe, aber bei deinem zweiten "Problem" müsste doch eigentlich reines CSS ausreichen . Aber da können dir sicher die CSS-Spezies mehr dazu sagen.

DOMContentLoaded hat bei mir in keinem einzigen Fall so funktioniert, wie ich es erwartet hätte, daher benutze ich dafür lieber ein (unschönes) setTimeout() oder man testet mit einem Observer das Vorhandensein des Menüs.

Mira_Belle

Du hast wohl recht.
Werde Morgen das dann mal versuchen per CSS zu lösen.

Danke. _N8

Mira_Belle

Ein letzter Versuch, der leider nur teilweise funktioniert!

JavaScript

// ==UserScript==
// @name           MenueAnimation
// @description    Menüeinträge sanft einblenden und heruntersliden in Firefox
// @include        main
// @compatibility  Firefox 140+
// ==/UserScript==

(function () {
  const menuSelectors = [
    '#AMpopup',
    '#menu_FilePopup',
    '#menu_EditPopup',
    '#menu_viewPopup',
    '#historyMenuPopup',
    '#bookmarksMenuPopup',
    '#menu_ToolsPopup',
    '#menu_HelpPopup'
  ];

  function animateMenuItems(popup) {
    // Initialzustand beim Öffnen vorbereiten
    popup.addEventListener('popupshowing', () => {
      const items = popup.querySelectorAll('menuitem');
      items.forEach(item => {
        item.style.opacity = '0';
        item.style.transform = 'translateY(-8px)';
        item.style.transition = 'opacity 250ms ease, transform 250ms ease';
      });
    });

    // Bei Anzeige sanft einblenden und sliden
    popup.addEventListener('popupshown', () => {
      const items = popup.querySelectorAll('menuitem');
      let delay = 0;
      items.forEach(item => {
        setTimeout(() => {
          item.style.opacity = '1';
          item.style.transform = 'translateY(0)';
        }, delay);
        delay += 30; // stufenweise Animation
      });
    });

    // Rücksetzen bei Schließen
    popup.addEventListener('popuphidden', () => {
      const items = popup.querySelectorAll('menuitem');
      items.forEach(item => {
        item.style.transition = '';
        item.style.opacity = '';
        item.style.transform = '';
      });
    });
  }

  function init() {
    menuSelectors.forEach(selector => {
      const popup = document.querySelector(selector);
      if (popup) {
        animateMenuItems(popup);
      }
    });
  }

  if (document.readyState === 'complete') {
    init();
  } else {
    window.addEventListener('load', init);
  }
})();

Alles anzeigen

Ein sanftes Aufrollen der Menüs, einfach nur per CSS, bekomme ich einfach nicht hin.

Die Geschichte mit dem "Hovern" hat sich erst einmal erledigt!
Das sanfte Aufklappen, wie auch immer, ist mir wichtiger!

mkpcxxl

Also das ist doch schon mal ganz schön. Die Idee mit dem Hovern und der Animation ist toll. Vielleicht findest du ja noch eine Lösung, die dich zufrieden stellt.

Habe dein Script ausprobiert, und ja, es hakt etwas. Leider habe ich keinerlei Ahnung von JS, hoffe aber, dass du eine Lösung findest.

Gruß

Michael

(mkpcxxl)

Horstmann

Auf dem Mac ist das alles etwas anders, und an die Menüleiste komm ich nicht ran; aber ich hab mal was mit dem Lesezeichenmenü probiert, für das ganze Fenster:

CSS

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

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

Alles anzeigen

Ich weiss nicht was genau du vorhast, aber in deinem letzten Script von #7 scheinst du nur menuitem anzusprechen, es gibt da aber auch noch menu und wohl irgendwelche Separatoren in dem Fenster.

Also evtl. auch sowas:

CSS

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

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

#BMB_bookmarksPopup > :is(menuseparator, menuitem, menu) {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100vh) !important;   
}
 
#BMB_bookmarksPopup[animate="open"] > :is(menuseparator, menuitem, menu) {
    opacity: 1 !important;  
    transform: translateY(0) !important;  
    transition-delay: 1.5s !important;   
    transition: transform 1.5s ease, opacity 2.5s ease-in !important;  
}

Alles anzeigen

Mira_Belle

Zitat von Horstmann

Ich weiss nicht was genau du vorhast, aber ....

Also, es gibt doch eine Menüleiste, darin die Einträge,
Datei, Bearbeiten, Ansicht, Chronik, Lesezeichen, "Profile", Extras und Hilfe.
Klickt man auf einen solchen "Eintrag" öffnet sich das Menü, und zwar pronto!
UND genau DAS will ich ändern!
Dieses Menü soll irgendwie sich langsam öffnen.
Ich dachte daran, dass es fein wäre, wenn sich diese Menüs ganz soft von oben nach unten "scrollen".

Und ja, auch "mein" Appmenü soll dahingehend angepasst werden, aber eins nach dem anderen.

BrokenHeart

Zitat von Mira_Belle

Dieses Menü soll irgendwie sich langsam öffnen.
Ich dachte daran, dass es fein wäre, wenn sich diese Menüs ganz soft von oben nach unten "scrollen".

Warum er das Menü unter macOS nicht ändern kann, hat er doch erklärt. Gefühlt wurde das Thema schon 100fach angesprochen: MacOS lässt keinen Zugriff auf die Menüleiste der Applikationen zu, die gehören zum System.

Jetzt hat sich Horstmann allerdings das wirklich versteckteste Popup zu Demonstrationszwecken ausgesucht und zwar das Lesezeichen-Menü über das Lesezeichen-Icon , welches man sich erst in die Navbar schieben muss.

Ich habe es ausprobiert und es dürfte so ziemlich genau das sein, was du suchst. Für meinen Geschmack allerdings etwas zu viel Transparenz, aber sonst sieht es sehr gut aus .

Horstmann

Zitat von Mira_Belle

Also, es gibt doch eine Menüleiste, darin die Einträge,
Datei, Bearbeiten, Ansicht, Chronik, Lesezeichen, "Profile", Extras und Hilfe.

Wie von BrokenHeart besser erklärt - am Mac gibt es keine Zugriff via Firefox Manipulationen auf diese Menüleiste, die ist festgezimmert durch das macOS, meines Wissens nach.

Es gibt auch noch viele weitere Stylingelemente die OS abhängig sind; manche kann man austricksen, manche nicht.

Für deinen Zweck könntest du evtl. mal das Lesezeichenmenü Dingens antesten - wie ebenfalls von Brokenheart erläutert - und falls das was ist so etwas mit deinen menubar menus IDs testen =>

CSS

:is(#AMpopup,
#menu_FilePopup,
#menu_EditPopup,
#menu_viewPopup,
#historyMenuPopup,
#bookmarksMenuPopup,
#menu_ToolsPopup,
#menu_HelpPopup) {
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateY(-100%) !important;  
}

Alles anzeigen

Etcetera für die weiteren Codeblöcke, falls es überhaupt funktioniert.

Zitat von BrokenHeart

Für meinen Geschmack allerdings etwas zu viel Transparenz, ...

Für meinen Geschmack auch, aber es gibt 1001 Wege für Animation - und sogar das ist etwas anders geregelt im Mac Firefox.

Mira_Belle

Zitat von BrokenHeart

Lesezeichen-Menü über das Lesezeichen-Icon , welches man sich erst in die Navbar schieben muss.
Ich habe es ausprobiert und es dürfte so ziemlich genau das sein, was du suchst. Für meinen Geschmack allerdings etwas zu viel Transparenz, aber sonst sieht es sehr gut aus .

Ich auch, und es ist ziemlich genau so, wie ich es mir vorstelle.
Der Code (das CSS) dazu:

CSS

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

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

Alles anzeigen

Das klappt wunderbar.

Adaptiere ich diesen Code (CSS) auf die Menüs der Menüleiste, funktioniert es nicht!

Zum Beispiel das Hilfemenü:

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.

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.

Mira_Belle

Horstmann Vielen Dank für Deine Anregung, aber da ist nichts!

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

Mira_Belle

Du bist ein Orakel!
Hier der CSS-Code der wunderbar funktioniert.

CSS

#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 1.5s ease, opacity 1.5s ease !important;  
} 

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

#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 1.5s ease, opacity 1.5s ease !important;  
}

#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 1.5s ease, opacity 1.5s ease !important;  
} 

#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 1.5s ease, opacity 1.5s ease !important;  
} 

#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 1.5s ease, opacity 1.5s ease !important;  
} 

#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 1.5s ease, opacity 1.5s ease !important;  
}

Alles anzeigen

Jipi, und mit ....

CSS

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

... geht es auch im Appmenü!

Mit den Werten für's scrollen (transform) werde ich noch etwas experimentieren.
Für die Transparenz (opacity) habe ich mich schon auf 0.3s festgelegt.

Geht das Scrollen auch von links nach rechts?

mkpcxxl

Sensationell, ich liebe diese Animationen. Wäre es noch möglich, die gleichen Animationen bei der Lesezeichen Symbolleiste hin zu bekommen ? Dann wäre es perfekt für mich.

Aber auf alle Fälle schon mal danke an alle, die geholfen haben und im speziellen Mira für die Idee.

Gruß

Michael

(mkpcxxl)

Mira_Belle

Zitat von Mira_Belle

Geht das Scrollen auch von links nach rechts?

Der Hintergrund dieser Frage war/ist das Ansichtenmenü!
Habe mich belesen und "translateY" muss einfach nur in "translateX" geändert werden.

Aber wieder einmal will der Code (das CSS) nicht so, wie ich will!

Für "Symbolleisten" in "Ansicht".

CSS

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

Aber funktioniert gar nicht! Nicht einmal "unsichtbar" wird das "Popup".

Mira_Belle

Zitat von mkpcxxl

Sensationell, ich liebe diese Animationen. Wäre es noch möglich, die gleichen Animationen bei der Lesezeichen Symbolleiste hin zu bekommen ? Dann wäre es perfekt für mich.

Bestimmt, aber später. Verfolge einfach dieses Thema weiter.

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

Autopopup.uc.js für Menüs gesucht

Mira_Belle 30. Juni 2025 um 22:08

Ähnliche Themen

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

Div. Skripte funktionieren im aktuellem Nightly nicht mehr