Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- sidebar2 [2021/03/04 12:10]
teutebergt [Navigation]
+++ sidebar2 [2021/05/25 08:17]
teutebergt [Navigation]
@@ Zeile 19: / Zeile 19: @@
 <div id="logo"><a href="doku.php"><img src='logo.jpg' height=128px border=0px></a></div>
-<div  class ="men" id="men0"
+<!-- die style-Angaben des details-Elements sind wichtig für die richtige Positionierung des Menüs!-->
-onmouseover="javascript:idOn('sm0')"
+<nav id=navigation_menu><div id="navigation_menu_ueber_uns"><details class ="men" style="left:0px; padding:0 0 14px 0" >
-onmouseout="javascript:idOff('sm0')"
+<summary style="padding:14px 0px">Über Uns</summary>
-><a  class ="menuA"
+<span class="newMenu">
-onmouseover="javascript:idOn('sm0')"
-onmouseout="javascript:idOff('sm0')"
-onClick="javascript:idTgl('sm0')">
-&Uuml;ber Uns</a><span id="sm0" class="menu">
-<table><tr>
-<td valign='top'>
-<big><b>Unser OV</b></big>
 <ul>
-<li><a class="intlnk" href="doku.php?id=geschichte:ueber_uns">Geschichte</a></li>
+  <li><details><summary>Aufbau</summary>
-<li>
+    <ul>
-Aufbau
+      <li><a href="doku.php?id=aufbau:uebersicht"><div>Übersicht</div></a></li>
-</li>
+      <li><details><summary>Verwaltung</summary>
-<li><a class="intlnk" href="doku.php?id=helfervereinigung">Helfervereinigung</a></li>
+        <ul>
-<li><a class="intlnk" href="doku.php?id=homepage:impressum">Impressum</a></li>
+          <li><a href="doku.php?id=aufbau:ov-stab"><div>OV-Stab</div></a></li>
-<li><a class="intlnk" href="doku.php?id=mitmachen:als_aktiver_helfer">Mitmachen</a></li>
+          <li><a href="doku.php?id=aufbau:unabhaengige_funktionen"><div>Unabhängige Funktionen</div></a></li>
+          <li><a href="doku.php?id=aufbau:beratung_und_verbindung"><div>Fachberatung</div></a></li>
+        </ul>
+      </details></li>
+      <li><details><summary>Technischer Zug</summary>
+        <ul>
+          <li><a href="doku.php?id=einheiten:technischer_zug"><div>Übersicht</div></a></li>
+          <li><a href="doku.php?id=einheiten:zugtrupp"><div>Zugtrupp</div></a></li>
+          <li><a href="doku.php?id=einheiten:bergungsgruppe"><div>Bergungsgruppe</div></a></li>
+          <li><a href="doku.php?id=einheiten:fachgruppe_notversorgung_und_notinstandsetzung"><div>Fachgruppe Notversorgung und Notinstandsetzung</div></a></li>
+          <li><a href="doku.php?id=einheiten:fachgruppe_wassergefahren"><div>Fachgruppe Wassergefahren</div></a></li>
+          <li><a href="doku.php?id=einheiten:fachgruppe_ortung"><div>Fachgruppe Ortung</div></a></li>
+          <li><a href="doku.php?id=einheiten:trupp_unbemannte_luftfahrtsysteme"><div>Trupp Unbemannte Luftfahrtsysteme</div></a></li>
+        </ul>
+      </details></li>
+      <li><details><summary>Fachzug Logistik</summary>
+        <ul>
+          <li><a href="doku.php?id=einheiten:fachzug-logistik"><div>Übersicht</div></a></li>
+          <li><a href="doku.php?id=einheiten:fachgruppe_logistik-verpflegung"><div>Fachgruppe Logistik-Verpflegung</div></a></li>
+        </ul>
+      </details></li>
+      <li><details><summary>Weitere Gruppen</summary>
+        <ul>
+          <li><a href="doku.php?id=aufbau:jugendgruppe"><div>Jugendgruppe</div></a></li>
+          <li><a href="doku.php?id=aufbau:grundausbildungsgruppe"><div>Grundausbildungs&shy;gruppe</div></a></li>
+          <li><a href="doku.php?id=aufbau:einsatzkraefte"><div>Einsatzkräfte</div></a></li>
+          <li><a href="doku.php?id=aufbau:alters_und_ehrengruppe"><div>Alters- und Ehrengruppe</div></a></li>
+        </ul>
+      </details></li>
+    </ul>
+  </details></li>
+  <li><details><summary>Das THW</summary>
+    <ul>
+      <li><a href="doku.php?id=das_thw:bundesanstalt"><div>Bundesanstalt THW</div></a></li>
+      <li><a href="doku.php?id=das_thw:struktur"><div>Aufbau</div></a></li>
+      <li><a href="doku.php?id=das_thw:anfordern"><div>Anfordern</div></a></li>
+      <li><a href="doku.php?id=das_thw:berichten"><div>Berichten</div></a></li>
+      <li><a href="doku.php?id=links:thw"><div>Links</div></a></li>
+      <li><a href="doku.php?id=das_thw:geschichte"><div>Geschichte</div></a></li>
+    </ul>
+  </details></li>
+  <li><details><summary>Mitmachen</summary>
+    <ul>
+      <li><a href="doku.php?id=mitmachen:uebersicht"><div>Aktiv Helfen</div></a></li>
+      <li><a href="doku.php?id=mitmachen:bfd"><div>Bundesfreiwilligen&shy;dienst</div></a></li>
+      <li><a href="doku.php?id=mitmachen:helfervereinigung"><div>Unterstützen</div></a></li>
+    </ul>
+  </details></li>
+  <li><details><summary>Informationen</summary>
+    <ul>
+      <li><details><summary>Nützliche Links</summary>
+        <ul>
+          <li><a href="doku.php?id=links:uebersicht"><div>Übersicht</div></a></li>
+          <li><a href="doku.php?id=links:THW"><div>THW</div></a></li>
+          <li><a href="doku.php?id=links:Feuerwehr"><div>Feuerwehr</div></a></li>
+          <li><a href="doku.php?id=links:Rettungsdienst"><div>Rettungsdienst</div></a></li>
+          <li><a href="doku.php?id=links:polizei"><div>Polizei</div></a></li>
+          <li><a href="doku.php?id=links:sonstige"><div>Sonstige</div></a></li>
+        <ul>
+      </details></li>
+      <li><a href="doku.php?id=adressen"><div>Adressen</div></a></li>
+      <li><a href="doku.php?id=der_weg_zum_ov"><div>Der Weg zu uns</div></a></li>
+      <li><a href="doku.php?id=lexikov:startseite"><div>LexikOV</div></a></li>
+      <li><a href="doku.php?id=homepage:impressum"><div>Impressum</div></a></li>
+    </ul>
+  </details></li>
+  <li><a href="doku.php?id=geschichte:ueber_uns"><div>Geschichte</div></a></li>
 </ul>
