Navigation ausklappbarer Teil

[nurdiesge]

Hallo zusammen,
ich bin neu hier und hoffe, dass ihr mir helfen könnt.

Und zwar bin ich gerade dabei eine Website zu erstellen allerdings ahbe ich noch kleine Probleme mit der Navi.

Hier ein Screen:

Und zwar soll bei einem Klick auf Dienstleistungen die beiden Punkte Privat und Geschäftskunden erst ausgeklappt werden.

Hier mein aktueller Code der Navi in der index.html.

<ul class="list">

  <li><a href="[URL="http://www.html.de/view-source:file:///Users/manu/Desktop/website/pc-allround%20website/index.html"]index.html[/URL]" class="act">Home</a></li>

  <li><a href="[URL="http://www.html.de/view-source:file:///Users/manu/Desktop/website/pc-allround%20website/ueberuns.html"]ueberuns.html[/URL]">&Uuml;ber Uns</a></li>

  <li><a href="[URL="http://www.html.de/view-source:file:///Users/manu/Desktop/website/pc-allround%20website/kontakt.php"]kontakt.php[/URL]">Kontakt</a></li>
  <li><span><a href="[URL="http://www.html.de/view-source:file:///Users/manu/Desktop/website/pc-allround%20website/index.html#"]#[/URL]">Dienstleistungen</a></span></li>

  <li><a href="[URL="http://www.html.de/view-source:file:///Users/manu/Desktop/website/pc-allround%20website/privatkunden.html"]privatkunden.html[/URL]">Privatkunden</a></li>

  <li><a href="[URL="http://www.html.de/view-source:file:///Users/manu/Desktop/website/pc-allround%20website/geschaeftskunden.html"]geschaeftskunden.html[/URL]">Gesch&auml;ftskunden</a></li>

  <li><a href="[URL="http://www.html.de/view-source:file:///Users/manu/Desktop/website/pc-allround%20website/referenzen.html"]referenzen.html[/URL]">Referenzen</a></li>
  <li><a href="[URL="http://www.html.de/view-source:file:///Users/manu/Desktop/website/pc-allround%20website/anfahrt.html"]anfahrt.html[/URL]">Anfahrt</a></li>

  <li class="last"><a href="[URL="http://www.html.de/view-source:file:///Users/manu/Desktop/website/pc-allround%20website/impressum.html"]impressum.html[/URL]">Impressum</a></li>

</ul>

Liebe Grüße

 

[_Thor_]

Das macht man mit verschachtelten Listen und einer serverseitigen Scriptsprache wie PHP.

<ul class="list">
  <li><a href="index.html" class="act">Home</a></li>
  <li><a href="ueberuns.html">&Uuml;ber Uns</a></li>
  <li><a href="kontakt.php">Kontakt</a></li>
  <li><a href="#">Dienstleistungen</a>
    <ul>
      <li><a href="privatkunden.html">Privatkunden</a></li>
      <li><a href="geschaeftskunden.html">Gesch&auml;ftskunden</a></li>
    </ul>
  </li>
  <li><a href="referenzen.html">Referenzen</a></li>
  <li><a href="anfahrt.html">Anfahrt</a></li>
  <li class="last"><a href="impressum.html">Impressum</a></li>
</ul>

Das Untermenü wird per CSS unsichtbar gemacht.

ul ul {display: none;}

Mit PHP müsstest du dann prüfen, welcher Link geklickt worden ist und dann der verschachtelten Liste dynamisch eine Klasse zuweisen, welche die Untermenüs sichtbar macht.

 

[nurdiesge]

Danke für die schnelle Hilfe.

jetzt sind die beiden Menüpunkte zwar eingeklappt, allerdings kommen sie auch nicht zum vorschein, wenn ich auf Dienstleistungen drücke...

 

[kruschimappel]

Thor hat dir auch keinen fertigen Code gepostet, sondern nur den Lösungsweg ;)

