SPFx-Projekte/Megamenu

Fork 0

Files

Torsten Brendgen bc1258ae76 Initial commit

2026-04-13 10:26:01 +02:00

5.6 KiB

Raw Permalink Blame History

MegaMenu für klassische SharePoint-Seiten

Diese Dateien ermöglichen die Verwendung des MegaMenus auf klassischen SharePoint-Seiten (2019/SE) ohne SPFx Framework.

📁 Dateien

megamenu-classic.js - Hauptlogik für klassische Seiten
megamenu-classic.css - Styling für klassische Seiten
classic-deployment.md - Diese Dokumentation

🚀 Installation

Option 1: Master Page (empfohlen)

Dateien hochladen:

/SiteAssets/megamenu/megamenu-classic.js
/SiteAssets/megamenu/megamenu-classic.css

Master Page bearbeiten:

<!-- In den <head> Bereich -->
<link rel="stylesheet" type="text/css" href="/SiteAssets/megamenu/megamenu-classic.css" />

<!-- Vor dem schließenden </body> Tag -->
<script type="text/javascript" src="/SiteAssets/megamenu/megamenu-classic.js"></script>

Option 2: ScriptLink über PowerShell

# CSS hinzufügen
$web = Get-SPWeb "http://your-site-url"
$web.AlternateCSSUrl = "/SiteAssets/megamenu/megamenu-classic.css"
$web.Update()

# JavaScript als Custom Action hinzufügen
$customAction = $web.UserCustomActions.Add()
$customAction.Location = "ScriptLink"
$customAction.ScriptSrc = "/SiteAssets/megamenu/megamenu-classic.js"
$customAction.Sequence = 1000
$customAction.Update()
$web.Update()

Option 3: Content Editor Web Part

<link rel="stylesheet" type="text/css" href="/SiteAssets/megamenu/megamenu-classic.css" />
<script type="text/javascript" src="/SiteAssets/megamenu/megamenu-classic.js"></script>

⚙️ Konfiguration

Basis-Konfiguration

<script type="text/javascript">
    // Konfiguration vor dem Laden des Scripts setzen
    window.MegaMenuConfig = {
        termSetName: 'Navigation',           // Name des Taxonomy Term Sets
        cssUrl: '',                          // Optional: Externe CSS-Datei
        containerId: 's4-titlerow',          // SharePoint Container ID
        debug: true                          // Debug-Modus aktivieren
    };
</script>
<script type="text/javascript" src="/SiteAssets/megamenu/megamenu-classic.js"></script>

Container IDs für verschiedene SharePoint-Versionen

SharePoint Version	Container ID	Beschreibung
2019	`s4-titlerow`	Standard Titel-Bereich
SE	`suiteBarTop`	Suite Bar Bereich
Custom	`custom-menu-container`	Eigener Container

Term Set Konfiguration

Das MegaMenu liest die Navigation aus einem Managed Metadata Term Set:

Navigation (Term Set)
├── Produkte (Level 1)
│   ├── Software (Level 2)
│   │   ├── Office 365 (Level 3) → URL
│   │   └── SharePoint (Level 3) → URL
│   └── Hardware (Level 2)
│       ├── Laptops (Level 3) → URL
│       └── Server (Level 3) → URL
└── Services (Level 1)
    └── Consulting (Level 2)
        └── SharePoint Beratung (Level 3) → URL

🎨 Anpassungen

CSS Customization

/* Eigene Farben */
#Mega-Menu-Classic {
    background: #your-color;
}

#Mega-Menu > ul > li > span[role="menuitem"] {
    color: #your-text-color;
}

/* Eigene Schriftarten */
#Mega-Menu {
    font-family: 'Your Font', Arial, sans-serif;
}

JavaScript Events

// Nach der Initialisierung eigene Logik hinzufügen
document.addEventListener('DOMContentLoaded', function() {
    // Warten bis MegaMenu geladen ist
    setTimeout(function() {
        if (window.MegaMenuClassic) {
            console.log('MegaMenu ist bereit!');
            // Eigene Anpassungen hier...
        }
    }, 1000);
});

🔧 Erweiterte Konfiguration

Custom URL Mapping

Die URLs für die Navigation-Links können angepasst werden:

// Überschreibe die getTermUrl Funktion
window.MegaMenuGetTermUrl = function(term) {
    var termName = term.get_name();
    // Eigene URL-Logik
    return '/custom-pages/' + termName.toLowerCase() + '.aspx';
};

Mehrsprachigkeit

window.MegaMenuConfig = {
    termSetName: _spPageContextInfo.currentUICultureName === 'de-DE' ? 'Navigation_DE' : 'Navigation_EN',
    // ... andere Konfigurationen
};

🐛 Troubleshooting

Häufige Probleme

Problem: Menü wird nicht angezeigt
Lösung:

Browser-Konsole auf Fehler prüfen
Taxonomy Term Set Name überprüfen
Berechtigungen für Term Store prüfen

Problem: JavaScript-Fehler "SP is not defined"
Lösung:

Script erst nach SharePoint-Bibliotheken laden
SP.SOD.executeFunc verwenden

Problem: Styling funktioniert nicht
Lösung:

CSS-Pfad überprüfen
Cache leeren
CSS-Spezifität erhöhen

Debug-Modus

window.MegaMenuConfig = {
    debug: true,  // Aktiviert Console-Logging
    // ... andere Optionen
};

📝 Browser-Unterstützung

Internet Explorer 11+
Microsoft Edge (alle Versionen)
Chrome 60+
Firefox 55+
Safari 12+

⚠️ Wichtige Hinweise

Berechtigungen: Benutzer benötigen Leserechte auf den Term Store
Performance: Bei großen Term Sets kann das Laden länger dauern
Caching: SharePoint cached Taxonomy-Daten - Änderungen können verzögert sichtbar werden
Responsive: Das Menü ist für mobile Geräte optimiert

🔄 Migration von SPFx Version

Falls Sie von der SPFx-Version migrieren:

SPFx ApplicationCustomizer deaktivieren
Klassische Dateien hochladen und einbinden
Konfiguration anpassen (gleiche Term Sets verwendbar)
Testen und CSS bei Bedarf anpassen

📞 Support

Bei Problemen:

Debug-Modus aktivieren
Browser-Konsole prüfen
Term Set Struktur validieren
Dateipfade und Berechtigungen überprüfen

5.6 KiB Raw Permalink Blame History