Navigationsleiste lässt sich schlecht bedienen

[chill]

Hallo!
Ich habe folgende Navigationsleiste:
zur Navigationsleiste

Jetzt gestaltet sich das Navigieren von z.B. 1.Mannschaft zu 2.Mannschaft etwas schwierig!Ihr könnt es euch vielleicht einmal anschauen, dann wisst ihr, was ich meine!

Hier der Quelltext:
HTML:

<ul id="Navigation">  
    <img src="Bilder/Logos/VfLNiederwerrn.png" width="150"  border="0" alt="">  
    <li><a href="index.php">Home</a></li>  
    <li><a href="Fussball">Fussball</a>  
      <ul class="zweiteebene">  
        <li><a href="index.php">1.Mannschaft</a>  
           <ul class="dritteebene">  
           <li><a href="erste-termine.php">Termine</a></li>  
           <li><a href="erste-team.php">Unser Team</a></li>  
           <li><a href="erste-spiel.php">Alles rund um's nächste Spiel</a></li>  
           </ul>  
        </li>  
        <li><a href="index.php">2.Mannschaft</a>  
           <ul class="dritteebene">  
           <li><a href="zweite-termine.php">Termine</a></li>  
           <li><a href="zweite-team.php">Unser Team</a></li>  
           <li><a href="zweite-spiel.php">Alles rund um's nächste Spiel</a></li>  
           </ul>  
        </li>  
        <li><a href="index.php">A-Jugend</a>  
           <ul class="dritteebene">  
           <li><a href="a-jugend-termine.php">Termine</a></li>  
           <li><a href="a-jugend-team.php">Unser Team</a></li>  
           <li><a href="a-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>  
           </ul>  
        </li>  
        <li><a href="index.php">B-Jugend</a>  
           <ul class="dritteebene">  
           <li><a href="b-jugend-termine.php">Termine</a></li>  
           <li><a href="b-jugend-team.php">Unser Team</a></li>  
           <li><a href="b-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>  
           </ul>  
        </li>  
        <li><a href="c-jugend.php">C-Jugend</a>  
           <ul class="dritteebene">  
           <li><a href="c-jugend-termine.php">Termine</a></li>  
           <li><a href="c-jugend-team.php">Unser Team</a></li>  
           <li><a href="c-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>  
           </ul>  
        </li>  
        <li><a href="d-jugend.php">D-Jugend</a>  
           <ul class="dritteebene">  
           <li><a href="d-jugend-termine.php">Termine</a></li>  
           <li><a href="d-jugend-team.php">Unser Team</a></li>  
           <li><a href="d-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>  
           </ul>  
        </li>  
        <li><a href="e-jugend">E-Jugend</a>  
           <ul class="dritteebene">  
           <li><a href="e-jugend-termine.php">Termine</a></li>  
           <li><a href="e-jugend-team.php">Unser Team</a></li>  
           <li><a href="e-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>  
           </ul>  
        </li>  
        <li><a href="f-jugend">F-Jugend</a>  
           <ul class="dritteebene">  
           <li><a href="f-jugend-termine.php">Termine</a></li>  
           <li><a href="f-jugend-team.php">Unser Team</a></li>  
           <li><a href="f-jugend-spiel.php">Alles rund um's nächste Spiel</a></li>  
           </ul>  
        </li>  
       </ul>  
    <li><a href="volleyball.php">Volleyball</a></li>  
    <li><a href="index.php">Korbball</a>  
      <ul class="zweiteebene">  
        <li><a href="korbballu15.php">U15</a>  
          <ul class="dritteebene">  
          <li><a href="korbball-u15-termine.php">Termine</a></li>  
          <li><a href="korbball-u15-team.php">Unser Team</a></li>  
          </ul>  
        </li>  
        <li><a href="korbballu17.php">U17</a>  
          <ul class="dritteebene">  
          <li><a href="korbball-u17-termine.php">Termine</a></li>  
          <li><a href="korbball-u17-team.php">Unser Team</a></li>  
          </ul>  
        </li>  
      </ul>  
    </li>  
    <li><a href="tischtennis.php">Tischtennis</a></li>  
    <li><a href="forum/index.php">Forum</a></li>  
    <li><a href="gaestebuch.php">Gästebuch</a></li>  
    <li><a href="kontakt.php">Kontakt</a></li>  
    <li><a href="impressum">Impressum</a></li>  
    <li><a href="allgemeines.php">Allgemeine Informationen zu unserem Verein</a></li>  
    <li><a href="cms.php">Admin- und Trainerbereich</a></li>  
      </ul>  
