Custom Top Navigation for Confluence - Usage
Englische Version
Basic customization of the top navigation
Adding an additional dropdown menu
Click on the "+ Menu" button
Enter a name (the name is displayed in the topnavigation)
Add content to the menu
Expand the menu
Fill your content into the textfields
Save your adjustments by pressing the button below
Set your default confluence theme to the "custom topnavigation" theme
The new menu and link are now visible in the global
 | |
|---|
Click on the images to see them in full size
Result:
Changing the color of the navbar
The navbar has a defauld ID "#edCustomappheader"(IDs start with "#"). Add this id to the CSS.
Add a background color atribute to the CSS. (#000 is the black color code in the example below)
Add a "!important" exclamation to the attribute
Save your CSS
Result:
Advanced customization of the top navigation (Custom Menu)
The documentation below is only working when Custom Menu is selected. Click here for a documentation.
Changing the colors of the menu content
Add the classes to the "Top navigation" CSS. (Each element you add to your custom menu has a class. See the class list below.)
Add a color atribute to the class. (It's important to add an !important to the CSS, because you have to overwrite the default Styling of confluence.)
Save the changes
Result:
Its important to know that each menu child element has its own CSS class. The classes are listed in the table below
Class | Type of element |
|---|---|
customTopNavigationA | Menu Link |
customTopNavigationLi | Container of Links (customTopNavigationA) |
customTopNavigationUl | Menu list header (If you ad a menu to a menu) |
Creating custom menus
Create a menu element
Add child menu elements to the main menu element
Add content to the child menu elements
Add CSS (it's recommended to copy the sample CSS from here, we used that CSS in the example below)
Save the changes (CSS and the menus)
Example configuration
Result:
Deutsche Version
Einfache Anpassung der Hauptnavigationsleiste
Hinzufügen eines weiteren dropdown Menüs
Klicken sie auf den "+ Menü" Knopf
Geben sie einen Namen ein (Der Name wird in der Hauptnavigationsleiste angezeigt)
Fügen sie dem Menü Inhalt hinzu.
Erweitern sie die Ansicht des Menüs
Fügen sie ihren Inhalt in die Textfelder ein.
Speichern sie ihre Anpassungen indem sie den darunter liegenden "Speichern" Knopf drücken.
Setzen sie ihr Confluence design auf das "custom topnavigation" design.
Das neue Menü und dessen Links sind jetzt global sichtbar.
| |
|---|
Drücken sie auf die Bilder um diese in voller Größe zu sehen.
Ergebnis:
Ändern der Farbe der Hauptnavigationsleiste
Die Navigationsleiste hat standardmäßig eine ID "#edCustomappheader"(IDs fangen mit "#" an). Fügen sie diese ID zum CSS hinzu.
Fügen sie ein Hintergrundfarbe Attribut hinzu. (#000 ist der Farbcode für die Farbe Schwarz im unteren Beispiel)
Fügen sie einen "!important" Ausruf zum Attribut hinzu.
Speichern Sie Ihr CSS.
Ergebnis:
Erweiterte Anpassung der Navigationsleiste (Custom Menu)
Die folgende Dokumentation funktioniert nur wenn Custom Menu ausgewählt ist. Eine Anleitung dazu finden sie hier.
Ändern der Farben der Elemente im Menü
Fügen Sie die Klassen zum "Top Navigation" CSS hinzu. (Jedes Element hat seine eigene CSS Klasse. Mehr Informationen in der unteren Liste.)
Fügen Sie das Farbattribut hinzu. (Es ist wichtig ein "!important" Ausruf hinzuzufügen, da die Standart Farben von Confluence überschrieben werden müssen.)
Einstellungen speichern mit drücken auf Speichern
Ergebnis:
Es ist wichtig zu wissen das jedes Element im Menü seine eigene zugewiesene CSS Klasse hat. Z.b. gehören alle Links zur Klasse "customTopNavigationA" und alle Untermenüs die Klasse "customTopNavigationUl".
Klasse | Art des Elements |
|---|---|
customTopNavigationA | Einfacher Menü Link |
customTopNavigationLi | Container welcher die Links enthält (customTopNavigationA) |
customTopNavigationUl | Untermenü (Wenn Sie ein Menü in ein Menü einfügen) |
Erstellen von eigenen Untermenüs
Erstellen Sie eine Menü Element
Fügen Sie Untermenüs hinzu
Fügen Sie den Untermenüs Inhalt hinzu
Fügen Sie CSS hinzu (Wir empfehlen fürs Erste das Beispiel CSS zu kopieren, welches hier zur Verfügung steht (im unteren Beispiel wird dieses CSS verwendet)
Speichern der Änderungen (CSS und Menüs)
Beispiel Konfiguration:
Ergebnis: