1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Mira_Belle

Beiträge von Mira_Belle

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 5. Juli 2025 um 13:12
    Zitat von Horstmann

    Wir schreiben aber hier ja Code für möglichst alle User und Fälle.

    Da will ich Dir auch gar nicht widersprechen:!:

    Es ist nur so, dass ich bei allen Events von 'popupshowing' auf 'popupshown' umstellen musste.
    Bei bmbMenu funktionierte auch noch alles mit "doppeltem" Aufruf,
    jedoch beim Aufruf des Lesezeichenmenüs (bookMenu) schon nicht mehr.
    Da wurden die Counter gar nicht mehr angezeigt.
    Und nutze ich da nur 'popupshowing', tritt halt das beschriebene Problem auf.
    In der Lesezeichenleiste gleiches! Also überall 'popupshown' in Verwendung.

    @Horstmann Und Du hast den gleichen Fehler wie ich begangen!
    BrokenHeart hat mich darauf hingewiesen! Klammern, es fehlen Klammern.

    Hier noch einmal Deine zweite Version mit diesen Klammern.

    JavaScript
            let bmbMenu = document.getElementById('bookmarks-menu-button');
            let bookMenu = document.getElementById('bookmarksMenu');
            let persToolBar = document.getElementById('PersonalToolbar');
    
            let bmbMenuPop = document.getElementById('BMB_bookmarksPopup');      // neu
            
            if(bmbMenu) {
               bmbMenu.addEventListener('popupshown', onPopupShowing );    // popupshowing => popupshown
    		  }
            if(bmbMenuPop) {
               bmbMenuPop.addEventListener('popupshowing', onPopupShowing );   //  neu
    		  }
            if(bookMenu) {
               bookMenu.addEventListener('popupshown', onPopupShowing );    // popupshowing => popupshown
    		  }
            if(persToolBar) {
                persToolBar.addEventListener('popupshowing', onPopupShowing );
    		  }
    Alles anzeigen

    Und da diese Version ohne Nebenwirkungen funktioniert,
    werde ich das so übernehmen.
    Nur als Kommentar, anstatt /* neu */ schreibe ich da /* extra für Mac erforderlich */

    So etwas hatten wir schon einmal in einem Skript, dass es für Mac extra Code sein musste.

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 5. Juli 2025 um 10:44

    Mh. :/

    Also, ich habe keine Probleme mehr!
    Und ich habe nicht nur CSS für die Breite und Farben und so weiter,
    sondern ja auch noch CSS, um Symbole vor die "Labels" zu bekommen!

    Es funktioniert super mit Version #2!

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 5. Juli 2025 um 08:30

    Mitleser Es ist durchaus möglich, dass dieses Problem mit dem verzögertem Anzeigen der Counter
    [Anzahl der beinhaltenden Ordner sowie aus der Anzahl der beinhaltenden Lesezeichen],
    bzw. erst beim zweiten Mal öffnen des betreffenden Popups (z.B. Lesezeichen), nur auf Windowssystemen auftritt.

    Scheinbar besteht die Lösung darin, das "Event" 'popupshowing' in 'popupshown'.

    Das "Event" auszulösen, bevor und nachdem das Popup-Menü vollständig angezeigt wird,
    macht meiner Meinung keinen Sinn.


    Und BrokenHart hat hier ja recht gut erklärt, warum das "Event" erst nach dem vollständigen Anzeigen
    des Menüs ausgelöst werden sollte.

    Zitat von BrokenHeart

    In beiden FF-Versionen gibt es ein Attribut hasbeenopened des Menü-Popups, welches gesetzt wird, wenn man erstmalig das Popup aufgerufen hat. Deshalb muss hier ein zweites mal der Button betätigt werde, damit das Skript, so wie es jetzt ist, funktioniert.

    Da es hier um Millisekunden geht, so denke ich, sieht man das mit der Verzögerung nicht.
    Man bekommt es einfach nicht mit.

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 4. Juli 2025 um 23:31

    BrokenHeart
    Mir war, ist der Unterschied von popupshowing vs. popupshown nicht klar gewesen!

    Zitat von BrokenHeart

    Du hast auch die Klammern vergessen:

    Korrigiert!

    JavaScript
        if(bmbMenu) {
          bmbMenu.addEventListener('popupshown', onPopupShowing );  //--- 'popupshowing' -> 'popupshown'
          }
        if(bookMenu) {
          bookMenu.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown'
          }
        if(persToolBar) {
          persToolBar.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown'
        }

    So funktioniert es. Auch wenn ich die Lesezeichen über den Button aufrufe!


    Nachtrag

    Dieser komische doppelte Aufruf ist bei mir nicht nötig,
    aber auch so funktioniert es.

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 4. Juli 2025 um 23:01

    Oh, es geht!

    Code
            if(bmbMenu)
                bmbMenu.addEventListener('popupshown', onPopupShowing );  //--- 'popupshowing' -> 'popupshown' 
            if(bookMenu)
                bookMenu.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown'
            if(persToolBar)
                persToolBar.addEventListener('popupshown', onPopupShowing );  //--- 'popupshowing' -> 'popupshown'

    Bei erstmaligem Aufruf der Lesezeichen werden alle Counter angezeigt!


    Mit ...

    Code
            if(bmbMenu)
            	bmbMenu.addEventListener('popupshowing', onPopupShowing );
                bmbMenu.addEventListener('popupshown', onPopupShowing );  //--- 'popupshowing' -> 'popupshown' 
            if(bookMenu)
                bookMenu.addEventListener('popupshown', onPopupShowing ); //--- 'popupshowing' -> 'popupshown'
            if(persToolBar)
                persToolBar.addEventListener('popupshowing', onPopupShowing ); 

    ... wird dann gar nichts mehr angezeigt.

    Komplettes Skript inkl. Icons?


    Und die Französin sagt:

    Zitat

    Der Unterschied zwischen den beiden Event-Listenern in JavaScript besteht im Zeitpunkt, zu dem das Event ausgelöst wird:

    1. popupshowing: Dieses Event wird ausgelöst, wenn das Popup-Menü gerade dabei ist, angezeigt zu werden, aber noch nicht vollständig sichtbar ist. Es ist ein Event, das den Beginn des Anzeigeprozesses signalisiert. Dies kann nützlich sein, wenn du bestimmte Aktionen ausführen möchtest, bevor das Menü vollständig sichtbar ist, wie z.B. das Vorbereiten von Inhalten oder das Durchführen von Initialisierungen.
    2. popupshown: Dieses Event wird ausgelöst, nachdem das Popup-Menü vollständig angezeigt wurde. Es signalisiert das Ende des Anzeigeprozesses. Dies ist nützlich, wenn du Aktionen ausführen möchtest, die darauf warten müssen, dass das Menü vollständig sichtbar ist, wie z.B. das Fokussieren eines bestimmten Elements im Menü oder das Ausführen von Animationen.

    Zusammengefasst:

    • popupshowing: Wird ausgelöst, wenn das Popup-Menü gerade dabei ist, angezeigt zu werden.
    • popupshown: Wird ausgelöst, nachdem das Popup-Menü vollständig angezeigt wurde.

    Je nach Anwendungsfall kannst du den geeigneten Event-Listener wählen, um sicherzustellen, dass deine Aktionen zum richtigen Zeitpunkt ausgeführt werden.

    Und nach BrokenHearts Erklärung ist nun auch klar, warum es popupshonwn heißen muss.


    Zitat von grisu2099

    Bringt hier keine Änderung... :/

    Nanana, Cache geleert?

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 4. Juli 2025 um 20:45

    @Horstmann Ich habe nun mehrere ältere Versionen den Skripts durchprobiert, über all das Gleiche.
    Ich denke, es wird so sein, wie von BrokenHeart beschrieben.

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 4. Juli 2025 um 16:10
    Zitat von Horstmann

    Und wenn ihr jetzt noch kurz das Script von Mitleser hier testen könntet

    Ist auch mit diesem Skript so.

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 4. Juli 2025 um 14:58
    Zitat von Horstmann

    ... oder beschreiben welche 3 Einträge zuerst geladen werden?

    Sorry.
    Hier mal ein Bild.

    Und die Counter ab dem zweiten Separator werden erst beim zweiten Mal öffnen angezeigt.
    Schon seltsam.

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

    • Mira_Belle
    • 4. Juli 2025 um 09:05
    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.

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 4. Juli 2025 um 09:01

    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:

    JavaScript
      setTimeout(function() {
        setFunction();
      },10);

    ... 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
    (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);
        }
      }
    })();
    Alles anzeigen

    icons.zip

  • Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

    • Mira_Belle
    • 3. Juli 2025 um 23:53

    Ist es nur bei mir so, dass beim Öffnen erst einmal nur bei den oberen drei "Einträgen" die "Werte" angezeigt werden
    und erst beim zweiten Mal öffnen, dann bei allen Ordner?

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

    • Mira_Belle
    • 3. Juli 2025 um 23:45
    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.

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

    • Mira_Belle
    • 3. Juli 2025 um 22:17
    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.

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

    • Mira_Belle
    • 3. Juli 2025 um 22:08

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

    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!

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

    • Mira_Belle
    • 3. Juli 2025 um 21:18

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

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

    • Mira_Belle
    • 2. Juli 2025 um 21:15
    Zitat von FuchsFan

    Hast du gut gemacht. :thumbup:



    Was?
    Die ganze Arbeit hatte doch @Horstmann:!:

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

    • Mira_Belle
    • 2. Juli 2025 um 08:26

    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:!:

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

    • Mira_Belle
    • 1. Juli 2025 um 19:53

    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.

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

    • Mira_Belle
    • 1. Juli 2025 um 18:22

    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
  • Suche Lösung per CSS oder JS damit sich die Menüs "soft" öffnen.

    • Mira_Belle
    • 1. Juli 2025 um 16:57
    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.

Unterstütze uns!

Jährlich (2026)

69,4 %

69,4% (538,17 von 775 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon