RyuX: Javascript Menü bitte um hilfe

Hallo,

ich bin am verzweifeln. Den ganzen Tag versuche ich eine Lösung für mein Problem zu finden aber leider kein Erfolg. Ich hoffe ihr könnt mir helfen.

Ich hab überhaupt keine Ahnung von Javascript und hab ein Menü im Netz gefunden das Untermenüs hat, genau so wie ich es haben wollte. Mein Problem ist, wie ich es mache muss wenn ein Untermenü anklickt wird das dieses Untermenü dann geöffnet bleibt und wenn man ein anderes Menü anklickt das es sich wieder schließt. Jetzt ist es so das wenn man ein Untermenü anklickt das es sich wieder schließt und nur noch die Menüs zu sehen sind (wieder im standart zustand).

Code:

Im head:

<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display= 'none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

Im body:

<div id="navibereich">

<dl id="menu">

<dt onclick="javascript:show();"><a href="index.html" onfocus="blur()">Startseite</a></dt>

<dt onclick="javascript:show('smenu2');"><a href="#">Team</a></dt>
<dd id="smenu2">
<ul>
<li><a href="mitglieder.html" onfocus="blur()">Mitglieder</a></li>
<li><a href="ehrenvorstand.html" onfocus="blur()">Ehrenvorstand</a></li>
<li><a href="nachwuchstalente.html" onfocus="blur()">Nachwuchstalente</a></li>
</ul>
</dd>

<dt onclick="javascript:show();" onfocus="blur()"><a href="teamorga.html">Teamorga</a></dt>

<dt onclick="javascript:show();" onfocus="blur()"><a href="kalender.html">Kalender</a></dt>

<dt onclick="javascript:show('smenu3');" onfocus="blur()">Ergebnisdienst</dt>
<dd id="smenu3">
<ul>
<li><a href="freundschaftspiele.html" onfocus="blur()">Freundschaftspiele</a></li>
<li><a href="turniere.html" onfocus="blur()">Turniere</a></li>
</ul>
</dd>

<dt onclick="javascript:show('smenu4');" onfocus="blur()">Fotogalarie</dt>
<dd id="smenu4">
<ul>
<li><a href="pokalvitrine.html" onfocus="blur()">Pokalvitrine</a></li>
<li><a href="unserefans.html" onfocus="blur()">Unsere Fans</a></li>
<li><a href="sonstigefotos.html" onfocus="blur()">Sonstige Fotos</a></li>
</ul>
</dd>

<dt onclick="javascript:show();"><a href="forum.html" onfocus="blur()">Forum</a></dt>

<dt onclick="javascript:show();"><a href="gaestebuch.html" onfocus="blur()">Gästebuch</a></dt>

<dt onclick="javascript:show();"><a href="kontakt.html" onfocus="blur()">Kontakt</a></dt>

<dt onclick="javascript:show();"><a href="links.html" onfocus="blur()">Links</a></dt>

<dt onclick="javascript:show();"><a href="imressum.html" onfocus="blur()">Impressum</a></dt>

</dl>
</div>

Das ist meine erste Homepage und bin noch in der lernfase

Wenn ihr ein anderen Vorschlag habt wäre ich dafür auch dankbar.