</div>

und der CSS-Code:

ul#Navigation li {  
 padding-top: 2pt;  
 padding-bottom: 2pt;  
}  
#Navigation li ul {  
 visibility: hidden;  
 height: 0;  
}  
  
#Navigation li:hover ul {  
 visibility: visible;  
 height: auto;  
  
}  
  
#Navigation li:active ul {  
 visibility: visible;  
 height: auto;  
}  
  
#Navigation li:focus ul {  
 visibility: visible;  
 height: auto;  
}  
  
* html ul#link li ul {  
 visibility: visible;  
 height: auto;  
}  
  
  
  
  ul#Navigation {  
    width: 10em;  
    margin: 0; padding: 0.8em;  
    border: 1px solid black;  
    background-color: #FFFFFF;  
    float:left;  
  }  
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */  
    width: 11.6em;  
    w\idth: 10em;  
    padding-left: 0;  
    padd\ing-left: 0.8em;  
  }  
  ul#Navigation li {  
    list-style: none;  
    margin: 0.4em; padding: 0;  
  }  
  ul#Navigation li ul {  
    margin: 0 0 0 1em; padding: 0;  
  }  
  ul#Navigation li ul li {  
    margin: 0.1em 0;  
  }  
  * html ul#Navigation li ul li {  /* Korrektur fuer IE 5.x */  
    margin-left: 1em;  
    ma\rgin-left: 0;  
  }  
  
  ul#Navigation a {  
    display:block;  
    padding: 0.2em;  
    text-decoration: none; font-weight: bold;  
    border: 1px solid black;  
    border-left-color: white; border-top-color: white;  
    color: black; background-color: #00FF00;  
  }  
  * html ul#Navigation a {  
    width: 100%;    /* Breitenangabe fuer IE 5.x */  
    w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */  
  }  
  * html ul#Navigation li ul li a {  
    width: 100%;    /* Breitenangabe fuer IE 5.x */  
    w\idth: 7.8em;  /* Breitenangabe fuer IE 6 */  
  }  
  ul#Navigation a:hover {  
    border-color: white;  
    border-left-color: black; border-top-color: black;  
    color: white; background-color: #00BF00;  
  }  
#Navigation ul li ul.dritteebene  
{  
 visibility: hidden;  
 height: 0;  
}  
#Navigation ul.zweiteebene li:hover ul{  
 visibility: visible;  
 height: auto;  
 }  
  
#Navigation ul.zweiteebene li:active ul{  
 visibility: visible;  
 height: auto;  
}  
  
#Navigation ul.zweiteebene li:focus ul{  
 visibility: visible;  
 height: auto;  
}

Wäre echt sehr nett wenn sich einer die Mühe machen könnte und mir vielleicht einen Tipp geben könnte!

Danke im Voraus

[bleicher]

Grüße,

Hallo!

Jetzt gestaltet sich das Navigieren von z.B. 1.Mannschaft zu 2.Mannschaft etwas schwierig!Ihr könnt es euch vielleicht einmal anschauen, dann wisst ihr, was ich meine!

nein, ich verstehe nicht was du meinst.

streng dich an und press noch ein erklärungssatz aus dir raus - ist schwierig, aber wir zählen auf dich.

MFG
bleicher

[chill]

Grüße,

Hallo!

Jetzt gestaltet sich das Navigieren von z.B. 1.Mannschaft zu 2.Mannschaft etwas schwierig!Ihr könnt es euch vielleicht einmal anschauen, dann wisst ihr, was ich meine!

nein, ich verstehe nicht was du meinst.

streng dich an und press noch ein erklärungssatz aus dir raus - ist schwierig, aber wir zählen auf dich.