-<big><b>Das THW</b></big>
+</span></details></div>
+<div id="navigation_menu_jugend"><details class ="men" style="left:160px; padding:0 0 14px 0" >
+<summary style="padding:14px 0px">Jugend</summary>
+<span class="newMenu">
 <ul>
-<li><a class="intlnk" href="doku.php?id=das_thw:anfordern">anfordern</a></li>
+  <li><a href="doku.php?id=jugend:jugend"><div>Startseite</div></a></li>
-<li><a class="intlnk" href="doku.php?id=das_thw:bundesanstalt">Bundesanstalt</a></li>
+  <li><a href="doku.php?id=jugend:aktuelles"><div>Aktuelles</div></a></li>
-<li><a class="intlnk" href="doku.php?id=das_thw:struktur">Struktur</a></li>
+  <li><a href="doku.php?id=jugend:ausbildung"><div>Ausbildung</div></a></li>
-<li><a class="intlnk" href="doku.php?id=geschichte:das_thw">Geschichte</a></li>
+  <li><a href="doku.php?id=jugend:mitmachen"><div>Mitmachen</div></a></li>
-<li><a class="intlnk" href="doku.php?id=das_thw:links">Links</a></li>
+  <li><a href="doku.php?id=jugend:haeufige_fragen"><div>Häufige Fragen</div></a></li>
-</td><td  valign='top'>
-<b><big>Einheiten</big></b>
-<ul>
-<li><a class="intlnk" href="doku.php?id=aufbau:ov-stab">Stab</a></li>
-<li><a class="intlnk"
-href="doku.php?id=einheiten:technischer_zug">Technischer Zug</a></li>
-<ul>
-<li><a class="intlnk" href="doku.php?id=einheiten:zugtrupp">Zugtrupp</a></li>
-<li><a class="intlnk" href="doku.php?id=einheiten:bergungsgruppe">Bergungsgruppe</a>
-<li><a class="intlnk" href="doku.php?id=einheiten:fachgruppe_notversorgung_und_notinstandsetzung">Fachgruppe Notversorgung und Notinstandsetzung</a></li>
-<li><a class="intlnk" href="doku.php?id=einheiten:fachgruppe_wassergefahren">Fachgruppe Wassergefahren</a></li>
-<li><a class="intlnk" href="doku.php?id=einheiten:fachgruppe_ortung">Fachgruppe Ortung</a></li>
-<li><a class="intlnk" href="doku.php?id=einheiten:trupp_unbemannte_luftfahrtsysteme">Trupp Unbemannte Luftfahrtsysteme</a></li>
 </ul>
