@Horstmann Ich habe nun mehrere ältere Versionen den Skripts durchprobiert, über all das Gleiche.
Ich denke, es wird so sein, wie von BrokenHeart beschrieben.
Beiträge von Mira_Belle
-
-
-
-
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. -
Danke Endor
Meine mich heute Morgen erinnern zu können, dass ein JS-Profi auf dieses Verhalten hingewiesen hat(te).@Horstmann Kann ich machen, aber auf die Idee an:
... bin ich auch schon gekommen. Bringt aber nichts!
Setze ich auf Null, oder auf 1, nur so als Beispiel, werde die Counter gar nicht angezeigt.
Erhöhe ich die Werte >1000, gleiches!
Schon komisch.CSS
Alles anzeigen(function() { if (!window.gBrowser) return; setTimeout(function() { setFunction(); },10); let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons')); // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ //Custom icons in profile/chrome/icons folder let icon1 = "folder-fat.svg"; // Custom Folder Icon let icon2 = "bookmark-hollow.svg"; // Custom Link Icon let icon3 = "arrow-right.svg"; // Custom Arrow Icon // Custom settings let bm_font_size = 12; let cs_font_weight = 700; let bm_icon_size = 16; // NEU: Schriftfarbe getrennt definieren //let cs_font_color_1 = "#FFA500"; // Farbe für Folder-Zähler (links) //let cs_font_color_2 = "#00FFFF"; // Farbe für Link-Zähler (rechts) let cs_font_color_1 = "#FFD700"; // Farbe für Folder-Zähler (links) let cs_font_color_2 = "#FFD700"; // Farbe für Link-Zähler (rechts) // NEU: Symbolfarber getrennt definieren //let cs_icon_color_1 = "#5fe575"; // Farbe für "Ordner", 1.Symbol //let cs_icon_color_2 = "#fbf328"; // Farbe für "Link", 2.Symbol //let cs_icon_color_3 = "#bbf700"; // Farbe für den Pfeil let cs_icon_color_1 = "#C0C0C0"; // Farbe für "Ordner", 1.Symbol let cs_icon_color_2 = "#C0C0C0"; // Farbe für "Link", 2.Symbol let cs_icon_color_3 = "#C0C0C0"; // Farbe für den Pfeil // Calculated settings let cs_font_size = `${bm_font_size}px`; let cs_icon_size = `${bm_icon_size}px`; let cs_width_one = `calc(${bm_icon_size}px + 1.4em)`; let cs_width_uno = `calc(${bm_icon_size}px)`; let cs_width_two = `calc(${bm_icon_size}px + 1.4em)`; let cs_width_due = `calc(${bm_icon_size}px)`; //let useStyle1 = true; // <- HIER Weiche setzen: true = Variante 1, false = Variante 2 let useStyle = 1; // <- HIER Weiche setzen: 0 = Symbole hinter den Zählern, 1 = Symbole vor den Zählern // ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ // Symbole vor den Zählern let css_one = ` /* Counter #1 Folder */ #bmContent::before { content: attr(data-value1) !important; width: ${cs_width_one} !important; align-items: center !important; display: flex !important; justify-content: end !important; /*margin-inline: 16px 4px; */ /* min. Abstand links für enge Popups, rechts zum 2ten Counter */ margin-left: 16px !important; /* Abstand links minimum für schmale Popus CHANGE */ margin-right: -1px !important; /* Abstand Icon "Ordner" bis zum "Zähler" */ background-image: url("${ProfilePath}/${icon1}")!important; background-position: center right calc(${cs_width_one} - ${cs_icon_size}) !important; background-repeat: no-repeat !important; background-size: ${cs_icon_size} ${cs_icon_size} !important; color: ${cs_font_color_1} !important; /* Farbe der 1. Zahl */ fill: ${cs_icon_color_1} !important; /* Farbe des 1. Symbols */ } /* Counter #2 Links */ #bmContent::after { content: attr(data-value2) !important; width: ${cs_width_two} !important; align-items: center !important; display: flex !important; justify-content: end !important; /*margin-inline: -2px;*/ margin-left: 4px !important; /* Abstand "Zähler 1" zum Icon2 */ margin-right: -1px !important; /* Abstand Icon "Links" bis zum "Zähler" */ background-image: url("${ProfilePath}/${icon2}") !important; background-position: center right calc(${cs_width_two} - ${cs_icon_size}) !important; background-repeat: no-repeat !important; background-size: ${cs_icon_size} ${cs_icon_size} !important; color: ${cs_font_color_2} !important; /* Farbe der 2. Zahl */ fill: ${cs_icon_color_2} !important; /* Farbe des 2. Symbols */ } `; // Symbole hinter den Zählern let css_two = ` /* Counter #1 Folder */ #bmContent::before { content: attr(data-value1) !important; width: ${cs_width_one} !important; align-items: center !important; display: flex !important; justify-content: end !important; background-image: url("${ProfilePath}/${icon1}")!important; background-position: center right calc(${cs_width_uno} - ${cs_icon_size}) !important; background-repeat: no-repeat !important; background-size: ${cs_icon_size} ${cs_icon_size} !important; color: ${cs_font_color_1} !important; /* Farbe der 1. Zahl */ fill: ${cs_icon_color_1} !important; /* Farbe des 1. Symbols */ padding: 2px 20px 0px 10px !important; /* top | right | bottom | left */ /*margin-inline: 0px -10px; */ margin-left: 16px !important; /* Abstand links minimum für schmale Popus CHANGE */ margin-right: 12px !important; /* Abstand Icon "Ordner" bis zum "Zähler" */ } #bmContent::after { content: attr(data-value2) !important; width: ${cs_width_two} !important; align-items: center !important; display: flex !important; justify-content: end !important; /*justify-content: flex-end; */ background-image: url("${ProfilePath}/${icon2}")!important; background-position: center right calc(${cs_width_due} - ${cs_icon_size}) !important; background-repeat: no-repeat !important; background-size: ${cs_icon_size} ${cs_icon_size} !important; color: ${cs_font_color_2} !important; /* Farbe der 2. Zahl */ fill: ${cs_icon_color_2} !important; /* Farbe des 2. Symbols */ padding: 2px 22px 0 0 !important; /* top | right | bottom | left */ margin-left: -14px !important; /* Abstand "Zähler 1" zum Icon2 */ margin-right: -1px !important; /* Abstand Icon "Links" bis zum "Zähler" */ } `; function setFunction() { const css =` /* Counter rechtsbuendig */ #bmContent { display: flex !important; margin-inline: auto 0 !important; font-family: Consolas, "Lucida Console", "Courier New", monospace !important; font-size: ${cs_font_size} !important; font-weight: ${cs_font_weight} !important; height: ${cs_icon_size} !important; } /* Dynamisch gewählter before-Block */ ${useStyle ? css_one : css_two} /* Pfeil */ menupopup > menu::after { content: "" !important; background-image: url("${ProfilePath}/${icon3}")!important; height: ${cs_icon_size} !important; height: ${cs_icon_size} !important; fill: ${cs_icon_color_3} !important; } `; const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css)); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); let bmbMenu = document.getElementById('bookmarks-menu-button'); let bookMenu = document.getElementById('bookmarksMenu'); let persToolBar = document.getElementById('PersonalToolbar'); if(bmbMenu) bmbMenu.addEventListener('popupshowing', onPopupShowing ); if(bookMenu) bookMenu.addEventListener('popupshowing', onPopupShowing ); if(persToolBar) persToolBar.addEventListener('popupshowing', onPopupShowing ); } function onPopupShowing(aEvent) { let popup = aEvent.originalTarget; for (let item of popup.children) { if (item.localName != 'menu' || item.id?.startsWith('history')) continue; setTimeout(() => { let itemPopup = item.menupopup; itemPopup.hidden = true; itemPopup.collapsed = true; itemPopup.openPopup(); itemPopup.hidePopup(); let menuitemCount = 0; let menuCount = 0; for (let subitem of itemPopup.children) { if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) { if (subitem.localName == 'menuitem') { menuitemCount++; } else if (subitem.localName == 'menu') { menuCount++; } } } itemPopup.hidden = false; itemPopup.collapsed = false; // Neues Element für Zaehler let bmCounta = item.childNodes[1]; if (!bmCounta) return; // Falls undefiniert bmCounta.innerHTML = "" let bmContent = document.createElement("bmContent"); bmContent.id = "bmContent"; bmCounta.appendChild(bmContent); //let strCountOut1 = " " + menuCount + " "; // Has no brackets //let strCountOut1 = "(" + menuCount + ")"; // Has round brackets //let strCountOut1 = "[" + menuCount + "]"; // Has square brackets let strCountOut1 = String(menuCount).padEnd(2, " "); bmContent.setAttribute('data-value1', strCountOut1); //let strCountOut2 = " " + menuitemCount + " "; // Has no brackets //let strCountOut2 = "(" + menuitemCount + ")"; // Has round brackets //let strCountOut2 = "[" + menuitemCount + "]"; // Has square brackets let strCountOut2 = (useStyle === 0) ? String(menuitemCount).padStart(4, "/ ") : String(menuitemCount).padEnd(2, " "); bmContent.setAttribute('data-value2', strCountOut2); }, 100); } } })(); -
-
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
ZitatAlso 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. -
Werde ich so gleich mal ausprobieren!
Habe ich,
und die Untermenüs funktionieren so nicht!Aber so:
CSS
Alles anzeigen#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; }Aber Danke für die Vorlage

Ist viel einfacher als:CSS
Alles anzeigen#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; }Ach und das Menü "Profile" ist dann ja auch gleich mit dabei.
-
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
Alles anzeigen#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; }
Werde ich so gleich mal ausprobieren! -
-
Hast du gut gemacht.


Was?
Die ganze Arbeit hatte doch @Horstmann
-
mkpcxxl Danke für den Tipp mit dem Autopopup_Menus.uc.js
Habe es für mich ergänzt, damit auch "mein" Appmenü damit funktioniert.Einfach klasse. Drüberfahren und die Menüs öffnen sich von alleine.
Ach und noch etwas

Ich hatte lediglich die Idee.
Der gebührende Dank geht an @Horstmann,
der hatte die Ideen zur Umsetzung in Code
Ich habe nur getestet und die CSS-Fragmente zusammen gesetzt.
Bedankt Euch also nicht bei mir, sondern bei Horstmann
-
Ich habe da mal was zusammengeschustert!
Funktioniert bei mir zufriedenstellend.CSS
Alles anzeigen#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; }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. -
So geht es!
CSS
Alles anzeigen/* 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; } -
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. -
Und schon wieder brauche ich Hilfe.
Mist, bei den Lesezeichen greift der untere Teil des CSS nicht.
CSS
Alles anzeigen/* 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; } /* ----------------------------------------------------------------------- */ -
grisu2099 Du hast teilweise recht! Danke.
So ist es schon besser und dass die Untermenüs eben auch von links nach rechts aufscrollen.CSS
Alles anzeigen/* 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; } -
Dank @Horstmann hier das komplette CSS für das animierte Öffnen der Menüs.
CSS
Alles anzeigen/* 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; }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! -
Treffer! Ich danke Dir.
CSS
Alles anzeigen#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; } -
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
Alles anzeigen#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; }-----------------------------------------------------------------------------------------------------------------------------------------------------
Nachtrag!Auch ...
... funktioniert.
Und ...
Ebenso!