Menü in Javascript

Webdesign & Technik HTML & CSS
1

Ich will mein PHP Menü von apple.bplaced.net/menue.php in Javaskript umschreiben um die Ladezeit zu verringern bzw. nur eine Anfangsladezeit zu Haben. Ich muss leider zugeben das ich in Javaskript nicht so viel Ahnung wie in php habe. Es soll immer nur ein Seitenmenü gleichzeitig offen sein. Könnt es euch ja anschauen indem ihr auf die verscheiden links klickt. Hier mal der PHP Text wer damit was anfangen kann.

<?php
$link = $_GET['link'];
if(!$link)
$link = "1000";
echo'
<head>

<a href="menue.php?link=1">Link1</a><br>';
if ($link <= 3){
echo'<table rules="none" cellspacing="0" cellpadding="0"><tr><td><li></td><td colspan="2">  <a href="menue.php?link=2">Link2</a><br></td><tr>';
if ($link == 2){
echo'<tr><td></td><td><li></td><td><a href="#">Link3</a><br>
<tr><td></td><td><li></td><td><a href="#">Link4</a><br>
';
}
echo'<tr><td><li></td><td colspan="2">  <a href="menue.php?link=3">Link5</a><br></td><tr>';
if ($link == 3){
echo'<tr><td></td><td><li></td><td><a href="#">Link6</a><br>
     <tr><td></td><td><li></td><td><a href="#">Link7</a><br>';
}
echo'<tr><td><li></td><td colspan="2">  <a href="#">Link8</a><br></td><tr>
</table>

';
}
echo'
<a href="#">Link9</a><br>

<a href="menue.php?link=4">Link10</a><br>';

if ((4 <= $link) and ($link <= 6)){
echo'<table rules="none" cellspacing="0" cellpadding="0"><tr><td><li></td><td colspan="2">  <a href="menue.php?link=5">Link11</a><br></td><tr>';
if ($link == 5){
echo'<tr><td></td><td><li></td><td><a href="#">Link12</a><br>
<tr><td></td><td><li></td><td><a href="#">Link13</a><br>
';
}
echo'<tr><td><li></td><td colspan="2">  <a href="menue.php?link=6">Link14</a><br></td><tr>';
if ($link == 6){
echo'<tr><td></td><td><li></td><td><a href="#">Link15</a><br>
     <tr><td></td><td><li></td><td><a href="#">Link16</a><br>';
}
echo'<tr><td><li></td><td colspan="2">  <a href="#">Link17</a><br></td><tr>
</table>

';
}
echo'
<a href="#">Link9</a><br>
';
?>
2

Seitennavigationen sollten ohne plugins, anwenderseitige Skripte
oder Bilder funktionieren, sonst erfüllen sie nicht den Zweck einer
Navigation.

‘#’ ist weder ein sinnvoller noch ein gültiger Wert für das
href-Attribute des a-Elementes. Danach wird ein Buchstabe
erwartet, welcher der erste Buchstabe eines existierenden
Fragementidentifizierers ist.

Das referenzierte Dokument ist als HTML-Dokument grob
mangelhaft bis lächerlich, da solltest du dich erstmal damit
beschäftigen, wie das Grundgerüst einer HTML-Datei aussieht,
bevor du dich mit Verweisen beschäftigst.

3

Ehm…Javascript ist heutzutage Standart in JEDEM Browser! Und zudem kann man per TAG eine Alternative auf HTML Basis anzeigen lassen!
Zudem ist ‘#’ durchaus ein gültiger Wert für das “a href” TAG. Damit soll ein leerer Verweis erzeugt werden. Dies ist unter anderem dann sinnvoll, wenn TAGs wie “onmouseclick” oder ähnliche eingesetzt werden. Denn lässt man bei dem “a href” TAG den Link frei, sprich ="" dann wird bei einigen Browser kein “Click” Ereignis erzeugt und somit können eventuell vorhandene Funktionen wie das Aufklappen eines Menüs die z.B. auf Javascript oder VBScript basieren nicht durchgeführt werden!

Man verwendet ‘#’ eigentlich IMMER in Codebeispielen mit Links!

@apple: hm…ich kann leider auch kein Javascript bzw nicht soo gut :wink:
Es sollte aber mit HTML+JS zu machen sein (JS allein geht nicht) und ich denke, dass man dafür bei den “a href” TAGs ein “onmuseclick” Event einfügen muss…
Aber wie gesagt, genau kann ich es dir ledier nicht um-/beschreiben ^^

mfg
zhizhi778

4

