Navigation

Navigationstemplates:

  • nav_default_nature: Hauptnavigation
  • nav_default_nature_aside: Unterseiten-Navigation

Individuelle Templates:

  • mod_navigation_nature: Hauptnavigation
  • mod_navigation_nature_aside: Unterseiten-Navigation

Megamenü

Dieses Feature ist erst ab der NATURE Theme Version 1.6.0 verfügbar.

Um ein Megamenü darzustellen wählst du beim Modultyp Navigationsmenü das Template mod_navigation_nature_megamenu aus.

Du kannst das Megamenü über Variablen in der _custom_variables.scss individuell anpassen:

$megamenu-width: 100%; // Breite des Megamenü
$megamenu-right: 0px; // Abstand zum rechten Bildschirmrand
$megamenu-background-color: $boxes-background; // Hintergrundfarbe
$megamenu-background-color-home: $megamenu-background-color; // Hintergrundfarbe nur für die Startseite
$megamenu-item-width: 20%; // Breite der Spalten, z. B. 20% für 5 Spalten
$megamenu-padding: 20px 60px 5px 30px; // Innenabstand oben, rechts, unten, links
$megamenu-link-lvl2-color: #000; // Schriftfarbe Level 2
$megamenu-link-lvl2-color-hover: $primary; // Schriftfarbe Level 2 bei Mouse Hover
$megamenu-link-lvl3-color: #4a4a4a; // Schriftfarbe Level 3
$megamenu-link-lvl3-color-hover: $link-hover; // Schriftfarbe Level 3 bei Mouse Hover
$megamenu-border-color: $primary; // Rahmenfarbe

Weitere Anpassungen

Wie kann ich anpassen, dass das Megamenü bei Hover stehen bleibt?

Lege dafür eine .js-Datei, z. B. eine custom.js, mit folgendem Inhalt an. Die Datei kannst du im Seitenlayout bei Externe JavaScripts einbinden.

jQuery(document).ready(function($) {
  $('.megamenu .level_1 > .navbar-item').hover(function() {
    $('.navbar-dropdown.level_2').css('display', 'none');
    $(this).find('.navbar-dropdown.level_2').css('display', 'flex');
  });

  $('body').click(function() {
    $('.navbar-dropdown.level_2').css('display', 'none');
  });
});