Ich würde das mit Javascript lösen. Bei der Lösung von Thor müsste jedes Mal die gesamte Seite neu geladen werden. Etwas in dieser Art sollte dir helfen:
JavaScript | Ausklappbare Navigation o.Ä. - Addon Showroom - Webdesign & Multimedia
(war jetzt nur der erste Link, du kannst nach "Javascript navigation ausklappen" googeln, um bessere Ergebnisse zu erhalten. ;)

 

[_Thor_]

Hast du meinen Letzten Satz gelesen? Da steht, was nötig ist, damit die Untermenüs bei einem Klick wieder sichtbar werden.

Ich würde das mit Javascript lösen.

Das solltest du nicht, denn bei deaktiviertem JavaScript ist das Menü dann nicht nutzbar. Ausserdem ist es nicht mit der Tastatur bedienbar, wenn nur der Eventhandler onclick hinzugefügt wird. Eine Webseite sollte immer auch vollständig mit der Tastatur bedienbar sein. Es gibt Personen, die keine Maus bedienen können.

 

[nurdiesge]

Gude,

jetzt klappt das ganze auch mit JavaScript, Dankeschön.

Brauche nur noch eine Hilfe:
In dem Beispiel auf der Website, die du mir gegeben hast wird ein "Button" erstellt.
Wie passe ich diesen jetzt der Rest der Navi an, dass ich nur Text habe?

Hier ein Screen vom ausgeklappten Zustand:

Und hier mein Code im head:

  <script language="javascript">
function ausfahren(x, y) 
{
  if(document.getElementById(x).style.display == 'none')
  {
    document.getElementById(x).style.display="";
    document.getElementById(y).innerHTML = 'Dienstleistungen';
  }

  else
  {
    document.getElementById(x).style.display = 'none';
    document.getElementById(y).innerHTML = 'Dienstleistungen';
  }
}

</script>

und im body:

<ul class="list">
  <li><a href="index.html" class="act">Home</a></li>
  <li><a href="ueberuns.html">&Uuml;ber Uns</a></li>
  <li><a href="kontakt.php">Kontakt</a></li>
 <li> <div>

<button onClick="ausfahren('smilie', 'text');" id="text"> Dienstleistungen </button>

<div id="smilie" style="display:none;">
<li>
</li>
<span><a href="privatkunden.html"> Privatkunden </a></span>
<li>
</li>
<span><a href="geschaeftskunden.html"> Geschäftskunden </a> </span>

</div>
</div></li>


  <li><a href="referenzen.html">Referenzen</a></li>
  <li><a href="anfahrt.html">Anfahrt</a></li>
  <li class="last"><a href="impressum.html">Impressum</a></li>
</ul>

 

[_Thor_]

jetzt klappt das ganze auch mit JavaScript, Dankeschön.

Und was, wenn ich JavaScript deaktiviert habe? Dann kann ich dein Menü nicht nutzen.

In dem Beispiel auf der Website, die du mir gegeben hast wird ein "Button" erstellt.

Das ist nicht der Code, den ich dir gegeben habe. In meinem Code wird kein Button erstellt, nur Verweise in einer Liste.

Wie passe ich diesen jetzt der Rest der Navi an, dass ich nur Text habe?

Entferne das div und entferne den button.

 

[koslowski]

[/html]Das Untermenü wird per CSS unsichtbar gemacht.

ul ul {display: none;}

mit display:none oder visibility:hidden versteckte Untermenüs werden von fast allen Screenreadern nicht mehr vorgelesen.
Guckst du hier. ;-)

 

[nurdiesge]

Hmm kannst du mir eventuell deinen Code nochmal besser erklären? Habe den letzten Satz nicht verstanden. Muss ich das ganze jetzt als php speichern oder wie?

Danke an euch schonmal für die Hilfen :)

 

[_Thor_]

mit display:none oder visibility:hidden versteckte Untermenüs werden von fast allen Screenreadern nicht mehr vorgelesen.