-<li><a class="intlnk" href="doku.php?id=einheiten:fachgruppe_logistik-verpflegung">Fachgruppe Logistik-Verpflegung</a></li>
-<br>
-<b><big>Einheiten</big></b>
+</span></details></div>
-<li><a class="intlnk" href="doku.php?id=einheiten:helferanwaerter">Helferanwärter</a></li>
-<li><a class="intlnk" href="doku.php?id=einheiten:jugendgruppe">Jugendgruppe</a></li>
-<li><a class="intlnk" href="doku.php?id=einheiten:altersgruppe">Altersgruppe</a></li>
-</ul>
-</td><td  valign='top'>
-<b><big>Kontakt</big></b>
+<!-- die style-Angaben des details-Elements sind wichtig für die richtige Positionierung des Menüs!-->
+<div id="navigation_menu_aktuelles"><details class ="men" style="left:320px; padding:0 0 14px 0" >
+<summary style="padding:14px 0px">Aktuelles</summary>
+<span class="newMenu">
 <ul>
-<li><a class="intlnk" href="doku.php?id=rightbar#adresse_kontakt">Allgemein</a></li>
+  <li><a href="doku.php?id=aktuelles:aktuelles"><div>Übersicht</div></a></li>
-<li><a class="intlnk" href="doku.php?id=funktionstraeger:uebersicht">Funktionsträger</a></li>
+  <li><details><summary>Nach Themen</summary>
-<li><a class="intlnk" href="doku.php?id=der_weg_zum_ov">Der Weg zu uns</a></li>
+    <ul>
+      <li><a href="doku.php?id=aktuelles:einsaetze"><div>Einsätze</div></a></li>
+      <li><a href="doku.php?id=aktuelles:ausbildungen"><div>Ausbildungen</div></a></li>
+      <li><a href="doku.php?id=aktuelles:uebungen"><div>Übungen</div></a></li>
+      <li><a href="doku.php?id=aktuelles:veranstaltungen"><div>Veranstaltungen</div></a></li>
+      <li><a href="doku.php?id=aktuelles:meldungen"><div>Meldungen</div></a></li>
+      <li><a href="doku.php?id=aktuelles:jugend"><div>Jugend</div></a></li>
+    <ul>
+  </details></li>
+  <li><a href="doku.php?id=bildergalerie:bildergalerie"><div>Bildergalerie</div></a></li>
+  <li><a href="doku.php?id=aktuelles:archiv:archiv"><div>Archiv</div></a></li>
 </ul>
