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>
Diese Website verwendet Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer zu. Außerdem bestätigen Sie, dass Sie unsere Datenschutzbestimmungen gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website.Weitere Information
wiki_anleitung:menue (67 views) · Zuletzt geändert: 03/01/2021 10:18 von conny