Das ist ja nicht weiter schlimm, solange man dem Menüpunkt einen Titel gibt, in dem beschrieben steht, dass dieser Punkt Unterpunkte ehthält.

Hmm kannst du mir eventuell deinen Code nochmal besser erklären? Habe den letzten Satz nicht verstanden. Muss ich das ganze jetzt als php speichern oder wie?

Es nur als .php zu speichern reicht nicht, du musst dich mit PHP auseinandersetzen und die Logik für dieses Menü selber schreiben. Das ist aber schon sehr häufig in anderen Threads erklärt worden, vielleicht suchst du einfach mal etwas im Forum nach "Menü + PHP". Da solltest du was finden.

 

[kruschimappel]

Das solltest du nicht, denn bei deaktiviertem JavaScript ist das Menü dann nicht nutzbar.

Wenn du es geschickt anstellst, ist das Menü auch ohne Javascript voll nutzbar. :) Zum Beispiel, indem du die eingeklappten Elemente zunächst voll sichtbar definierst und erst mit Hilfe von Javascript versteckst. Sollte jemand Javascript ausgeschaltet haben, so sind die Element eben sofort sichtbar. Per Tastatur lässt sich das Menü dann auch wunderbar bedienen.
Zu onclick: Du kannst einem Link trotzdem eine URL zuweisen und diese per Javascript sperren, damit stattdessen das Untermenü aufgeklappt wird.

Ich bin der Ansicht, dass das die Usability mehr steigert, als die gesamte Seite jedes Mal zwecks Aus- und Einklappen vollständig neu zu laden.

Zu deiner Frage:
Wozu baust du Divs ein? Gib doch einfach der Liste eine id.
Die Funktion, den Text anzupassen, brauchst du wahrscheinlich auch nicht.

<script language="javascript">
function ausfahren(x) 
{
  if(document.getElementById(x).style.display == 'none')
  {
    document.getElementById(x).style.display="";
  }
  else
  {
    document.getElementById(x).style.display = 'none';
  }
}
</script>

<ul class="list">
  <li><a href="index.html" class="act">Home</a></li>
  <li><a href="ueberuns.html">&Uuml;ber Uns</a></li>
  <li><a href="kontakt.php">Kontakt</a></li>
 <li>

<a href="STANDARDSEITE.html" onClick="ausfahren('menu');return false;">Dienstleistungen</a>

<ul id="menu">
<li>
</li>
<span><a href="privatkunden.html"> Privatkunden </a></span>
<li>
</li>
<span><a href="geschaeftskunden.html"> Geschäftskunden </a> </span>
</ul>
</li>


  <li><a href="referenzen.html">Referenzen</a></li>
  <li><a href="anfahrt.html">Anfahrt</a></li>
  <li class="last"><a href="impressum.html">Impressum</a></li>
</ul>

Hier auch ein Beispiel, wie man Links per JS deaktivieren kann (return: false; ). STANDARDSEITE.html wird nur beim draufklicken aufgerufen, wenn JS ausgeschaltet ist.
Um das Problem mit ausgeschaltetem JS, das Thor angesprochen hat, zu umgehen, rufst du per onload="" im body-Tag eine Funktion auf, die alle Ausklapplisten versteckt.

<body onload="versteckeListen();">

<script type="text/javascript">
function versteckeListen()
{
   document.getElementById("menu").style.display = 'none';
}
</script>

 

[_Thor_]

Ja, wenn man es so macht, würde es gehen. Nur bei sehr umfangreichen Menüs könnte es so sehr lange dauern, durch das komplette Menü zum gewünschten Eintrag zu kommen.

 

[koslowski]

Das ist ja nicht weiter schlimm, solange man dem Menüpunkt einen Titel gibt, in dem beschrieben steht, dass dieser Punkt Unterpunkte ehthält.

was soll das nützen, wenn unter title des Hauptmenüpunktes die ganzen Unterpunkte stehen, die können doch dann trotzdem nicht angesteuert werden, wenn sie nicht vorgelesen werden.
Aber unter dem Aspekt das der behinderte Mitmensch dann weiß was er nicht anwählen kann wäre das eine Möglichkeit ihm eine lange Nase zu drehen.

