[WEB] Hamburger menu aanpassen aan de achtergrond

Webdesigners houden steeds meer rekening met het feit dat websites ook veel op tablets en telefoons worden bekeken. Een belangrijk verschil tussen de tablet/mobile-versie en desktop-variant van de website is meestal het menu. Zodra je scrollt, verdwijnt het menu en maakt het plaats voor drie zwarte horizontale streepjes: het hamburgermenu. Deze scrollt mee en blijft altijd bovenaan in een hoek staan. Als je erop klikt, verschijnt er een overzicht van de menu-items.

Als je scrollt, kan het voorkomen dat de achtergrondkleur en de kleur van het hamburgermenu hetzelfde zijn. Als de achtergrond zwart is, en het hamburgermenu ook, is het onzichtbaar geworden. Dit kun je voorkomen met de CSS property mix-blend-mode. Dit resulteert een kleur op basis van de achtergrond en de voorgrond, die wordt toegepast op de color en background-color op het overlappende gedeelte. Deze pas je toe op het element dat op de achtergrond staat. Zie voorbeeld:




Zoals je ziet, wordt het hamburgermenu op een zwarte achtergrond wit, en op een witte achtergrond zwart. De mix-blend-mode is ingesteld op difference. Deze zorgt ervoor dat alle bovenliggende elementen een kleur krijgen die tegenovergesteld is van de achtergrond. Stel dat de achtergrond RGB(255, 255, 255) (wit) is, dan wordt de voorgrond RGB(0, 0, 0) (zwart). Is de achtergrond RGB(0, 255, 0) (groen), dan wordt de voorgrond RGB(255, 0, 255) (paars). Alle kleuren bij elkaar opgeteld (achtergrond + voorgrond) komen uit op 256. Dat is in sommige gevallen echter niet helemaal gewenst. Als de achtergrond namelijk RGB(128, 128,128) (grijs) is, is het verschil namelijk ook RGB(128, 128, 128), waardoor de achter- en voorgrond tegen elkaar wegvallen. Het menu is dan onzichtbaar.

Om dit op te lossen, kun je voor grijze achtergronden beter kiezen voor een andere optie dan difference. Bijvoorbeeld screen. De kleur die je hieruit krijgt komt overeen met de kleur die zou verschijnen als beide kleuren voor een projectiescherm worden gehouden. Dan krijg je het volgende resultaat.