verlinkte Auswahlliste

[benni3005]

Hallo,

wir müssen in Informatik eine Site über Holland machen. Jede Gruppe hat sich ein Thema gesucht, dass sie behandeln will. Und damit ein einheitliches Design entsteht baue ich das Grundgerüst. Doch um zu den Seiten der anderen Gruppen zu kommen habe ich vor eine Auswahlliste einzubauen. Wenn man in dieser auf einen Eintrag klickt soll man sofort zu der Seite der anderen Gruppe weitergeleitet werden. Doch nun hab ich das Problem, dass ich zwar die Liste hin bekomme, aber die Einträge nicht verlinken kann.

Kann mir jemand sagen, was man da machen muss? Ich habe irgendwo was von CGI-Script gelesen, aber davon hab ich gar keine Ahnung.

Danke schon mal im Voraus.

Benni

[Richard]

Hallo,

Auch das ist eine häufig gestellte Frage.

Viele Grüße

[Marian]

Hallo,

Auch das ist eine häufig gestellte Frage.

Oh, ein <select>, kein <ul>?

Dazu dann aber die übliche Javascript-Warnung: Denk dran, dass nicht jeder Javascript aktiviert hat. Für mit Javascript geht das Beispiel, für ohne muss noch ein submit-Button dahinter (der kann auch per Javascript ausgeblendet werden, wenn er dich stört), der das Formular mit der Dropdown-Liste an ein serverseitiges Script schickt, das dann auf die entsprechende Seite weiterleitet.

Viele Grüße aus Freiburg,
Marian

[benni3005]

Hallo,

Auch das ist eine häufig gestellte Frage.

Da war ich bereits. Jedoch will ich das Ganze in einer Tabelle unterbringen und am Besten die zu ladende Seite in einem neuen Fenster/Tab mit target="_blank" laden. Und dieses Beispiel funktioniert nur mit einem Frameset und genau das will ich vermeiden. Hab auch schon probiert das umzucoden, was aber nicht so gefunzt hat wie ich wollte

[at]

Hallo.

Für mit Javascript geht das Beispiel, für ohne muss noch ein submit-Button dahinter (der kann auch per Javascript ausgeblendet werden, wenn er dich stört)

<noscript> in Verbindung mit einem blockbildenden Element sollte da ausreichen.
MfG, at

[benni3005]

Ihr habt da etwas falsch verstanden. Ich weiß wie man Links usw macht, allerdings nicht in einer Dropdownbox. Ich habe hier mal ein Beispiel gesucht: http://de.selfhtml.org/html/formulare/auswahl.htm

Nur das ganze soll einzeilig sein, so dass man es ausklappen muss und wenn man dann auf einen Eintrag klickt, soll man weitergeleitet werden.

Benni

[Ashura]

Hallo benni3005.

Nur das ganze soll einzeilig sein, so dass man es ausklappen muss und wenn man dann auf einen Eintrag klickt, soll man weitergeleitet werden.

Also so?

Einen schönen Freitag noch.

Gruß, Ashura

[benni3005]

Hallo benni3005.

Nur das ganze soll einzeilig sein, so dass man es ausklappen muss und wenn man dann auf einen Eintrag klickt, soll man weitergeleitet werden.

Also so?

Einen schönen Freitag noch.

Gruß, Ashura

Das ist sogar noch besser als die Möglichkeit mit dem Formular. nur dazu habe ich auch noch eine Frage und zwar: kann man diesen aufploppenden Teil auch so gestalten, dass er nach oben hin sich öffnet und nicht nach unten?

Benni

[Ashura]

Hallo benni3005.

Das ist sogar noch besser als die Möglichkeit mit dem Formular. nur dazu habe ich auch noch eine Frage und zwar: kann man diesen aufploppenden Teil auch so gestalten, dass er nach oben hin sich öffnet und nicht nach unten?

Ja. Du muss lediglich für den Selektor li.visible die gewünschten Eigenschaften setzen.
Ich habe die Seite einmal aktualisiert, einen kleinen Bug behoben und eine Möglichkeit dem Stylesheet hinzugefügt:

li.visible {  
  margin-top:-3.4em;  
  position:relative;  
  z-index:1;  
}

Den Wert für margin-top musst du später natürlich deinen Schriftgrößen- und padding-Angaben anpassen.