Abgesehen davon haben sehr viel Behinderte das title-Attribut abgeschaltet, weil da aus SEO-Gründen oft ziemlicher Schwachfug steht.

Weißt du _Thor_ deine Aussage empfinde ich menschlich als ausgesprochen übersichtlich. :sad:

Irgendwann habe ich das auch mal nicht gewusst, bis mich jemand drauf aufmerksam gemacht hat. Ich habe mich dann für die Info bedankt und mich gefreut wieder was gelernt zu haben.

Und du redest einfach so einen Blödsinn daher, nur um bloß nicht zugeben zu müssen etwas noch nicht gewusst zu haben. Deshalb bricht dir doch kein Zacken aus der Krone.

Denk doch auch mal dran das wir vor allem anderen mit unserem Wissen hier helfen wollen.
Was soll denn der Fragesteller jetzt denken? Schreibt er jetzt alle Untermenüpunkte in das title-Attribut des Hauptmenüpunktes, um dem Behinderten eine lange Nase drehen zu können? :neutral:

 

[_Thor_]

was soll das nützen, wenn unter title des Hauptmenüpunktes die ganzen Unterpunkte stehen, die können doch dann trotzdem nicht angesteuert werden, wenn sie nicht vorgelesen werden.

Du hast nicht verstanden, was ich gemeint habe.
Natürlich macht es keinen Sinn, die Unterpunkte in den Titel zu schreiben, das habe ich auch nicht gesagt. Ich habe gesagt, es soll den Hinweis enthalten, dass dieser Menüpunkt weitere Unterpunkte enthält, die sichtbar werden, wenn man den Menüpunkt ansteuert.

Weißt du _Thor_ deine Aussage empfinde ich menschlich als ausgesprochen übersichtlich.

Dann solltest du sie noch mal aufmerksam lesen, dann verstehst du sicher auch, was gemeint war.


Edit: Nebenbei gesagt, ich trage gar keine Krone, nur ein Zepter ;)

 

[koslowski]

Du hast nicht verstanden, was ich gemeint habe.
Natürlich macht es keinen Sinn, die Unterpunkte in den Titel zu schreiben, das habe ich auch nicht gesagt. Ich habe gesagt, es soll den Hinweis enthalten, dass dieser Menüpunkt weitere Unterpunkte enthält, die sichtbar werden, wenn man den Menüpunkt ansteuert.

Der Screenreaderuser ist i.d.R. blind. Der sieht nix. Es nützt ihm nix wenn da was sichtbar wird.
Er ist drauf angewiesen das es vorgelesen wird und das wird es nicht, wie du dem Link entnehmen kannst.
Der Hinweis bringt ihm also gar nix.

Erschwerend kommt noch hinzu das ältere Screenreader den Link nicht mehr vorlesen wenn das title-Attribut existiert. Stattdessen wird dieses vorgelesen.

Edit: Nebenbei gesagt, ich trage gar keine Krone, nur ein Zepter ;)

Und manchmal ein Brett vorm Kopf, wie mir scheint.
SCNR

 

[_Thor_]

Der Hinweis bringt ihm also gar nix.

Doch, er wird darüber informiert, dass dieser Menüpunkt weiter Unterpunkte enthält die sichtbar (vorgelesen) werden, wenn der Menüpunkt angeklickt ist.

Erschwerend kommt noch hinzu das ältere Screenreader den Link nicht mehr vorlesen wenn das title-Attribut existiert. Stattdessen wird dieses vorgelesen.

Da ist es leider wie mit älteren Browsern, man sollte aktuell bleiben.

Und manchmal ein Brett vorm Kopf, wie mir scheint.
SCNR

Sehr unpassend...

 

[koslowski]