Soll ja nur ein Beispiel für einen Link sein wen ihr eine Seite mit links haben wohl apple.bplaced.net/menue1.php (ist weiß)

aber ich dachte es ist einfacher wen ich den ganzen sinnlosen Text lösche.
Ich wollte eigentlich Hilfe wie ich das Menü in Javaskript umschreibe und nicht einen definition was eine # im Text soll das weiß ich nämlich.
Das es auch jeder weiß das ist ein Codebeispiel. Wen du den original Quelltext haben willst bitte aber ich denke da Blick nur ich durch.
Ps danke zhizhi778 mein problem ist die umsezung ich weis nicht wie ich es machen soll ich bitte nich um volständigen text nur um iden möglichkeiten dieses umzusetzen

[quote=“hoffmann”]Das referenzierte Dokument ist als HTML-Dokument grob
mangelhaft bis lächerlich, da solltest du dich erstmal damit
beschäftigen, wie das Grundgerüst einer HTML-Datei aussieht,
bevor du dich mit Verweisen beschäftigst.[/quote]
1 php Datei
2 Was ist den lächerlich an dem code? (destruktive krietik hlift nicht weiter)
3 Was Past deiner meinung nach nicht am grundgerüst des php Codbeispeils?
lg ferdi

5

habe mich mal ein bisschen erkundigt…das ist garnicht mal soo leicht^^ denn die Browserhersteller haben mit ihren Darstellungsengines für Javascript diese Aufklappfunktion nicht einheitlich gemacht :frowning:
Aber ich hab hier eine Lösung für dich:

Du musst im Headerbereich also zwischen und folgenden Code zur Browserüberprüfung einfügen:

[code][/code]

was macht der Code? Er Überprüft per Header welche Browserenginge der jeweilige Besucher benutzt und richtet dementsprechend die Richtige Syntax für den späteren Javascript teil ein, deshalb ist es unentbehrlich, diesen Code im Header stehen zu haben!
Du kannst natürlich die ID ädnern also da wo ich überall jetzt “klappmenue” stehen habe kannst du beliebiges einsetzen, bedenke jedoch, dass du dann ALLE “klappmenue” Einträge in die neue Bezeichnung umschreiben musst!

Jetzt kommt der weitere, einfachere Teil:
(folgenden Code fügst du irgendwo im Body ein :wink:)

[code]

  • Menü1
    • Punkt1
    • Punkt2
    • Punkt3
    • UndSoWeiter...
  • Menü2
    • Punkt1
    • Punkt2
    • UndSoWeiter...
[/code]

Das erstellt die Listen zum Aufklappen. Du kannst das

