Neues Menü FullScreenMenu
Allgemein
Name FullScreenMenu
Settings:
-
Template / Design (sehr viele zur Auswahl, siehe unten --> Beispiele). -
Hamburger Icon Design / Effekt.
Zum Beachten: ich denke die einzelne Templates müsste eigene JS Dateien mitbringen. Es sein denn es ist nicht viel, was die einzelnen Designs per JS machen, dann doch alles in eine generelle Datei.
Zum Beachten 2: Die Icon zum öffnen und schließen bleibt die gleiche. Eventuelle Ideen gerne gesehen.
Hamburger Menü Icon
- https://codepen.io/designcouch/pen/ExvwPY Hier sind 4 schöne Animationen, die man einbauen könnte.
- https://jonsuh.com/hamburgers/ - sehr viele Animationen
Beispiele
1. Inspiration for Menu Hover Effects
- Tutorial (nicht viel): https://tympanus.net/codrops/2017/08/01/inspiration-for-menu-hover-effects/
- Demo: https://tympanus.net/Development/MenuHoverEffects/
Sehr schöne Beispiele. Man kann viele davon übernhemne. Mein Favorit, was das Design von FuulScreen Menü angeht.
2. Hamburger Menu - Pure CSS
https://codepen.io/mnunes/pen/VdRKbN - dieses Beispiel funktioniert besser mit folgendem Code:
.navigation__background {
height: 6rem;
width: 6rem;
border-radius: 50%;
position: fixed;
top: 6.5rem;
right: 6.5rem;
background-image: radial-gradient(#03A9F4, #03A9F4);
z-index: 1000;
opacity: 0; /* von mir */
transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.2s cubic-bezier(0.86, 0, 0.07, 1); /* von mir */
transition-delay: 0s,600ms; /* von mir */
}
.navigation__checkbox:checked ~ .navigation__background {
transform: scale(80);
opacity: 1;
transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); /* von mir */
}
3. Material Design Menu
https://codepen.io/arjancodes/pen/jErbyM/
Es ist zwar kein "FullScreen" Menu aber man kann das in Kombination mit 1 anwenden. Dieses Beispiel ist schlecht gebaut (HTML). Die Elemente unter dem Menü lassen sich nicht klicken (wenn das MEnü zugemacht ist... Falls man das übernehmen würde, muss man die Struktur überlegen.
4. Another menu concept
https://codepen.io/RSH87/pen/rmgYbo
Gute Idee, dass die Menüpunkte vertikal positioniert sind. So bleibt viel Spiel was die Submenüs angeht.
5. Fork This Nav
https://codepen.io/hexagoncircle/pen/OJLMgYY
Coole Effekte. Mir gefällt, wie der aktive Menüpunkt markiert wird. Andere Punkte werden "geschoben", es funktioniert wie Magneten mit gleichnamigen Polen. Die Effekte für Submenü sind auch gut, aber etwas unverständlich.
6. Kreuzbergkind Website
Gut finde ich, dass die Punkte einzeln von unten aufpoppen.
7. Full Screen Menu mit Submenüs