Navigationstemplates:
nav_default_nature
: Hauptnavigationnav_default_nature_aside
: Unterseiten-NavigationIndividuelle Templates:
mod_navigation_nature
: Hauptnavigationmod_navigation_nature_aside
: Unterseiten-NavigationDieses 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
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');
});
});