rausnehmen, wenn du keine Punkte vor den Einträgen haben möchtest.
Ebenso kannst du den Menüs ordentliche Namen zur Wiedererkennung geben und die IDs (“menue1” und “menue2”) kannst du auch beliebig ändern (aber immer beide Einträge gleichzeitig!) selbstverständlich die Links ‘#’ anpassen^^
Zudem kannst du soviele Punkte mit

  • Hinzufügen wie du benötigst.

    Ich hoffe ich konnte dir hiermit helfen…wenn du noch Fragen hast oder etwas unverständlich ist, dann nur zu :wink:

    mfg
    zhizhi778

    • 6

    Schonmal danke so hab ich mir das vorgestelt jext werde ich noch untermenüs wie apple.bplaced.net/menue.php?link=2 basteln mal sehen wie das wird.
    lg ferdi

    7

    [quote=“zhizhi778”]Ehm…Javascript ist heutzutage Standart in JEDEM Browser! Und zudem kann man per TAG eine Alternative auf HTML Basis anzeigen lassen!
    [/quote]
    Da gibt es in verschiedenen browsern recht verschiedene
    Implementierungen und nicht alle folgen da dem DOM und
    verwenden wirklich etwas, was komplett mit dem Standard
    ecma-script kompatibel ist.

    Zudem kann man das aus weltanschaulichen oder
    Sicherheitsgründen immer beim browser deaktivieren, etwa
    auch, weil statistisch gesehen die browser immer noch deutlich
    häufiger ‘abkacken’ oder sich aufhängen wenn man dies nicht
    tut, besonders bei fehlerhaften Skripten.
    Zudem besteht bei (X)HTML der Anspruch, daß es als
    Testbeschreibungssprache allein funktioniert und allenfalls
    dekorativ durch CSS oder solche Skriptsprachen ergänzt wird.
    Weder CSS noch java-script können da irgendeine Funktionalität
    im Dokument anbieten.

    Nein, das ist ausgeschlossen, man kann das Attribut ganz
    leer lassen, dann ist die Basisadresse gemeint, ‘#’ ist ein
    reserviertes Zeichen, welches die eigentliche URI vom
    Fragmentidentifizierer trennt. Da letzterer immer mit einem
    Buchstaben beginnt, kann hinter ‘#’ nicht einfach nichts stehen,
    das ist ein Fehler.

    Das gibt es nicht, alles was man da zu sehen bekommt, ist die
    jeweilige Fehlerbehandlung des browsers, was der konkret macht,
    ist undefiniert, kann nach ganz oben oder nach unten bei der
    Seite springen, kann auch gar nichts machen, ist reine
    Geschmacksache des Programmierers des browsers, was da
    passiert.

    Nein, sinnvoll ist es da nicht. Die Skriptsprachen haben extra
    Funktionen, mit denen man die Ausführung des Verweises
    unterbindet. Das ermöglicht dann, daß bei deaktivierter
    Skriptinterpretation der Verweis einfach so funktioniert und
    mit Skriptinterpretation eben das Skript ausgeführt, was dann
    eine gleichwertige Funktion hat wie der Verweis.
    Wenn man es nicht braucht, kann man ja auch das href ganz
    weglassen oder sogar das a-Element. Ist der Verweis oder die
    Funktion irgendwie wichtig, sollte der Verweis auch funktionieren.

    Das ist dann auch immer Unsinn ;o)

    Merkt man - ich auch nicht, aber obwohl ich das nicht selber
    verwende, habe ich sogar mehr Ahnung davon um den gröbsten
    Unfug zu erkennen ;o)

    [quote=“zhizhi778”]
    Es sollte aber mit HTML+JS zu machen sein (JS allein geht nicht) und ich denke, dass man dafür bei den “a href” TAGs ein “onmuseclick” Event einfügen muss…
    Aber wie gesagt, genau kann ich es dir ledier nicht um-/beschreiben ^^

    mfg
    zhizhi778[/quote]

    Mit onclick etc gibt man dann eine Alternative zum Verweis
    an, das stimmt. Zuvor sollte man das Menü dann erst mal ohne
    event-handler zum Laufen bringen, sonst ergibt das ganze
    Menü keinen Sinn.

    apple - in deinem Falle erzeugt dein PHP-Skript doch offenbar
    eine HTML-Ausgabe. Was der browser bekommt, sollte dann auch
    ein komplettes HTML-Dokument sein, sonst interpretiert er das
    alles als fehlerhaftes Zeug und man kann nicht prognostizieren,
    wie er das fehlerhafte Zeug interpretiert oder besser, welcher
    browser das wie interpretiert, daher läßt man Fehler besser sein
    und macht es gleich ordentlich, dann wird man auch nicht so
    durch die Reaktionen der browser auf undefiniertes Zeug
    verwirrt und man hat eine reelle Chance zu verstehen, was
    wirklich abläuft.

    Grundgerüst einer HTML-Datei ist etwa bei selfhtml erläutert:
    de.selfhtml.org/html/allgemein/grundgeruest.htm

    8

    Da gibt es nur noch ein Problem Ich will das wen ich auf Menü1 klicke und danach auf Menü2 das sich das 1 Schließt. Wie könnte ich das machen?

    Wie z.b. hier

        * Menü1
        o Punkt1
        o Punkt2
        o Punkt3
    * Menü2

Klick auf menü2
     * Menü1
     * Menü2
          o Punkt1
          o Punkt2
          o Punkt3