Doch, er wird darüber informiert, dass dieser Menüpunkt weiter Unterpunkte enthält die sichtbar (vorgelesen) werden, wenn der Menüpunkt angeklickt ist.

Sach mal willst du mich für blöd verkaufen?
Die Untermenüpunkte können nicht angeklickt werden, weil sie nicht vorgelesen werden.
Bei display:none; existieren die Untermenüpunkte für den Screenreader nicht.

Das funktioniert nur wenn der Hauptmenüpunkt beim Anklicken zu einer sogenannten Brückenseite führt, wo die Untermenüpunkte noch mal alle aufgeführt sind.

Normalerweise führt ein Klick auf den Hauptmenüpunkt aber nicht zu einer Brückenseite.
Die Unterpunkte erscheinen nur beim Hovern.

Du hast dich hier einfach nur verrannt und willst es nicht zugeben. :neutral:

Da ist es leider wie mit älteren Browsern, man sollte aktuell bleiben.

Das kann man nur zynisch und arrogant nennen.

Blinde sind sehr häufig Menschen, die nur ganz wenig Geld haben. Dreimal darfste raten warum das wohl so ist.

Gute Screenreader kosten eine ganze Stange Geld.

Erst seit kurzem gibt es eine Version eines kostenlosen Opensource-Screenreaders, der mit den guten Geräten einigermaßen mithalten kann.
Das heißt aber nicht das sich das schon rumgesprochen hat.

Sehr unpassend...

Je mehr du hier zu dem Thema postest desto passender erscheint es mir. :neutral:

 

[kruschimappel]

Die Untermenüpunkte können nicht angeklickt werden, weil sie nicht vorgelesen werden.
Bei display:none; existieren die Untermenüpunkte für den Screenreader nicht.

Bei der von _Thor_ vorgeschlagenen Lösung, die Seite bei Klick auf einen "Oberpunkt" mit den dazugehörigen Unterpunkten komplett neu zu laden, schon. Dann wäre ein Hinweis im title-Attribut sinnvoll.
Bei der in meinem letzten Beitrag vorgeschlagenen Lösung ist eine solche Brückenseite möglich, welche eventuell gar nicht nötig ist, da die Punkte erst durch Javascript ausgeblendet werden (ich weiß nicht, wie Screenreader JS behandeln).

 

[koslowski]

Bei der von _Thor_ vorgeschlagenen Lösung, die Seite bei Klick auf einen "Oberpunkt" mit den dazugehörigen Unterpunkten komplett neu zu laden, schon. Dann wäre ein Hinweis im title-Attribut sinnvoll.

das hieße das nach Neuladen die Subnavi sichtbar bleibt und dieselbe auch nirgendwo display:none in der CSS-Datei stehen hat (wo sich der Screenreader ja die Info holt).

Warum ein Hinweis im Title-Attribut nix bringt habe ich schon gepostet. ;-)

Sorry aber _Thor_ hat einen Schmarrn gepostet und wollte das nur nicht zugeben.

Es gibt genug Lösungen, die auf display:none oder visibility:hidden verzichten und einwandfrei funktionieren.

da die Punkte erst durch Javascript ausgeblendet werden (ich weiß nicht, wie Screenreader JS behandeln).

Wie sie mit JS umgehen weiss ich auch nicht.
Steht da irgendwo in der CSS display:none wird nicht vorgelesen, egal ob mit oder ohne JS.
Der Screenreader holt sich die Info darüber ja i.d.R. aus der CSS-Datei oder aus dem an den Browser ausgelieferten Quelltext.

 

[neuroleptika]

Gewöhnliche Screenreader (wie Jaws) sind keine "Vorlesebrowser" sondern können mit vielen Anwendungen benutzt werden. Wenn der client Javascript unterstützt kann display: none natürlich auch aufgehoben werden. onMouseClick ist für diese Besucher aber (vielleicht) nutzlos.

Eine optische Verschiebung ins Nirvana spielt für Screenreader dagegen keine Rolle. Das Menü lässt sich immer durchtabben (auch ohne title).