Initial commit
This commit is contained in:
Torsten Brendgen
216
classic/classic-deployment.md
Normal file
216
classic/classic-deployment.md
Normal file
@@ -0,0 +1,216 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user