Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- sidebar2 [2021/03/04 12:10]
teutebergt [Navigation]
+++ sidebar2 [2021/05/25 08:16]
teutebergt [Navigation]
@@ Zeile 27: / Zeile 27: @@
 onClick="javascript:idTgl('sm0')">
-&Uuml;ber Uns</a><span id="sm0" class="menu">
+Über Uns</a><span id="sm0" class="menu">
 <table><tr>
 <td valign='top'>
@@ Zeile 34: / Zeile 34: @@
 <big><b>Unser OV</b></big>
 <ul>
-<li><a class="intlnk" href="doku.php?id=geschichte:ueber_uns">Geschichte</a></li>
 <li>
-Aufbau
+<a class="intlnk" href="doku.php?id=aufbau:uebersicht">Aufbau</a>
+</li>
+<li><a class="intlnk" href="doku.php?id=mitmachen:uebersicht">Mitmachen</a>
+</li>
+<li><a class="intlnk" href="doku.php?id=mitmachen:helfervereinigung">Fördern</a>
+</li>
+<li><a class="intlnk" href="doku.php?id=geschichte:ueber_uns">Geschichte</a>
 </li>
-<li><a class="intlnk" href="doku.php?id=helfervereinigung">Helfervereinigung</a></li>
-<li><a class="intlnk" href="doku.php?id=homepage:impressum">Impressum</a></li>
-<li><a class="intlnk" href="doku.php?id=mitmachen:als_aktiver_helfer">Mitmachen</a></li>
 </ul>
@@ Zeile 46: / Zeile 48: @@
 <ul>
-<li><a class="intlnk" href="doku.php?id=das_thw:anfordern">anfordern</a></li>
+<li><a class="intlnk" href="doku.php?id=das_thw:anfordern">Anfordern</a></li>
 <li><a class="intlnk" href="doku.php?id=das_thw:bundesanstalt">Bundesanstalt</a></li>
 <li><a class="intlnk" href="doku.php?id=das_thw:struktur">Struktur</a></li>
-<li><a class="intlnk" href="doku.php?id=geschichte:das_thw">Geschichte</a></li>
+<li><a class="intlnk" href="doku.php?id=das_thw:geschichte">Geschichte</a></li>
-<li><a class="intlnk" href="doku.php?id=das_thw:links">Links</a></li>
+<li><a class="intlnk" href="doku.php?id=links:thw">Links</a></li>
 </td><td  valign='top'>
@@ Zeile 70: / Zeile 72: @@
 </ul>
 <li><a class="intlnk" href="doku.php?id=einheiten:fachgruppe_logistik-verpflegung">Fachgruppe Logistik-Verpflegung</a></li>
+</ul>
 <br>
-<b><big>Einheiten</big></b>
+<b><big>Gruppen</big></b>
+<ul>
 <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>
@@ Zeile 97: / Zeile 101: @@
 <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>
+<li><a class="intlnk" href="doku.php?id=links:thw#das_thw_im_regionalbereich_goettingen">Adressen </a>
+</li>
+<li>
+<a class="intlnk" href="doku.php?id=der_weg_zum_ov">Der Weg zu uns</a>
+</li>
+<li>
+<a class="intlnk" href="doku.php?id=lexikov:startseite">LexikOV</a>
+</li>
+<li><a class="intlnk" href="doku.php?id=homepage:impressum">Impressum</a>
+</li>
 </td></tr></ul></table>
 <p align="right"><small><a class="intlnk" href="doku.php">zur Startseite</a></small></p>
@@ Zeile 107: / Zeile 117: @@
 </span></div>
-<div  class ="men" id="men1"
+<div id="navigation_menu_jugend"><details class ="men" style="left:160px; padding:0 0 14px 0" >
-onmouseover="javascript:idOn('sm1')"
+<summary style="padding:14px 0px">Jugend</summary>
-onmouseout="javascript:idOff('sm1')"
+<span class="newMenu">
-><a  class ="menuA" onClick="javascript:idTgl('sm1')">
-Jugendgruppe</a><span id="sm1" class="menu">
 <ul>
-<li><a class="intlnk" href="doku.php?id=jugendgruppe">Startseite</a></li>
+  <li><a href="doku.php?id=jugend:jugend"><div>Startseite</div></a></li>
-<br>
+  <li><a href="doku.php?id=jugend:aktuelles"><div>Aktuelles</div></a></li>
-<li><a class="intlnk" href="doku.php?id=aktuelles:jugend">Aktuelles</a></li>
+  <li><a href="doku.php?id=jugend:ausbildung"><div>Ausbildung</div></a></li>
-<li><a class="intlnk" href="doku.php?id=mitmachen:in_der_jugendgruppe">Mitmachen</a></li>
+  <li><a href="doku.php?id=jugend:mitmachen"><div>Mitmachen</div></a></li>
+  <li><a href="doku.php?id=jugend:haeufige_fragen"><div>Häufige Fragen</div></a></li>
 </ul>
-<p align="right"><small><a class="intlnk" href="doku.php">zur Startseite</a></small></p>
-</span></div>
+</span></details></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">
+<!-- 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=aktuelles:einsaetze-und-aktionen">Eins&auml;tze und Aktionen</a></li>
+  <li><a href="doku.php?id=aktuelles:aktuelles"><div>Übersicht</div></a></li>
-<li><a class="intlnk" href="doku.php?id=aktuelles:jugend">Jugendgruppe</a></li>
+  <li><details><summary>Nach Themen</summary>
-<li><a class="intlnk" href="doku.php?id=aktuelles:bildergalerie">Bildergalerie</a></li>
+    <ul>
-<li><a class="intlnk" href="doku.php?id=aktuelles:oeffentlichkeitsarbeit">&Ouml;ffentlichkeitsarbeit</a></li>
+      <li><a href="doku.php?id=aktuelles:einsaetze"><div>Einsätze</div></a></li>
-<li><a class="intlnk" href="doku.php?id=log:log">Logbuch</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>
-<p align="right"><small><a class="intlnk" href="doku.php">zur Startseite</a></small></p>
-</span></div>
+</span></details></div>
@@ Zeile 150: / Zeile 160: @@
-<div  class ="men" id="men8">
+<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">
@@ Zeile 169: / Zeile 179: @@
 </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;
+}
+</style>
+<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);
+}
+function klickBodyHandler(event) {
+  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");
+navigation_menu.addEventListener('focusin', focusinHandler);
+navigation_menu.addEventListener('focusout', focusoutHandler);
+window.addEventListener('click', klickBodyHandler);
+</script>
 </html>

Auf einen Klick

Mehr von uns

Adresse & Kontakt

Aktionskarte

OV in Zahlen

Mithelfen!

Unterschiede