nicht angemeldet
Vertikales Menü mit Javascript
Hallo,
eigentlich wollte ich Edgar Ehritt eine Antwort geben, konnte ihm aber leider keine Antwort mehr geben, da das Ganze schon im Archiv ist. Weil ich beruflich verhindert war komme ich erst jetzt zum Schreiben.
Ich hoffe trotzdem, dass ich Edgar erreiche oder jemanden der mir helfen kann in meinem Anliegen.
Meine Online-Adresse ist: unter dieser Adresse ist unsere neue Hompage im noch nicht fertigem Stadium zu erreichen, http://www.musikverein-hirschzell.de/test/index.html
wie schon angesprochen funktioniert bei diesem Skript die Navigation nur richtig, wenn keine Untermenüs vorhanden sind. Sobald Untermenüs erweitert werden und auf den Link geklickt wird klappt eine Ebene zu und die zuletzt besuchte Seite z.B. index.html behält den Focus. Das bedeutet, dass keine HTML-Seite aufgerufen werden kann über ein Untermenü.
Auserdem kann ich unter dem Menüpunkt "Musical Perisade" keine weiteren Seiten einfügen (aktuelle Navigation enthält maximale Anzahl von Seiten), weil ansonsten ein Scriptfehler vom IE gemeldet wird. (weiter unten habe ich meine gewünschte Struktur der Navigation eingefügt).
Zuletz noch ein Design-Problem mit meiner Navigation, die ich wie ich glaube eigentlich ganz ordentlich hinbekommen habe. Nur schaffe ich es nicht den Navi-Text in den beiden Unterebenen nach rechs zu verschieben. Mit float-left, padding oder anderen mir bekannten Befehlen tut sich nichts. Wie ist es möglich den Text hier nach rechts zu verschieben?
Schon einmal besten Dank für die Unterstützung im voraus
Gruß
Thomas
HTML-Datei
<div id="navigation">
<ul id="menu">
<li><a href="index.html">Startseite</a></li>
<li><a href="mvaktuell.html">Aktuell</a></li>
<li><a href="mvtermine.html">Termine</a></li>
<li><a href="mvbesetzung.html">Besetzung</a>
<ul>
<li><a href="mvmusiker.html">Dirigent</a></li>
<li><a href="mvmusiker.html">Flöte</a></li>
<li><a href="mvmusiker.html">Klarinette</a></li>
<li><a href="mvmusiker.html">Saxophone</a></li>
<li><a href="mvmusiker.html">Trompete</a></li>
<li><a href="mvmusiker.html">Flügelhorn</a></li>
<li><a href="mvmusiker.html">Tenorhorn</a></li>
<li><a href="mvmusiker.html">Bariton</a></li>
<li><a href="mvmusiker.html">Posaune</a></li>
<li><a href="mvmusiker.html">Tuba</a></li>
<li><a href="mvmusiker.html">Schlagzeug</a>
</ul>
</li>
<li><a href="mvjugend.html">Jugendkapelle</a>
<ul>
<li><a href="mvjaktuell.html">Aktuell</a></li>
<li><a href="mvjtermine.html">Termine</a></li>
<li><a href="mvjbesetzung.html">Besetzung</a>
<ul>
<li><a href="mvjmusiker.html">Dirigent</a></li>
<li><a href="mvjmusiker.html">Flöte</a></li>
<li><a href="mvjmusiker.html">Klarinette</a></li>
<li><a href="mvjmusiker.html">Saxophone</a></li>
<li><a href="mvjmusiker.html">Trompete</a></li>
<li><a href="mvjmusiker.html">Flügelhorn</a></li>
<li><a href="mvjmusiker.html">Tenorhorn</a></li>
<li><a href="mvjmusiker.html">Bariton</a></li>
<li><a href="mvjmusiker.html">Posaune</a></li>
<li><a href="mvjmusiker.html">Tuba</a></li>
<li><a href="mvjmusiker.html">Schlagzeug</a>
</ul>
</li>
<li><a href="mvjgalerie.html">Fotogalerie</a></li>
<li><a href="mvjausbilder.html">Ausbilder</a>
</ul>
</li>
<li><a href="mvvorstand.html">Vorstand</a>
<ul>
<li><a href="mvverein.html">Vorstände</a></li>
<li><a href="mvverein.html">Dirigenten</a></li>
<li><a href="mvverein.html">Ehrenvorstände</a></li>
<li><a href="mvverein.html">Ehrenmitglieder</a></li>
<li><a href="mvverein.html">Verstorbene</a>
</ul>
</li>
<li><a href="mvmitglied.html">Mitglied werden</a>
<ul>
<li><a href="mvantrag.html">Mitgliedsantrag</a>
</ul>
</li>
<li><a href="mvchronik.html">Chronik</a></li>
<li><a href="mvpresse.html">Presseberichte</a></li>
<li><a href="mvgalerie.html">Fotogalerie</a></li>
<ul>
<li><a href="mvfoto0009.html">2000-2009</a>
<li><a href="mvfoto9099.html">1990-1999</a></li>
<li><a href="mvfoto7889.html">1978-1989</a></li>
<li><a href="mvfoto4977.html">bis 1977</a></li>
</ul>
</li/>
<li><a href="mvperisade.html">Musical Perisade</a>
<ul>
<li><a href="mvpanfang.html">Der Anfang</a></li>
<li><a href="mvphandlung.html">Handlung</a></li>
<li><a href="mvpleitung.html">Leitung</a></li>
<li><a href="mvpmusiker.html">Musiker</a></li>
<li><a href="mvpchor.html">Chor</a></li>
<li><a href="mvpdarsteller.html">Hauptdarsteller</a></li>
<li><a href="mvpakteure.html">Akteure</a></li>
<li><a href="mvphelfer.html">Helfer</a></li>
<li><a href="mvptechnik.html">Licht- und Tontechnik</a></li>
<li><a href="mvpmarkt.html">Persischer Markt</a></li>
<li><a href="mvpgalerie.html">Fotogalerie</a>
<ul>
<li><a href="mvpfotokfb.html">Kaufbeuren</a></li>
<li><a href="mvpfotofues.html">Füssen</a></li>
</ul>
</li>
<li><a href="mvpsponsoren.html">Sponsoren</a></li>
<li><a href="mvppresse.html">Presseberichte</a></li>
<li><a href="mvpbcddvd.html">Buch/CD/DVD</a>
<ul>
<li><a href="mvpbestellung.html">Bestellung</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="mvsponsoren.html">Sponsoren</a></li>
<li><a href="mvmwitze.html">Musiker-Witze</a></li>
<li><a href="mvweblinks.html">Web-Links</a></li>
<li><a href="mvgbuch.html">Gästebuch</a></li>
</ul>
</div>
CSS-Datei
#navigation {
background-color: transparent;
position: relative;
top: -1px;
left: -2px;
}
#navigation li {
background-color: transparent;
padding: 0;
margin: 0;
list-style: none;
width: 188px;
top: 0px;
left: 0px;
}
#navigation ul {
background-color: transparent;
padding: 0;
margin: 0;
}
#navigation a {
font: bold 1.75em sans-serif, Verdana, Helvetica, Arial;
text-decoration: none;
display: block;
padding: 30px 5px;
margin: 1px 0 0;
width: 188px;
border-radius: 5px;
-moz-border-radius: 5px;
}
#navigation a:link, #navigation a:visited {
color: #e0d0b0;
background-color: #004e80;
padding: 3px 4px;
border: 1px solid #0af;
}
#navigation a:hover, #navigation a:focus {
color: #ffedcd;
background-color: #804e00;
padding: 3px 4px;
border: 1px solid #fa0;
}
#navigation a:link span, #navigation a:visited span {
display: none;
}
#navigation a:hover span, #navigation a:focus span {
font-size: 2em;
line-height: 2em;
color: #804e00;
background-color: #000;
padding: 0.5em;
border-left: 2px solid #fa0;
margin: 0 0 0 188px;
height: 1.5em;
width: 660px;
display: block;
position: absolute;
top: -7px;
left: -7px;
}
#navigation ul ul a {
display: block;
font: normal 1.5em sans-serif, Verdana, Helvetica, Arial;
text-decoration: none;
}
#navigation ul ul ul a {
display: block;
font: normal 1.25em sans-serif, Verdana, Helvetica, Arial;
text-decoration: none;
}
-
Lieber ThomasG,
<div id="navigation">
<ul id="menu">1.) Wozu das <div>? Gruppierst Du wirklich _mehrere_ _Block_-Elemente damit? Und wenn ja, warum dann eine eigene ID für das <ul>-Element? Gibt es in diesem <div> noch weitere <ul>-Elemente (also auf derselben hierarchischen Ebene, sozusagen "Geschwisterknoten")?
2.) Was im <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=SELFHTML-Kapitel zu horizontalen Navigationsleisten> hat Dir nicht weitergeholfen?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)