SharePoint MegaMenu Extension

Version: 1.0.2
Framework: SharePoint Framework (SPFx) 1.4.1
Node.js: v8.17.0

Eine moderne, barrierefreie Mega-Menü-Lösung für SharePoint 2019 oder SharePoint SE als ApplicationCustomizer Extension.

🌟 Features

• 3-stufige Navigationshierarchie basierend auf SharePoint Managed Metadata (Taxonomy)
• Responsive Design mit automatischer Anpassung an verschiedene Bildschirmgrößen
• Barrierefreiheit mit vollständiger Tastaturnavigation und Screenreader-Unterstützung
• Einstellungs-Panel für Administratoren zur Konfiguration
• Externe CSS-Unterstützung für individuelle Anpassungen
• Office UI Fabric Integration für konsistente SharePoint-Optik

📋 Voraussetzungen

• SharePoint 2019 oder SharePoint SE (Subscription Edition)
• Node.js v8.17.0 (empfohlen)
• SharePoint Framework Development Tools (SPFx 1.4.1)

🚀 Installation & Entwicklung

1. Repository klonen und Abhängigkeiten installieren

git clone <repository-url>
cd MegaMenu
npm install

2. Entwicklungsserver starten

gulp serve

3. Produktionspaket erstellen

gulp clean
gulp bundle --ship
gulp package-solution --ship

📁 Projektstruktur

src/
├── extensions/
│   └── megaMenu/
│       ├── MegaMenuApplicationCustomizer.ts    # Haupteinstiegspunkt
│       ├── MegaMenuRenderer.ts                 # Menü-Rendering-Logik
│       ├── MegaMenuSettings.ts                 # Einstellungs-Panel
│       └── MegaMenu.css                        # Styling
├── services/
│   ├── TaxonomyNavigationService.ts           # Taxonomy-Datenabfrage
│   ├── UserCustomActionService/               # UserCustomAction-Verwaltung
│   └── ...
└── deployment/
    ├── add-megamenu.ps1                       # Installations-Script
    └── remove-megamenu.ps1                    # Deinstallations-Script

⚙️ Konfiguration

Einstellungs-Panel (Admin-Bereich)

Das MegaMenu verfügt über ein Einstellungs-Panel, das über das Zahnrad-Icon (⚙️) im Menü zugänglich ist:

1. Name des Navigations-Termsets: Der Name des Managed Metadata Termsets, das als Datenquelle dient
2. Pfad zu zusätzlicher CSS-Datei: Optional - URL zu einer benutzerdefinierten CSS-Datei

PowerShell-Deployment

# Installation
.\src\deployment\add-megamenu.ps1

# Deinstallation  
.\src\deployment\remove-megamenu.ps1

🎨 Anpassungen

CSS-Customization

Das MegaMenu kann über externe CSS-Dateien angepasst werden. Wichtige CSS-Klassen:

/* Haupt-Container */
#Mega-Menu { }

/* Top-Level Menüpunkte */
#Mega-Menu > ul > li > a { }

/* Mega-Menü Dropdown */
.mega-menu { }

/* Kategorien im Dropdown */
.mega-menu-category { }

/* Links in Kategorien */
.mega-menu-category ul li a { }

/* Einstellungs-Panel */
.mm-settings-panel { }

Accessibility Features

• Skip-Links für Screenreader
• ARIA-Rollen und Labels
• Fokus-Management mit sichtbaren Fokus-Indikatoren
• Tastaturnavigation mit Tab/Shift+Tab/Escape
• High Contrast Modus Unterstützung

🔧 Build-Befehle

Befehl	Beschreibung
gulp serve	Entwicklungsserver mit Live-Reload
gulp build	Entwicklungs-Build (Debug-Modus)
gulp bundle --ship	Produktions-Build (Optimiert)
gulp package-solution --ship	SharePoint Package (.sppkg) erstellen
gulp clean	Build-Artifacts löschen
gulp test	Unit-Tests ausführen

📦 Deployment

1. Paket erstellen:

   gulp clean && gulp bundle --ship && gulp package-solution --ship
   

2. SharePoint App Catalog:

   • .sppkg Datei aus sharepoint/solution/ hochladen
   • App genehmigen und für alle Sites verfügbar machen

3. Site-spezifische Aktivierung:

   • PowerShell-Scripts verwenden

🐛 Troubleshooting

Häufige Probleme

Problem: Menü wird nicht angezeigt
Lösung: Termset-Name in den Einstellungen prüfen

Problem: CSS-Styling funktioniert nicht
Lösung: Externe CSS-URL und CORS-Einstellungen überprüfen

Problem: Build-Fehler
Lösung: Node.js Version prüfen (v8.17.0 empfohlen)

Debug-Modus

# Detaillierte Build-Ausgabe
gulp bundle --verbose

# TypeScript-Fehler anzeigen  
gulp build

🔄 Versionshistorie

v1.0.2 (Aktuell)

• Einstellungs-Panel implementiert
• Fokus-Management verbessert
• CSS-Optimierungen für SharePoint-Konsistenz
• Barrierefreiheit-Verbesserungen

v1.0.1

• Responsive Design hinzugefügt
• Performance-Optimierungen

v1.0.0

• Initiale Release
• 3-stufige Navigation
• Grundlegende Accessibility

👥 Mitwirkende

• Entwicklung: Matthias Glubrecht
• Framework: SharePoint Framework (Microsoft)
• UI: Office UI Fabric (Microsoft)

📄 Lizenz

tbd

🆘 Support

Bei Fragen oder Problemen:

1. Issues im Repository erstellen
2. Dokumentation und Troubleshooting-Bereich prüfen