216 lines
5.6 KiB
Markdown
216 lines
5.6 KiB
Markdown
# 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)
|
|
|
|
1. **Dateien hochladen:**
|
|
```
|
|
/SiteAssets/megamenu/megamenu-classic.js
|
|
/SiteAssets/megamenu/megamenu-classic.css
|
|
```
|
|
|
|
2. **Master Page bearbeiten:**
|
|
```html
|
|
<!-- 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
|
|
|
|
```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
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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
|
|
|
|
```css
|
|
/* 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
|
|
|
|
```javascript
|
|
// 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:
|
|
|
|
```javascript
|
|
// Überschreibe die getTermUrl Funktion
|
|
window.MegaMenuGetTermUrl = function(term) {
|
|
var termName = term.get_name();
|
|
// Eigene URL-Logik
|
|
return '/custom-pages/' + termName.toLowerCase() + '.aspx';
|
|
};
|
|
```
|
|
|
|
### Mehrsprachigkeit
|
|
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
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
|
|
|
|
1. **Berechtigungen:** Benutzer benötigen Leserechte auf den Term Store
|
|
2. **Performance:** Bei großen Term Sets kann das Laden länger dauern
|
|
3. **Caching:** SharePoint cached Taxonomy-Daten - Änderungen können verzögert sichtbar werden
|
|
4. **Responsive:** Das Menü ist für mobile Geräte optimiert
|
|
|
|
## 🔄 Migration von SPFx Version
|
|
|
|
Falls Sie von der SPFx-Version migrieren:
|
|
|
|
1. SPFx ApplicationCustomizer deaktivieren
|
|
2. Klassische Dateien hochladen und einbinden
|
|
3. Konfiguration anpassen (gleiche Term Sets verwendbar)
|
|
4. Testen und CSS bei Bedarf anpassen
|
|
|
|
## 📞 Support
|
|
|
|
Bei Problemen:
|
|
1. Debug-Modus aktivieren
|
|
2. Browser-Konsole prüfen
|
|
3. Term Set Struktur validieren
|
|
4. Dateipfade und Berechtigungen überprüfen |