Wie erstellt man so ein Menü?

[23nsur]

Wie erstelle ich so ein Menü? Ich möchte keine Datenbank im Hintergrund haben. Er soll mir nur
die Variablen filtern und dann auf eine URL verweisen.

Vielen Dank!

 

[threadi]

Das erreichst Du mit HTML für die Strukturierung der Inhalte (als <select>-Listen würde ich sagen), CSS für die Gestaltung (wobei hierbei bei <select> Grenzen gesetzt sind) und JavaScript um die Abhängigkeit der Listen voneinander zu ermöglichen. Die <select>-Felder umgibst Du mit einem Formular, welches an die von dir gewünschte URL abgeschickt werden kann.

 

[23nsur]

Vielen Dank für deine Antwort.
Strukturierung mit HTML und Gestaltung via CSS kein Problem, wie kann man aber mit JavaScript es so selektieren das ich 3 Variablen habe -Hast du evtl. ein Beispiel Script?

Ich habe ein Script gefunden dort filtert es bis zu 2 Variablen, die 3. bekomm ich nicht hin.

<form name="doppelmenue" action="">

<select name="auswahlliste" size="1" onChange="redirect(this.options.selectedIndex)">
 <option>Home</option>
 <option>Suchmaschinen</option>
 <option>Sonstiges</option>
</select>

<select name="auswahlliste2" size="1">
 <option value="startseite.htm">Homepage</option>
 <option value="buch.htm">Gästebuch</option>
 <option value="forum.htm">Forum</option>
</select>

<input type="button" name="test" value="Los" onClick="auswaehlen()">
</form>

<script>
// Doppelte Menü-Auswahlliste

var groups = document.doppelmenue.auswahlliste.options.length;
var auswahl = new Array(groups);
for (var zaehler = 0; zaehler < groups; zaehler++) {
 auswahl[zaehler] = new Array();
}

auswahl[0][0] = new Option("Homepage", "startseite.htm");
auswahl[0][1] = new Option("Gästebuch", "buch.htm");
auswahl[0][2] = new Option("Forum", "forum.htm");

auswahl[1][0] = new Option("Yahoo", "http://www.yahoo.de");
auswahl[1][1] = new Option("Google", "http://www.google.de");
auswahl[1][2] = new Option("Windows Live", "http://www.live.com");

auswahl[2][0] = new Option("T-Online", "http://www.t-online.de");
auswahl[2][1] = new Option("Arbeitsamt", "http://www.arbeitsamt.de");
auswahl[2][2] = new Option("Webbausteine", "http://www.webbausteine.de");
auswahl[2][3] = new Option("HTML-Forum", "http://www.html.de");

var temp = document.doppelmenue.auswahlliste2;

function redirect(x) {
 for (var zaehler = temp.options.length-1; zaehler > 0; zaehler--) {
  temp.options[zaehler] = null;
 }
 for (var zaehler = 0; zaehler < auswahl[x].length; zaehler++) {
  temp.options[zaehler] = new Option(auswahl[x][zaehler].text,auswahl[x][zaehler].value);
 }
 temp.options[0].selected = true;
}

function auswaehlen() {
 location.href = temp.options[temp.selectedIndex].value;
}
</script>

Weisst du evtl. wie man es auf 3 Optionen umschreiben kann? Komm nicht weiter..

Vielen Dank.

 

[TheBlack0]

<select name="Select1" size="10" onchange="document.forms.MKsub.submit();" <br="">
<option id="s1" selected="" value="1">Am anfang ausgewählt </option>
<option value="2">Auswahl 2</option>
<option value="3">Auswahl 3</option>
<option value="4">Auswahl 4</option>
<option value="5">Auswahl 5</option>
</select>

Das könnte dir weiterhelfen
Um mehrere Auswahlmöglichkeiten zu haben, musst du den Code einfach 3 mal verwenden
um die Sachen, die du ausgewählt hast im url o.ä mitzugeben verwendest du einfach folgenden Code:

<a href="ziel.php" method="post">Fertig</a>

und auf der Seite, auf der du die Informationen abrufst benutzt du dann folgendes

$Select1 = $_POST["Select1"] //Select1 ist der name der Select tabelle

 

[23nsur]

Danke für deine Info, ich hab es ein bisschen anders gelöst gehabt. Ich hab mit jquery und javascript geregelt. Mit http://www.appelsiini.net/projects/chained/demo.html funktioniert es wunderbar. Hab dann noch folgenden script code eingebaut das er ordentlich verlinkt.

<script type="text/javascript">

  function goPage (newURL) {
      if (newURL != "") {
          if (newURL == "-" ) {
              resetMenu();            
          }       
          else {  
            document.location.href = newURL;
          }
      }
  }

function resetMenu() {
   document.gomenu.selector.selectedIndex = 2;
}
</script>