THX

  1. Hallo liebe SELFHTMLer,

    Hallo,

    ich bin am verzweifeln. Den ganzen Tag versuche ich eine Lösung für mein Problem zu finden aber leider kein Erfolg. Ich hoffe ihr könnt mir helfen.

    Ich hab überhaupt keine Ahnung von Javascript und hab ein Menü im Netz gefunden das Untermenüs hat, genau so wie ich es haben wollte. Mein Problem ist, wie ich es mache muss wenn ein Untermenü anklickt wird das dieses Untermenü dann geöffnet bleibt und wenn man ein anderes Menü anklickt das es sich wieder schließt. Jetzt ist es so das wenn man ein Untermenü anklickt das es sich wieder schließt und nur noch die Menüs zu sehen sind (wieder im standart zustand).

    Code:

    Im head:

    <script type="text/javascript">
    <!--
    window.onload=show;
    function show(id) {
    var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display= 'none';}
    }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>

    Im body:

    <div id="navibereich">

    <dl id="menu">

    <dt onclick="javascript:show();"><a href="index.html" onfocus="blur()">Startseite</a></dt>

    <dt onclick="javascript:show('smenu2');"><a href="#">Team</a></dt>
    <dd id="smenu2">
    <ul>
    <li><a href="mitglieder.html" onfocus="blur()">Mitglieder</a></li>
    <li><a href="ehrenvorstand.html" onfocus="blur()">Ehrenvorstand</a></li>
    <li><a href="nachwuchstalente.html" onfocus="blur()">Nachwuchstalente</a></li>
    </ul>
    </dd>

    <dt onclick="javascript:show();" onfocus="blur()"><a href="teamorga.html">Teamorga</a></dt>

    <dt onclick="javascript:show();" onfocus="blur()"><a href="kalender.html">Kalender</a></dt>

    <dt onclick="javascript:show('smenu3');" onfocus="blur()">Ergebnisdienst</dt>
    <dd id="smenu3">
    <ul>
    <li><a href="freundschaftspiele.html" onfocus="blur()">Freundschaftspiele</a></li>
    <li><a href="turniere.html" onfocus="blur()">Turniere</a></li>
    </ul>
    </dd>

    <dt onclick="javascript:show('smenu4');" onfocus="blur()">Fotogalarie</dt>
    <dd id="smenu4">
    <ul>
    <li><a href="pokalvitrine.html" onfocus="blur()">Pokalvitrine</a></li>
    <li><a href="unserefans.html" onfocus="blur()">Unsere Fans</a></li>
    <li><a href="sonstigefotos.html" onfocus="blur()">Sonstige Fotos</a></li>
    </ul>
    </dd>

    <dt onclick="javascript:show();"><a href="forum.html" onfocus="blur()">Forum</a></dt>

    <dt onclick="javascript:show();"><a href="gaestebuch.html" onfocus="blur()">Gästebuch</a></dt>

    <dt onclick="javascript:show();"><a href="kontakt.html" onfocus="blur()">Kontakt</a></dt>

    <dt onclick="javascript:show();"><a href="links.html" onfocus="blur()">Links</a></dt>

    <dt onclick="javascript:show();"><a href="imressum.html" onfocus="blur()">Impressum</a></dt>

    </dl>
    </div>

    Das ist meine erste Homepage und bin noch in der lernfase

    Wenn ihr ein anderen Vorschlag habt wäre ich dafür auch dankbar.

    THX

    Javascript selber ist nicht mein Themenschwerpunkt, aber wenn ich mein JavaScript ausschalte kann ich auf deiner Seite nicht navigieren.
    Möchtest du das wirklich?

    Vielleicht hast du ja noch andere Möglichkeiten dein Menü umzusetzen. Wie wäre es mit html und CSS?

    LG
    kev1n

    --

    SELFCODE:
    sh:( fo:| ch:? rl:° br:^ ie:{ mo:| va:) de:] zu:) ss:| ls:[ js:|
    ---
    1. Danke erstmal für eure Hilfe.

      Dann hätte ich noch paar Fragen an euch.
      Wie kriege ich das gleiche Menü mit HTML und CSS hin?
      Ist das überhaupt möglich? Und wenn ja, wie? Das wichtigste ist das sich das  untermenü öffnen und schließen lässt, das würde ja mit HTML und CSS noch gehen,
      aber wie mache ich es das die Seite sich nicht ändert wenn ich die untermenüs öffne?

      Zum Javascript

      Ich hab gehofft das ich nur eine kleinigkeit ändern müsste damit es klappt, scheint wohl nicht so sein :(
      Müsste ich dafür einen neun Script schreiben damit es funktioniert?
      Hier mal die Seite in dem ich den Script her habe http://tutorials.alsacreations.com/deroulant/ , ich hab das "View vertical menu" gewählt. Vielleicht steht ja da was drin, aber leider ist mein Englisch nicht so besonders :(

      Das ist das einzige was auf meiner Homepage mit Javascript werden sollte.

      RyuX

      1. Wie kriege ich das gleiche Menü mit HTML und CSS hin?

        ein klappmenu nur mit html/css ist schwierig und ebenfalls nicht einfach zu erklären

        das von dir genannte vertikale menu hingegen ist relativ simpel umzusetzen

        Das ist das einzige was auf meiner Homepage mit Javascript werden sollte.

        bau die seite ohne javascript, für diese klappmenu musst du ohne javascript die seite neu laden, mit javascript sparst du dir das - du musst also die seite sowieso mal ohne die javascriptfunktionalität machen und DANN erst diese einbauen, gleichzeitg klappt nicht

        zeichne dein menu mit einer korrekt verschachtelten unsortierten liste aus, den rest bekommst du erklärt, wenn deine seite ohne javascript funktioniert und du das begriffen hast (denn ohne dieser funktionalität klappts auch das javascript wie gesagt nicht)

        wie einer meiner vorposter schon gesagt hat - es geht nicht von 0 auf 100

        schritt 1
        baue die seite NUR mit html so, dass sie ohne css funktionell und bedienbar ist

        schritt 2
        gestalte deine seite so, dass sie mit css so aussieht wie gewünscht

        schritt 3
        peppe deine seite mit javascript gimmicks auf, die die funktionalität verbessern (aber keine neuen funktionen hinzufügen, die ohne javascript nicht bedienbar sind!) oder eben visuell die seite verbessern

  2. Hallo,

    Du schreibst:

    Ich hab überhaupt keine Ahnung von Javascript

    und

    Das ist meine erste Homepage und bin noch in der lernfase

    Wenn du gleich als erstes mit auf-/zuklappbaren Menüs und ähnlichem Schnickschnack anfängst (das ist was für Fortgeschrittene), dann muss es zwangsläufig so rauskommen:

    ich bin am verzweifeln.

    Wenn ihr ein anderen Vorschlag habt wäre ich dafür auch dankbar.

    Ja: Mit null Ahnung von JavaScript solltest du es auch nicht einsetzen. Es gibt auch ein Internet ohne JavaScript. Man kann richtig gute Seiten ganz ohne JavaScript bauen.

    Wenn du das erst mal hinbekommst dann deine Seiten noch mit JavaScript aufpeppen zu willst, kannst du es ja lernen. Aber sofort von 0 auf 100 zu wollen ist m.E. keine gute Idee.

    Gruß, Don P

  3. Hi,

    ich bin am verzweifeln.

    Aber nicht doch. Ich habe hier noch ein Script rumfliegen, das kannst Du mal testen. Auf den jeweiligen Bereichsseiten solltest Du dann noch alternative Links anbieten, dann gehts auch ohne JS.

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
    1. Hi,

      ich bin am verzweifeln.
      Aber nicht doch. Ich habe hier noch ein Script rumfliegen, das kannst Du mal testen. Auf den jeweiligen Bereichsseiten solltest Du dann noch alternative Links anbieten, dann gehts auch ohne JS.

      Gruesse, Joachim

      Danke für dein Tipp Joachim,

      Ich brauch aber eine Navileiste die Vertikal ist und die die ich habe ist das einzige was ich bis jetzt gefunden habe was genau so ist wie ich es wollte :(

      suit@ Vielen Danke auch an dich. Meine Homepage ist ja fast fertig, es fehlen nur paar seiten, aber das Layout ansich ist fertig nur die blöde Navileiste halt nicht :(

      Grüss

      RyuX

      1. Hi,

        Ich brauch aber eine Navileiste die Vertikal ist

        ahem... es hat 3 Minuten gedauert um die 5 nötigen css-Eigenschaften zu ändern: Vertikale Navi
        Ein bisschen mehr Engagement darf man schon mitbringen, gelle ;-)

        Gruesse, Joachim

        --
        Am Ende wird alles gut.
        1. Hi,

          Ich brauch aber eine Navileiste die Vertikal ist
          ahem... es hat 3 Minuten gedauert um die 5 nötigen css-Eigenschaften zu ändern: Vertikale Navi
          Ein bisschen mehr Engagement darf man schon mitbringen, gelle ;-)

          Gruesse, Joachim

          Vielen Dank für deine mühe Joachim,

          aber solche Menüs gibt es hunderte im Netz, ich brauche aber eins bei dem die Untermenüs unter dem Hauptmenüs öffnet.
          Trotzdem Thx

          RyuX