HennWeb

Original: https://www.drweb.de/responsive-navigation-css-dropdown-menue/

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.

header_menu.html

<style>
/* Soucre Code: https://www.drweb.de/responsive-navigation-css-dropdown-menue/ */
@charset "UTF-8";
div.breadcrumbs { 
	border-top:0 !important;
	margin-bottom: 1.6em !important;
}
 
* {
  box-sizing: border-box;
}
 
.main-navigation {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
 
ul {
  margin: 0;
  padding: 0;
}
 
.menu {
  display: flex;
  flex-direction: column;
}
.menu li {
  display: block;
  list-style-type: none;
  text-transform: uppercase;
}
.menu li a {
  display: flex;
  text-align: center;
  text-decoration: none;
  color: #777;
  padding: 1rem;
}
.menu li a:hover {
  background: #777 !important;
  color: #fff !important;
  text-decoration:none;
}
 
@media (min-width: 800px) {
  .menu {
    flex-direction: row;
    justify-content: space-between;
  }
}
.menu-item-has-children > a:after {
  font-family: "Genericons";
  content: "▽";
  padding: 1px 3px;
}
 
nav ul ul {
  display: none;
}
nav li { margin:0;}
@media (min-width: 800px) {
  nav ul ul {
    display: none;
    position: absolute;
  }
}
nav ul li:hover > ul {
  display: block;
  color: #fff;
  padding-left: 2rem;
}
 
@media (min-width: 800px) {
  nav ul li:hover > ul {
    padding-left: 0 !important;
    background: #777;
  }
 
  nav ul li:hover > ul a {
    color: #fff !important;
  }
 
  .sub-menu li {
    display: flex;
    padding-right: 2em;
  }
  .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: "Genericons";
    content: 0xEF 0x90 0xAE;
    padding: 1px;
    transform: rotate(-90deg);
  }
}
</style>
 
<nav class="main-navigation">
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li class="menu-item-has-children"><a href="#">Hobbys</a>
      <ul class="sub-menu">
        <li><a href="doku.php?id=ahnenforschung">Ahnenforung</a></li>
        <li><a href="doku.php?id=amateurfunk">Amateurfunk</a></li>
	<li><a href="doku.php?id=carneval">Carneval</a></li>
	<li><a href="doku.php?id=geocacheing">GEO Caching</a></li>
	<li><a href="doku.php?id=programmieren">Programmieren</a></li>
      </ul>
    </li>
    <li class="menu-item-has-children"><a href="#">Über mich</a>
      <ul class="sub-menu">
         <li><a href="doku.php?id=ueber_mich">Allgemein</a></li>
         <li><a href="doku.php?id=transsexualitaet">Transsexualität</a></li>
	 <li><a href="doku.php?id=memoiren">Memoiren</a></li>
         <li><a href="doku.php?id=sternzeichen">Sternzeichen</a></li>
      </ul>
    </li>
    <li><a href="doku.php?id=kontakt">Kontakt</a></li>
  </ul>
</nav>

Es ist keine autom. Menüstruktur Erstellung. Ihr müsst die Menüpunkte mit der Hand anpassen.

Die Datei /lib/tpl/dokuwiki/tpl_headler.html anpassen.
Dazu am Ende der Datei - aber vor <!– BREADRUMBS –> folgendes einfügen:

<div class="pad group" style="z-index: 1000; clear:both; content: ''; position:relative; ">
     <?php tpl_includeFile('header_menu.html') ?>
<div>