+</span></details></div></nav>
-<b><big>Infos</big></b>
-<ul>
-<li><a class="intlnk" href="doku.php?id=links:uebersicht">Links</a></li>
-<li><a class="intlnk" href="doku.php?id=links:thw">THW Links </a></li>
-<li><a class="intlnk" href="doku.php?id=links:thw#das_thw_im_regionalbereich_goettingen">Adressen </a></li>
-</td></tr></ul></table>
-<p align="right"><small><a class="intlnk" href="doku.php">zur Startseite</a></small></p>
-</span></div>
+<div class ="men" id="men8">
+<form action="/doku.php" accept-charset="utf-8" id="dw__search" method="get">
+<input name="do" value="search" type="hidden">
+<input name="id" id="qsearch__in" type="text" size="10">
+<input id="such" type="submit" src="such.gif" value=" " title="Suchen"></form>
+</div>
-<div  class ="men" id="men1"
-onmouseover="javascript:idOn('sm1')"
-onmouseout="javascript:idOff('sm1')"
-><a  class ="menuA" onClick="javascript:idTgl('sm1')">
-Jugendgruppe</a><span id="sm1" class="menu">
-<ul>
+</div>
-<li><a class="intlnk" href="doku.php?id=jugendgruppe">Startseite</a></li>
+<div class ="thwbilder">
-<br>
-<li><a class="intlnk" href="doku.php?id=aktuelles:jugend">Aktuelles</a></li>
-<li><a class="intlnk" href="doku.php?id=mitmachen:in_der_jugendgruppe">Mitmachen</a></li>
-</ul>
-<p align="right"><small><a class="intlnk" href="doku.php">zur Startseite</a></small></p>
-</span></div>
-<div  class ="men" id="men2"
-onmouseover="javascript:idOn('sm2')"
-onmouseout="javascript:idOff('sm2')"
-><a  class ="menuA" onClick="javascript:idTgl('sm2')">
-Aktuelles</a><span id="sm2" class="menu">
-<ul>
+</body>
-<li><a class="intlnk" href="doku.php?id=aktuelles:einsaetze-und-aktionen">Eins&auml;tze und Aktionen</a></li>
-<li><a class="intlnk" href="doku.php?id=aktuelles:jugend">Jugendgruppe</a></li>
-<li><a class="intlnk" href="doku.php?id=aktuelles:bildergalerie">Bildergalerie</a></li>
-<li><a class="intlnk" href="doku.php?id=aktuelles:oeffentlichkeitsarbeit">&Ouml;ffentlichkeitsarbeit</a></li>
-<li><a class="intlnk" href="doku.php?id=log:log">Logbuch</a></li>
-</ul>
-<p align="right"><small><a class="intlnk" href="doku.php">zur Startseite</a></small></p>
-</span></div>
+</div>
+<style>
+.newMenu {
+  display: block;
+  top: 0px;
+  margin-top: -1px;
+}
+.newMenu.newMenu ul {
+  font-size: 0.8em;
+  list-style-type: none;
+  margin: 0!important;
+  padding: 0!important;
+  position: absolute;
+}
+.newMenu.newMenu ul ul {
+  margin-left: 156px!important;
+  font-size: 1.0em;
+}
+.newMenu ul ul li:first-child {
+  margin-top: -34px;
+}
+.newMenu.newMenu li {
+  color: rgb(1,71,193);
+  background-color: rgb(255,255,204);
+  border: 2px solid rgb(1,71,193);
+  padding: 0;
+  padding-left: 0!important;
+  width: 156px;
+}
+.newMenu.newMenu li div , .newMenu.newMenu li summary {
+  padding: 0.3em;
+}
+.newMenu li:hover, .newMenu li:hover > a > div, .newMenu li:focus-within, .newMenu li:focus-within > a > div, .newMenu details[open] {
+  color: white;
+  background-color: blue;
+  border-color: blue;
+}
-<div  class ="men" id="men8">
+</style>
-<form action="/doku.php" accept-charset="utf-8" id="dw__search" method="get">
-<input name="do" value="search" type="hidden">
-<input name="id" id="qsearch__in" type="text" size="10">
-<input id="such" type="submit" src="such.gif" value=" " title="Suchen"></form>
-</div>
+<script>
+function closeAllNavMenus(html_object){
+  let details_list = document.querySelectorAll("nav details")
+  for(let details of details_list){
+    details.removeAttribute("open");
+  }
+}
+function isChildOf(child, parent){
+  //einmal den DOM absteigen, bis das Elternelement erreicht ist  - oder die Wurzel, dann ist das Kind null.
+  while(child != parent && child != null)child = child.parentNode;
+  return Boolean(child);
+}
-</div>
+function klickBodyHandler(event) {
-<div class ="thwbilder">
+  if(!isChildOf(event.target,navigation_menu)) closeAllNavMenus();
+}
+function focusinHandler(event){
+  let navigation_submenu_list = document.querySelectorAll("#navigation_menu details")
+  for(let navigation_submenu of navigation_submenu_list){
+    if(!isChildOf(event.target, navigation_submenu)){
+      navigation_submenu.open = false;
+    }
+  }
+}
+function focusoutHandler(event){
+  if(!isChildOf(event.relatedTarget, navigation_menu)){
+    closeAllNavMenus();
+  }
+}
+let navigation_menu = document.getElementById("navigation_menu");
-</body>
+navigation_menu.addEventListener('focusin', focusinHandler);
+navigation_menu.addEventListener('focusout', focusoutHandler);
+window.addEventListener('click', klickBodyHandler);
-</div>
+</script>
 </html>

Auf einen Klick

Mehr von uns

Adresse & Kontakt

Aktionskarte

OV in Zahlen

Mithelfen!

Unterschiede