und vielleicht noch Untermenü aber daran werde ich wahrscheinlich knobeln wie:
     * Menü1
     * Menü2
          o Punkt1
               -Untermenü1
               -Untermenü2
          o Punkt2
          o Punkt3

    Aufjedenfall schon mal vielen dank
    PS. Hab noch was vergessen dank dir Hoffmann werde ich 2 Spurig fahren Wen der Browser Javaskript hat mit Javaskript wen nicht mit php danke aber das mit dem Kopf (Grundgerüst) sehe ich aber bei Beispielcode nicht so eng da es ja auch ausgeführt wird sollte nur bei der richtigen Webseite stimmen.

    9

    In vernünftig erstellten Seiten wäre eine solche Navigation eine (verschachtelte) Liste.
    Das kann man dann tatsächlich mit Javascript lösen, besser jedoch mit CSS und JavaScript. Zur Not auch mit PHP.
    Es stellt sich nur die Frage, warum Du mich zum herumklicken zwingen willst…?

    [quote]
    PS. Hab noch was vergessen dank dir Hoffmann werde ich 2 Spurig fahren Wen der Browser Javaskript hat mit Javaskript wen nicht mit php danke aber das mit dem Kopf (Grundgerüst) sehe ich aber bei Beispielcode nicht so eng da es ja auch ausgeführt wird sollte nur bei der richtigen Webseite stimmen.[/quote]
    Und das ist nicht nur unnötig, sondern teilweise sogar schädlich. Google wertet das als doppelten Content - mit etwas Glück fliegst Du so komplett aus dem Index…

    Wie bereits mehrfach (auch von mir, in anderen Threats) gesagt wurde, hat JavaScript nichts, in Worten: NIX, aber auch gar nichts verloren.
    Wenn Du das “aber unbedingt brauchst”, solltest Du Dir ernsthaft Gedanken um die Struktur und/oder den Sinn und Zweck Deiner Seite machen…

    10

    Roboter wie auch die von Goggle gehören doch zu den
    Seitenbenutzern, die java-script komplett zu ignorieren pflegen,
    daher wird denen gar nicht auffallen, wenn da mit java-script
    eine weitere Navigationsvariante verfügbar wird. Wenn man das
    geschickt über ein extern eingebundenes Skript und wie gedacht
    über event-handler zusätzlich einbindet, wird es da weder
    Probleme für die Roboter geben, an den eigentlichen Inhalt
    ranzukommen, noch für menschlicher Nutzer, egal ob die nun
    Skriptinterpretation aktiviert haben oder nicht.
    Sinnlos wäre es nur, wenn den skriptlosen Besuchern noch
    zusätzlich eine nicht funktionierende Skriptvariante zur Auswahl
    vorgesetzt würde oder diese von der aus erst über einen
    Notausgang zu einer skriptlosen Varianten wechseln müßten.
    Man muß das schon so hinbekommen, daß das Skript so auf
    die skriptlose Variante wirkt, daß sich für die Skriptnutzer
    automatisch ihre Alternative ergibt, etwa so wie man mit
    ’conditional comments’ eine besondere CSS-Datei für den
    MSIE reinbasteln kann, um dessen Fehler zu kompensieren, so
    kann man dann auch eine Variante reinbasteln für Besucher, die
    Skripte bevorzugen. ‘Normale’ Nutzer und Roboter bekommen
    davon dann gar nichts mit ;o)

    11

    hm…das Problem mit google ist in der Tat schwierig :confused:
    aber ich weiß nicht genau, verbessert mich bitte evtl., google scannt doch direkt in den Dateien und man hat doch die wichtigen (also die die auch auf eine Seite verlinken und nicht nur zum Aufklappen dienen) Links eigentlich OHNE Javascript, also die Links, welchein den

  • TAGs eingeschlossen sind, haben doch kein Javascript - oder?
    Demnach dürfte google keinproblem sein…
    • 12

    So schwierig ist es nicht.

    Grundsätzlich ist es “nur” eine Frage der richtigen Planung… ich setze selber ja auch auf diversen Webseiten dynamische Inhalte ein.
    Nur eben nicht in einer Navigation.

    Egal - wenn es sein muss:
    Um das Problem der Zugänglichkeit zu lösen, ist die Herangehensweise wichtig. Du hast vor, die jeweils benötigten Inhalte mit JS anzuzeigen - richtig wäre der umgekehrte Weg:
    Grundsätzlich bekommt jeder Besucher die komplette Navigation zu sehen.
    Also auch google und Besucher ohne (aktiviertes) JavaScript.
    Mit der JS-Funktion “versteckst” Du dann die Inhalte, die gerade nicht gebraucht werden.

    Im Detail sieht das so aus:
    HTML

    <ul id="navi">
  <li id="link1"><a href=... </li>
  <li id="link2"><a href=... </li>
  <li>
    <ul class="subnavi" id="subnav1">
      <li id="sublink1"><a href=...</li>
      <li id="sublink2"><a href=...</li>
    </ul>
  <li>
  <li><a href="link3"><a href=...</li>
</ul>

    So wird die Navigation aufgebaut, und so ist sie auch in jedem Browser / Robot sichtbar, bedienbar und vor allem vollständig.

    Mit JS kannst Du dann die jeweils nicht benötigten subnavis ausblenden:

    13

    Ich hab da eher an so eine Lösung gedacht
    if($_GET[‘js’]==true){
    //Javaskript
    }
    elseif($_GET[‘js’]==false){
    //php Skript
    }