Beiträge von Mira_Belle

Mira_Belle

Und schon wieder brauche ich Hilfe.

Mist, bei den Lesezeichen greift der untere Teil des CSS nicht.

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

Mira_Belle

grisu2099 Du hast teilweise recht! Danke.

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

CSS

  /* Menüs der Menüleiste von oben nach unten */
  	#file-menu menupopup,
	#edit-menu menupopup,
	#view-menu > menupopup,
	#history-menu menupopup,
	#bookmarksMenu menupopup,
	#tools-menu menupopup,
	#helpMenu menupopup {
		will-change: transform, opacity !important;  
		opacity: 0 !important;  
		transform: translateY(-100%) !important;
	}	
	#file-menu[open] menupopup,
	#edit-menu[open] menupopup,
	#view-menu[open] > menupopup,
	#history-menu[open] menupopup,
	#bookmarksMenu[open] menupopup,
	#tools-menu[open] menupopup,
	#helpMenu[open] menupopup { 
		opacity: 1 !important;     
		transform: translateY(0) !important;  
		transition: transform 0.8s ease, opacity 0.3s ease !important;  
	}
  /* Untermenüs "Ansicht" von links nach rechts */
  	#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;  
  	}
  /* Ausrichtung der Untermenüs in Ansicht */
	#viewToolbarsMenu menupopup,
	#viewSidebarMenuMenu menupopup,
	#viewFullZoomMenu menupopup,
	#pageStyleMenu menupopup {
		margin-left: 6px !important;
		margin-top: -7px !important;
	}

Alles anzeigen

Mira_Belle

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

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

Der untere Teil, das Ausrichten der Untermenüs in Ansicht, wird nicht zwingend benötigt!

Ob es noch ein JS geben wird, damit schon beim "Hovern" die Menüs sich öffnen, ich weiß es nicht!

Mira_Belle

Treffer! Ich danke Dir.

CSS

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

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

Alles anzeigen

Mira_Belle

Grrrr.
Das will alles nicht.
Der erste CSS-Block sollte das Menü, bzw. Popup ausblenden.
Ich habe nun folgende Selektoren für das erste Popup unter "Ansicht/Symbolleisten" ausprobiert:

#viewToolbarsMenu => nichts!
#view-menu-popup => nichts!

#viewToolbarsMenu > menupopup => nichts
aus Verzweiflung auch
#view-menu-popup > menupopup
ausprobiert, Fehlanzeige!

Der Rest sah wie folgt aus:

CSS

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

Im Augenblick weiß ich nicht weiter und kann auch erst heute Abend weiter machen.

@Horstmann Aber ein ganz dickes Lob mal an Dich!
Du gibst Dir soviel Mühe, vielen lieben Dank dafür.

Ich kann zwar die Popups wie folgt ansprechen, um die Position zu korrigieren,
aber das mit dem "Verbergen" will nicht!

CSS

#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

-----------------------------------------------------------------------------------------------------------------------------------------------------
Nachtrag!

Auch ...

CSS

#viewToolbarsMenu > menupopup {
    margin-left: 6px !important;
    margin-top: -7px !important;
}

... funktioniert.

Und ...

CSS

#view-menu-popup  {
    margin-left: 6px !important;
    margin-top: -7px !important;
}

Ebenso!

Mira_Belle

Also, die Menüs öffnen sich nun animiert, d.h. sie scrollen langsam von oben nach unten.
Jedoch ist da noch das "Ansichtenmenü". Die Untermenüs poppen nach wie vor einfach auf.
Werde noch einmal nach Horsmann's Anregung auf die Suche nach den richtigen Parametern der Selektoren gehen.

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.

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

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?

Mira_Belle

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

Mira_Belle

Danke für die Rückmeldung.
Schön, dass es jetzt so funktioniert, wie von Dir gewünscht.

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.

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.

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!

Mira_Belle

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

Danke. _N8

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

Mira_Belle

Die Selektoren der Menüs:

Code

#AMpopup

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

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

Zitat von moonson

Ist seit gestern aktiviert, als Dharkness das erwähnte, deshalb habe ich das Script von Andreas bei meinem direkt wieder gelöscht, ist ja somit nicht nötig. Den Rest teste ich im Laufe des Abends oder morgen.

Und der Fehler tritt dennoch auf?
Dann bleibt Dir wirklich nur das austesten, welches Skript Dir da zwischen funkt.

Mira_Belle

Irrungen und Wirrungen!

Ich habe die Sache mit dem Doppelklicken verwechselt!
Aber eine wichtige Frage!
Hast Du die Titelleiste aktiviert?
Mache doch bitte mal einen Screenshot.

Beiträge von Mira_Belle

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.

„Tab neu laden per Doppelklick“ auf den Tabreiter funktioniert nicht mehr

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.

„Tab neu laden per Doppelklick“ auf den Tabreiter funktioniert nicht mehr

„Tab neu laden per Doppelklick“ auf den Tabreiter funktioniert nicht mehr