MFG
bleicher

Also ich meine damit, wenn man über Fußball geht, dann über 1.Mannschaft und dann z.B. über "Alles rund ums nächste Spiel" und man dann von dort aus auf 2.Mannschaft will, dann geht das schlecht!

[chill]

Entschuldigung für die Fehler es müsste jetzt valide bis auf einen Fehler sein, der jedoch durch den Hoster(Funpic) verursacht wird!

[Heiko J.]

Ätsch, ich weiß was er meint!!! ;-)

Wenn das Untermenü von "1. Mannschaft" zuklappt, während die Maus auf "2. Mannschaft" weiterwandert, rutschen alle anderen Menüpunkte, die im Layout weiter unten liegen, nach oben. Dann steht die Maus nicht mehr über "2. Mannschaft", sondern irgendwo bei "C-Jugend" oder so. Jetzt bildlich gesprochen, nicht inhaltlich =:-(

Tja, was tun: Entweder die Menüpunkte aufgeklappt lassen wenn die Maus den Bereich verläßt, oder eine zeitliche Verzögerung einbauen.

Gruss

[chill]

Ätsch, ich weiß was er meint!!! ;-)

Wenn das Untermenü von "1. Mannschaft" zuklappt, während die Maus auf "2. Mannschaft" weiterwandert, rutschen alle anderen Menüpunkte, die im Layout weiter unten liegen, nach oben. Dann steht die Maus nicht mehr über "2. Mannschaft", sondern irgendwo bei "C-Jugend" oder so. Jetzt bildlich gesprochen, nicht inhaltlich =:-(

Tja, was tun: Entweder die Menüpunkte aufgeklappt lassen wenn die Maus den Bereich verläßt, oder eine zeitliche Verzögerung einbauen.

Gruss

Genau das hab ich gemeint!Aber wie kann man eine zeitliche Verzögerung einbauen???

[Robert Kabinger]

Genau das hab ich gemeint! Aber wie kann man eine zeitliche Verzögerung einbauen???

Mit JavaScript und der Funktion http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=setTimeout

Ich würde dir aber empfehlen einfach das "alte" Menü erst nach dem Klick auf den "neuen" Menüpunkt auszublenden.

[chill]

Genau das hab ich gemeint! Aber wie kann man eine zeitliche Verzögerung einbauen???

Mit JavaScript und der Funktion http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=setTimeout

Ich würde dir aber empfehlen einfach das "alte" Menü erst nach dem Klick auf den "neuen" Menüpunkt auszublenden.

Danke, aber wie macht man das?Wäre nett wenn du es mal kurz beschreiben könntest!

[Heiko J.]

Hallo chill!

Danke, aber wie macht man das?Wäre nett wenn du es mal kurz beschreiben könntest!

Ich fürchte, du wirst dein Menü umkodieren müssen. Mit CSS alleine wie bisher kommst du nicht mehr aus, nun kommt auch etwas Javascript ins Spiel. Schau mal unter SelfHTML unter den Stichpunkten Events, speziell onclick nach.

Auf die Schnelle ein vereinfachtes Beispiel:

<h1>Men&uuml;</h1>  
<menu class="jsm1a">  
  <li><a href="#" onclick="return jsmoc(this);">Punkt 1 &gt;</a>  
    <menu class="jsm1i">  
      <li><a href="seite11.htm">Punkt 1.1</a></li>  
      <li><a href="seite12.htm">Punkt 1.2</a></li>  
      <li><a href="#" onclick="return jsmoc(this);">Punkt 1.3 &gt;</a>  
        <menu class="jsm1i">  
          <li><a href="seite131.htm">Punkt 1.3.1</a></li>  
          <li><a href="seite132.htm">Punkt 1.3.2</a></li>  
        </menu>  
      </li>  
      <li><a href="seite14.htm">Punkt 1.4</a></li>  
    </menu>  
  </li>  
  <li><a href="#" onclick="return jsmoc(this);">Punkt 2 &gt;</a>  
    <menu class="jsm1i">  
      <li><a href="seite21.htm">Punkt 2.1</a></li>  
    </menu>  
  </li>  
</menu>  
<script type="text/javascript"><!--  
function jsmoc(e) {  
  var n=e.parentNode.childNodes,i;  
  for(i=0;i<n.length;i++) {  
    if(n[i].nodeName.toLowerCase()=="menu")  
      n[i].className=(n[i].className=="jsm1i"?"jsm1a":"jsm1i");  
  }  
  return false;  
}  
--></script>  

und das CSS dazu:

  
.jsm1a { display:block; }  
.jsm1i { display:none; }  

Du kannst anstelle des Tags <menu> auch normal <ul> oder <ol> nehmen, sieht genauso aus. Das Aussehen des Menüs kannst du per CSS an deine Wünsche anpassen.

Und wie man damit offene Menüpunkte wieder schließt, wenn man einen anderen Zweig anklickt, das wirst du in einem Selbstfindungskursus mit Hilfe von SelfHTML entdecken ;-)