Einen schönen Freitag noch.

Gruß, Ashura

[benni3005]

Ja. Du muss lediglich für den Selektor li.visible die gewünschten Eigenschaften setzen.
Ich habe die Seite einmal aktualisiert, einen kleinen Bug behoben und eine Möglichkeit dem Stylesheet hinzugefügt:

li.visible {

margin-top:-3.4em;
  position:relative;
  z-index:1;
}

  
Nun gut. Ich habs hinzugefügt und nun nach meinen Vorstellungen gestaltet. Nur habe ich jetzt das Problem, dass es im Firefox richtig angezeigt wird, aber im IE nur die Schrift zu sehen ist wenn man es aufklappt. Man sieht einfach nur die weiße Schrift, keine Hintergrundfarbe und keinen Rahmen. An was kann das liegen?

[Ashura]

Hallo benni3005.

Nur habe ich jetzt das Problem, dass es im Firefox richtig angezeigt wird, aber im IE nur die Schrift zu sehen ist wenn man es aufklappt. Man sieht einfach nur die weiße Schrift, keine Hintergrundfarbe und keinen Rahmen.

Dies kannst du hiermit beheben:

* html li {  
  margin-left:-1em;  
  width:100%;  
}

An was kann das liegen?

Keine Ahnung, irgend ein Bug des IE wird es wohl sein. Sich darüber den Kopf zu zerbrechen lohnt sich aber meiner Meinung nach nicht.

Einen schönen Samstag noch.

Gruß, Ashura

[benni3005]

Hallo benni3005.

Nur habe ich jetzt das Problem, dass es im Firefox richtig angezeigt wird, aber im IE nur die Schrift zu sehen ist wenn man es aufklappt. Man sieht einfach nur die weiße Schrift, keine Hintergrundfarbe und keinen Rahmen.

Dies kannst du hiermit beheben:

• html li {

margin-left:-1em;
  width:100%;
}

>   
> > An was kann das liegen?  
>   
> Keine Ahnung, irgend ein Bug des IE wird es wohl sein. Sich darüber den Kopf zu zerbrechen lohnt sich aber meiner Meinung nach nicht.  
>   
>   
> Einen schönen Samstag noch.  
>   
> Gruß, Ashura  
>   
  
Super. Jetzt funktionierts. Danke für die schnelle und kompetente Hilfe.  
  
Benni

[Sabine]

Hallo Ashura!

Da ich schon seit langem nach einem barrierefreiem Menü suche, habe ich mir deine Variante angesehen. Ich hätte allerdings gerne ein Menü, das nach rechts aufklappt, was ich nach einigen Veränderungen in deinem CSS-Skript auch geschafft habe.

ABER und dazu meine Frage: Setze ich 2 Aufzählungslisten untereinandern, also so:

<ul><li>Bar</li>  
      <li class="hidden"><a href="">Foo</a></li>  
      <li class="hidden"><a href="">Baz</a></li>  
      <li class="hidden"><a href="">Qux</a></li>  
</ul>  
<ul><li>xxx</li>  
      <li class="hidden"><a href="">yyy</a></li>  
      <li class="hidden"><a href="">rrr</a></li>  
      <li class="hidden"><a href="">zzz</a></li>  
</ul>

klappt die erste (Bar) nach Wunsch auf, bei der zweiten (xxx) tut sich nix. Muss ich hier im Javascript-Teil etwas verändern?

Und dazu gleich noch eine Frage: Ich habe barrierefrei immer so verstanden, dass überhaupt kein JavaScript vorkommt. Warum stört es also hier nicht bzw. wie sieht die Navigationsliste aus, wenn JavaScript deaktiviert ist?

lg

Sabine

[Der Martin]

Hallo Sabine,

Und dazu gleich noch eine Frage: Ich habe barrierefrei immer so verstanden, dass überhaupt kein JavaScript vorkommt.

das hast du IMHO missverstanden. Es geht nicht darum, dass Javascript gar nicht verwendet werden sollte - entscheidend ist nur, dass die Seite auch ohne JS noch in vollem Umfang benutzbar bleibt. Dabei dürfen schon mal ein paar optische Effekte oder vielleicht auch Komfortfunktionen wegfallen. Es sollte bloß nicht so sein, dass z.B. die Navigation Javascript zwingend voraussetzt.

