Benutzer-Werkzeuge

Webseiten-Werkzeuge


wiki_anleitung:menue:version2

Version 2

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.

Jetzt noch in DokuWiki einbinden

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>
Cookies helfen bei der Bereitstellung von Inhalten. Diese Website verwendet Cookies. Mit der Nutzung der Website erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Computer gespeichert werden. Außerdem bestätigen Sie, dass Sie unsere Datenschutzerklärung gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website. Weitere Information
wiki_anleitung:menue (36 views) · Zuletzt geändert: 03/01/2021 10:18 von conny