wiki_anleitung:menue:version2
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
wiki_anleitung:menue:version2 [02/01/2021 13:28] – angelegt conny | wiki_anleitung:menue:version2 [03/01/2021 10:18] (aktuell) – conny | ||
---|---|---|---|
Zeile 3: | Zeile 3: | ||
{{ wiki_anleitung: | {{ wiki_anleitung: | ||
- | sdgdsfgsdfg | + | Original: https:// |
+ | |||
+ | Responsive Dropdown Menü angepasst für DokuWiki. | ||
+ | |||
+ | Ich habe alles in eine Datei geschrieben. Natürlich ist es sinnvoller CSS, JS und HTML zu trennen. | ||
+ | Die Datei header_menu.html in das Verzeichnis /conf kopieren. | ||
+ | |||
+ | <code php header_menu.html> | ||
+ | |||
+ | < | ||
+ | /* Soucre Code: https:// | ||
+ | @charset " | ||
+ | div.breadcrumbs { | ||
+ | border-top: | ||
+ | margin-bottom: | ||
+ | } | ||
+ | |||
+ | * { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | .main-navigation { | ||
+ | border-top: 1px solid #ddd; | ||
+ | border-bottom: | ||
+ | } | ||
+ | |||
+ | ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .menu { | ||
+ | display: flex; | ||
+ | flex-direction: | ||
+ | } | ||
+ | .menu li { | ||
+ | display: block; | ||
+ | list-style-type: | ||
+ | text-transform: | ||
+ | } | ||
+ | .menu li a { | ||
+ | display: flex; | ||
+ | text-align: center; | ||
+ | text-decoration: | ||
+ | color: #777; | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | .menu li a:hover { | ||
+ | background: #777 !important; | ||
+ | color: #fff !important; | ||
+ | text-decoration: | ||
+ | } | ||
+ | |||
+ | @media (min-width: 800px) { | ||
+ | .menu { | ||
+ | flex-direction: | ||
+ | justify-content: | ||
+ | } | ||
+ | } | ||
+ | .menu-item-has-children > a:after { | ||
+ | font-family: | ||
+ | content: " | ||
+ | padding: 1px 3px; | ||
+ | } | ||
+ | |||
+ | nav ul ul { | ||
+ | display: none; | ||
+ | } | ||
+ | nav li { margin: | ||
+ | @media (min-width: 800px) { | ||
+ | nav ul ul { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | } | ||
+ | } | ||
+ | nav ul li:hover > ul { | ||
+ | display: block; | ||
+ | color: #fff; | ||
+ | padding-left: | ||
+ | } | ||
+ | |||
+ | @media (min-width: 800px) { | ||
+ | nav ul li:hover > ul { | ||
+ | padding-left: | ||
+ | background: #777; | ||
+ | } | ||
+ | |||
+ | nav ul li:hover > ul a { | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | |||
+ | .sub-menu li { | ||
+ | display: flex; | ||
+ | padding-right: | ||
+ | } | ||
+ | .sub-menu li:hover, .sub-menu li a:hover { | ||
+ | background: #ddd !important; | ||
+ | color: #777 !important; | ||
+ | } | ||
+ | |||
+ | nav ul ul ul { | ||
+ | margin: 0 0 0 100%; | ||
+ | box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); | ||
+ | } | ||
+ | |||
+ | .menu-item-has-children .menu-item-has-children > a:after { | ||
+ | font-family: | ||
+ | content: 0xEF 0x90 0xAE; | ||
+ | padding: 1px; | ||
+ | transform: rotate(-90deg); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <nav class=" | ||
+ | <ul class=" | ||
+ | < | ||
+ | <li class=" | ||
+ | <ul class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <li class=" | ||
+ | <ul class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | Es ist keine autom. Menüstruktur Erstellung. Ihr müsst die Menüpunkte mit der Hand anpassen. | ||
+ | |||
+ | === Jetzt noch in DokuWiki einbinden === | ||
+ | |||
+ | Die Datei / | ||
+ | Dazu am Ende der Datei - aber vor <!-- BREADRUMBS --> folgendes einfügen: | ||
+ | |||
+ | <code php> | ||
+ | <div class=" | ||
+ | <? | ||
+ | < | ||
+ | </ | ||
+ |
wiki_anleitung:menue (260 views) · Zuletzt geändert: 02/01/2021 13:28 von conny