Gruss
Heiko J.

[chill]

Hallo chill!

Danke, aber wie macht man das?Wäre nett wenn du es mal kurz beschreiben könntest!
Ich fürchte, du wirst dein Menü umkodieren müssen. Mit CSS alleine wie bisher kommst du nicht mehr aus, nun kommt auch etwas Javascript ins Spiel. Schau mal unter SelfHTML unter den Stichpunkten Events, speziell onclick nach.

Auf die Schnelle ein vereinfachtes Beispiel:

<h1>Men&uuml;</h1>

<menu class="jsm1a">
  <li><a href="#" onclick="return jsmoc(this);">Punkt 1 &gt;</a>
    <menu class="jsm1i">
      <li><a href="seite11.htm">Punkt 1.1</a></li>
      <li><a href="seite12.htm">Punkt 1.2</a></li>
      <li><a href="#" onclick="return jsmoc(this);">Punkt 1.3 &gt;</a>
        <menu class="jsm1i">
          <li><a href="seite131.htm">Punkt 1.3.1</a></li>
          <li><a href="seite132.htm">Punkt 1.3.2</a></li>
        </menu>
      </li>
      <li><a href="seite14.htm">Punkt 1.4</a></li>
    </menu>
  </li>
  <li><a href="#" onclick="return jsmoc(this);">Punkt 2 &gt;</a>
    <menu class="jsm1i">
      <li><a href="seite21.htm">Punkt 2.1</a></li>
    </menu>
  </li>
</menu>
<script type="text/javascript"><!--
function jsmoc(e) {
  var n=e.parentNode.childNodes,i;
  for(i=0;i<n.length;i++) {
    if(n[i].nodeName.toLowerCase()=="menu")
      n[i].className=(n[i].className=="jsm1i"?"jsm1a":"jsm1i");
  }
  return false;
}
--></script>

>   
> und das CSS dazu:  
> ~~~css
  

> .jsm1a { display:block; }  
> .jsm1i { display:none; }  
> 

Du kannst anstelle des Tags <menu> auch normal <ul> oder <ol> nehmen, sieht genauso aus. Das Aussehen des Menüs kannst du per CSS an deine Wünsche anpassen.

Und wie man damit offene Menüpunkte wieder schließt, wenn man einen anderen Zweig anklickt, das wirst du in einem Selbstfindungskursus mit Hilfe von SelfHTML entdecken ;-)

Gruss
Heiko J.

Vielen Dank!Ich werds mal versuchen!

[bleicher]

Grüße,

Ätsch, ich weiß was er meint!!! ;-)

ja  - jetzt wo es valide ist und opera es auch so anzeigt wie er meint.. davor rutschte nix - die unterpunkte wurden in den lücken eingeblendet.
MFG
bleicher

[Malcolm Beck´s]

hi,

Ich habe folgende Navigationsleiste: zur Navigationsleiste

Hier gibt es eine mindestanforderung von Validem Code bei Problemen mit der darstellung -- mindestens Grün.

Wäre echt sehr nett wenn sich einer die Mühe machen könnte und mir vielleicht einen Tipp geben könnte!

Zuerst einmal musst du dir die Mühe machen und dein Dokument Validieren, in der Regel erübrigen sich die meisten Probleme damit.

mfg