Heute möchte ich euch zeigen wie man ein Full Screen Menu in Divi erstellen könnt. Full Screen Menus sind die wo ein Icon wie ein Hamburgermenu irgendwo sichtbar ist, und wenn man da drauf klickt öffnet sich ein Overlay (das alles verdeckt) und darin sind dann die Menupunkte.
Ich liebe diese Menuart denn diese langweiligen Megamenu oder Drop Down Menu sind einfach nur noch zum einschlafen.
Also wer gerne mal ein anderes Menu haben möchte, der hat mit dieser Lösung viel Spass
Video
Menu erstellen
Zuerst erstellt ihr über den Divi Theme Builder den Headbereich und baut dort dann auch das Menu Modul ein.
Section Settings
In der Sektion in der sich das Menu befindet, gebt ihr nun den Klassenname ein
Eigene CSS Klasse:
1 | cb-hamburgermenu |
Row Setting
In er Zeile der Row geht ihr unter Mein Element CSS und gebt dann den folgenden Befehl ein
Custom CSS / Main Element:
1 | display: flex; |
CSS Modul Code
Ein Code Modul unter das Menu Modul einbauen und dann zwischen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <style> /*****************************************/ /*********| FULLSCREEN MENU CSS |*********/ /*****************************************/ /* Move the hamburger to the right of the header */ .cb-hamburgermenu .et_pb_menu__wrap { justify-content: flex-end !important; } /* Hide the desktop menu */ .cb-hamburgermenu .et_pb_menu__wrap .et_pb_menu__menu { display: none !important; } /* Force the mobile version of the menu */ .cb-hamburgermenu .et_pb_menu__wrap .et_mobile_nav_menu { display: block !important; align-items: center !important; } /* Fullscreen Menu Style when Opened*/ .cb-hamburgermenu .opened #mobile_menu1 { width: 100vw !important; /* Make it span the full width of the viewport */ position: fixed !important; top: 0em !important; left: 0vw !important; height: 100vh !important; /* Make it span the full height of the viewport */ display: flex !important; justify-content: center !important; flex-direction: column !important; transition: visibility 0.3s, opacity 0.3s ease-in-out; /* Animate the menu to fade in */ padding: 0 !important; background-color: #171717 !important; /* Fullscreen menu background color */ } /* Show fullscreen menu */ .cb-hamburgermenu .opened #mobile_menu1 { opacity: 1 !important; /* Make it visible by setting opacity to 1 */ visibility: visible !important; /* Show the menu */ } /* Hide and fade out the Menu when closed */ .cb-hamburgermenu .closed #mobile_menu1 { opacity: 0 !important; /* Make it invisible by setting opacity to 0 */ visibility: hidden !important; /* Hide the menu */ transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out !important; /* Animate the menu to fade out */ } /* Remove Bullets next to LI Elements */ .cb-hamburgermenu #mobile_menu1 li { list-style: none !important; text-align: center !important; width: 100%; } /* Make sure that the menu is above other elements */ .cb-hamburgermenu .et_pb_menu__wrap span.mobile_menu_bar { z-index: 999999 !important; } /* Set the close icon for when the menu is open */ .cb-hamburgermenu .et_pb_menu__wrap .opened .mobile_menu_bar:before { color: white !important; /* Icon color */ content: "\4d" !important; /* Divi font icon to use for the close icon */ left: -40px; /* Close icon position. You might need to play with this to make it look right */ } /* Keep hamburger icon in fixed position on mobile */ .cb-hamburgermenu .opened .mobile_menu_bar { position: fixed !important; } /* Remove mobile menu border */ .cb-hamburgermenu .et_mobile_menu { border-top: none; } /* Make sure the menu items do not show a background */ .cb-hamburgermenu .et_mobile_menu .menu-item-has-children > a { background-color: transparent; } /* Remove the hover background from the menu items and add hover animation */ .et_mobile_menu li a:hover { background-color: transparent; opacity: 1; transition: transform 0.3s ease-in-out !important; /* Animated the menu item when hovered */ transform: scale( 1.15 ); /* Enlarge the hovered menu item by 15% when hovered */ } /* Remove menu item bottom borders */ .cb-hamburgermenu .et_mobile_menu li a { border-bottom: none; } </style> |
0 Kommentare