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

mkpcxxl

Werde ich tun, danke.

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.

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

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!

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

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

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!

grisu2099

Die Hälfte der Zeilen tut es auch...

CSS

#file-menu menupopup,
	#edit-menu menupopup,
	#view-menu > menupopup,
	#view-menu 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,
	#view-menu 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;  
	}
		/* 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

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

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

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?

Mira_Belle

Zitat von Horstmann

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

Bis auf Ansicht und die Lesezeichen haben die anderen Menüs keine solchen Untermenüs.
Und bei den Lesezeichen scheitere ich kläglich, obwohl Du so tolle Vorarbeit geleistet hast.

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

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.

Mira_Belle

So geht es!

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

Endor

Hallo Mira_Belle

Vielen Dank für den CSS Code habe ich gleich mal übernommen
und auf alle Einträge der Menüleiste angewendet. Funktioniert bestens.

Frage: Ich habe in der Lesezeichenleiste mehrere Ordner mit Lesezeichen,
kann man die auch noch irgendwie ansprechen?
Mfg.
Endor

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

Mira_Belle

Ich habe da mal was zusammengeschustert!
Funktioniert bei mir zufriedenstellend.

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 */
{
    will-change: transform, opacity !important;  
    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 */
{ 
    will-change: transform, opacity !important;  
    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;  
}

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

#AppMenuButton menu > menupopupp { 
    will-change: transform, opacity !important;  
    opacity: 0 !important;  
    transform: translateX(-100%) !important;  
}
#AppMenuButton menu[open] > menupopup{ 
    margin-left: 6px !important;
    margin-top: -7px !important;
    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

~~Das mit der Leerstelle ist mit Absicht.~~
~~Irgendwie ist bei mit der kleine Pfeil zu weit links, bsw. die Breite der "Schaltfläche" stimmt nicht.~~
~~Da muss ich mal sehen, welches CSS mir dazwischen haut.~~

Fehler gefunden, CSS korrigiert.

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

mkpcxxl

Zitat von Mira_Belle

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

Na dann hoffen wir mal und danke nochmals für deine Mühen.

Ach nochwas, ich nutze das Script Autopopup_Menus.uc.js damit die Menüs in der Menüleiste bei Maushover aufgehen.

In Verbindung mit deinem Animations CSS geht das für mich sehr gut.

Gruß

Michael

(mkpcxxl)

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

Beitrag von Mira_Belle (1. Juli 2025 um 22:20)

Ähnliche Themen

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

Div. Skripte funktionieren im aktuellem Nightly nicht mehr