Ich habe ja schon mal gezeigt wie man in DIVI ein Full Screen Mega Menu (DIVI Full Screen Menu erstellen) erstellen kann. Damals konnte man die Seite aber nicht designen sondern man konnte nur Farben ändern. Es lief alles über das normale Menu Modul ab.

In der heutigen Anleitung aber haben wir die absolute völlige Freiheit und du kannst die ganze Seite so designen wie du willst, mit allen Module die es für DIVI gibt.

Video

Mega Menu erstellen

Erstelle unter DIVI Builder im Footer ein Mega Menu. Erstelle dafür eine neue Sektion und designe sie mit den DIVI Module, setze im CSS die Grösse der Sektion auf 100vh

min-height:100vh;

Danach gib der ganzen Sektion noch eine eigene CSS Klasse:

et-lb-content-1

Icon in Head

Im DIVI Builder erstelle im Header ein Menu und platziere entweder ein Icon (Hamburger-Menu) oder was ähnliches und verknüpfe es mit der CSS Klasse:

et-lb-btn-1

Javascript

<script>
(function($) {
  $(document).ready(function() {
	 $('<span class="et-lb-close">M</span>').prependTo('body:not(.et-fb-root-ancestor) [class*="lb-content"]  > .et_pb_row:first-child');

	if ($('body:not(.et-fb-root-ancestor)').has('#et-boc').length) {
		$('body:not(.et-fb-root-ancestor) [class*="et-lb-content"]').wrapAll('<div id="et-boc" class="et-lb-wrapper"><div class="et-l"></div></div>')
		$('.et-lb-wrapper').appendTo('#et-main-area');
	} else {
		$('body:not(.et-fb-root-ancestor) [class*="et-lb-content"] ').appendTo('#et-main-area');
	}
	  
    $("[class*='et-lb-btn']").each(function(index, element) {
      var classes = $(element).attr('class').match(/et-lb-btn\-(\w*)/);
      if (classes !== null) {
          $(element).on('click', function(e){
            e.preventDefault();
            $('.et-lb-content-' + classes[1]).toggleClass('et-lb-open');
          });
		  $('.et-lb-close').click(function(){
			  $("[class*='et-lb-content']").removeClass('et-lb-open');
		  });
      }
    });
  });
})(jQuery);
</script>

CSS

body:not(.et-fb-root-ancestor) [class*="et-lb-content"],
.et-lb-wrapper {
  position: fixed !important;
  visibility: hidden;
  top: 0px;
  z-index: 999999;
  min-height: 100%;
  transition: all 0.2s 0s;
  width: 100%;
}
body:not(.et-fb-root-ancestor) [class*="et-lb-content"] .et_pb_row {
  position: relative;
  top: 50px;
}
.et-lb-open {
  visibility: visible !important;
  width: 100%;
}
span.et-lb-close {
  font-size: 46px;
  right: -1vw;
  margin-top: -51px;
  display: block;
  color: #fff; /* COLOR OF THE CLOSING ICON*/
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  font-family: etmodules;
  z-index: 99999999999999;
  position: absolute;
}
body:not(.et-fb-root-ancestor) [class*="et-lb-content"]:not(.et-lb-open) {
  transform: scale(0.3);
  opacity: 0;
}
body:not(.et-fb-root-ancestor) [class*="et-lb-btn"] {
  cursor: pointer;
}