Warum stört es also hier nicht bzw. wie sieht die Navigationsliste aus, wenn JavaScript deaktiviert ist?

Wenn das Konzept gut realisiert ist, sind ohne JS alle Untermenüs aufgeklappt. Damit sind alle Links sichtbar und alle Linkziele erreichbar. Nur der visuelle Effekt auf- und zuklappender Menüs fällt weg, aber das schränkt die Benutzbarkeit der Seite nicht wirklich ein.

Schönen Abend noch,
 Martin

[Sabine]

Hallo Martin!

das hast du IMHO missverstanden.

Ganz offentsichtlich! Dadurch erleichtert sich mein mühvolles vorhaben bei weitem.

Danke für die schnelle Info diesbezüglich!

lg

Sabine

[Ashura]

Hallo Sabine.

ABER und dazu meine Frage: Setze ich 2 Aufzählungslisten untereinandern, also so:
[…]

klappt die erste (Bar) nach Wunsch auf, bei der zweiten (xxx) tut sich nix. Muss ich hier im Javascript-Teil etwas verändern?

Ja, da war noch ein Bug im Script, es wurde pauschal jedem li-Elementknoten die Klasse „hidden“ zugewiesen, ungeachtet dessen, ob es ihn überhaupt gibt, oder nicht. Und da zuvor ein Knoten entfernt wird, kann ebendiesem natürlich nicht die Klasse zugewiesen werden.
Ich habe den Fehler vorläufig mit einem zweiten Schleifendurchlauf zum separaten Setzen der Klasse behoben.

Und dazu gleich noch eine Frage: Ich habe barrierefrei immer so verstanden, dass überhaupt kein JavaScript vorkommt.

Dazu hat Martin ja bereits passend geantwortet.

Warum stört es also hier nicht bzw. wie sieht die Navigationsliste aus, wenn JavaScript deaktiviert ist?

Gegenfrage: Warum probierst du es nicht einfach aus?

Einen schönen Mittwoch noch.

Gruß, Ashura

[Sabine]

Hallo Ashura!

Ich habe den Fehler vorläufig mit einem zweiten Schleifendurchlauf zum separaten Setzen der Klasse behoben.

Ich werde mir das ansehen, mal schauen, ob ich das auch verstehe. Man sollte sich zumindest in den Dingen, die man verwenden möchte, auch auskennen um sie entsprechend zu adaptieren.
Danke für deine Mühe!

Und dazu gleich noch eine Frage: Ich habe barrierefrei immer so verstanden, dass überhaupt kein JavaScript vorkommt.

Dazu hat Martin ja bereits passend geantwortet.

Ja, ich bin vollständig aufgeklärt!

Warum stört es also hier nicht bzw. wie sieht die Navigationsliste aus, wenn JavaScript deaktiviert ist?

Gegenfrage: Warum probierst du es nicht einfach aus?

Habe ich getan, nachdem ich endlich die Option gefunden habe, um Javascript zu deaktivieren!

lg

Sabine

[Marian]

Hallo benni3005,

wir müssen in Informatik eine Site über Holland machen. Jede Gruppe hat sich ein Thema gesucht, dass sie behandeln will. Und damit ein einheitliches Design entsteht baue ich das Grundgerüst. Doch um zu den Seiten der anderen Gruppen zu kommen habe ich vor eine Auswahlliste einzubauen. Wenn man in dieser auf einen Eintrag klickt soll man sofort zu der Seite der anderen Gruppe weitergeleitet werden. Doch nun hab ich das Problem, dass ich zwar die Liste hin bekomme, aber die Einträge nicht verlinken kann.

Wo ist das Problem? Links macht man mit <a href="URL">, falls du das wissen willst. Und dann machst du einfach eine Liste, in der die Links zu den verschiedenen Themen stehen. Also etwa so:

<ul>  
 <li><a href="../daseinethema/">Das eine Thema</a></li>  
 <li><a href="../dasandrethema/">Das andre Thema</a></li>  
 <li><a href="../nocheinthema/">Noch ein Thema</a></li>  
</ul>

Kann mir jemand sagen, was man da machen muss? Ich habe irgendwo was von CGI-Script gelesen, aber davon hab ich gar keine Ahnung.

Ich wüsste nicht, wofür man da CGI braucht.

Viele Grüße aus Freiburg,
Marian