Autor |
Nachricht |
Jenniffer
Threadersteller
Dabei seit: 03.08.2006
Ort: Augustdorf
Alter: 45
Geschlecht:
|
Verfasst Mi 09.05.2007 19:33
Titel Bitte um Hilfe bei Dropdown Menü |
|
|
Hallo
Ich muss in der Schule eine Webseite mit einem (ich hoffe es ist richtig) dropdown-menü erstellen.
Es gibt den Link Startseite , Das Projekt und ein paar andere. Wenn auf Das Projekt geklickt wird sollen mehrer Unterpunkte aufgehen wie Ziele, Inhalte...
Das habe ich jetzt soweit geschafft, mein Problem ist nur das sobald ich auf den link Ziele klicke geht der Punkt das Projekt wieder zu obwohl die Unterpunkte so lange stehen bleiben sollen bis auf einnen nächsten Oberpunkt geklickt wird.
Das nächste Problem ist das ich zuvor noch nie was mit Javascript gemacht habe und aus allem was ich so im Netz finde einfach nicht schlau werde. Ich verstehe es einfach nicht.
Kann mir vielleicht jemand sagen wo der Fehler liegt???
Ich danke schon mal im voraus!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Menü von Abitur-projekt</title>
<style type="text/css">
<!--
body {
font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
}
.Group {
display: block;
padding: 5px;
color: #dfdfdf;
text-decoration: none;
}
.Group:hover {
color: #dfdfdf;
text-decoration: underline;
}
.Option {
display: block;
padding-left: 27px;
color: #dfdfdf;
text-decoration: none;
}
.Option:hover {
color: #dfdfdf;
text-decoration: underline;
}
.show {
display:inline;
}
.hide {
display:none;
}
-->
</style>
<script type="text/Javascript">
<!--
function display (category) {
var whichcategory = document.getElementById(category);
if (whichcategory.className=="show") {
whichcategory.className="hide";
} else {
whichcategory.className="show";
}
}
-->
</script>
</head>
<body>
<div title="Navigation">
<!-- fest--> <a href="index.php?inhalt" class="Group"><img src="pic/pfeil6.png" border=0> <b> Startseite</b> </img></a>
<!-- Oberlink--> <a href="javascript:display('index.php?inhalt=projekt')" class="Group"><img src="pic/pfeil6.png" border=0> <b> Projekt</b> </img></a>
<!-- Unterlinks--> <div class="hide" id="index.php?inhalt=projekt">
<a href="index.php?inhalt=ziele" class="Option"><img src="pic/pfeil6.png" border=0> <b> Ziele</b> </img></a>
<a href="index.php?inhalt=inhalte" class="Option"><img src="pic/pfeil6.png" border=0> <b> Inhalte</b> </img></a>
<a href="index.php?inhalt=methode" class="Option"><img src="pic/pfeil6.png" border=0> <b> Methode</b> </img></a>
<a href="index.php?inhalt=umsetzung" class="Option"><img src="pic/pfeil6.png" border=0> <b> Umsetzung</b> </img></a>
<a href="index.php?inhalt=entwicklung" class="Option"><img src="pic/pfeil6.png" border=0> <b> Entwicklung</b> </img></a>
<a href="index.php?inhalt=presse" class="Option"><img src="pic/pfeil6.png" border=0> <b> Presse</b> </img></a>
</div>
<!-- fest--><a href="index.php?inhalt=schulen" class="Group"><img src="pic/pfeil6.png" border=0> <b> Schulen</b> </img></a>
<!-- fest--> <a href="index.php?fakten" class="Group"><img src="pic/pfeil6.png" border=0> <b> Fakten</b> </img></a>
<!-- Oberlink--> <a href="javascript:display('index.php?inhalt=quali')" class="Group"><img src="pic/pfeil6.png" border=0> <b> Quali</b> </img></a>
<!-- Unterlinks--> <div class="hide" id="index.php?inhalt=quali">
<a href="index.php?inhalt=feedback" class="Option"><img src="pic/pfeil6.png" border=0> <b> Feedback</b> </img></a>
<a href="index.php?inhalt=evaluation" class="Option"><img src="pic/pfeil6.png" border=0> <b> Evaluation</b> </img></a>
<a href="index.php?inhalt=trainer" class="Option"><img src="pic/pfeil6.png" border=0> <b> Trainer</b> </img></a>
</div>
<!-- Oberlink--> <a href="javascript:display('index.php?inhalt=ini')" class="Group"><img src="pic/pfeil6.png" border=0> <b> ini</b> </img></a>
<!-- Unterlinks--> <div class="hide" id="index.php?inhalt=ini">
<a href="index.php?inhalt=weitere_sponsoren" class="Option"><img src="pic/pfeil6.png" border=0> <b> weitere</b> </img></a>
</div>
<!-- Oberlink--> <a href="javascript:display('index.php?inhalt=kontakt')" class="Group"><img src="pic/pfeil6.png" border=0> <b> Kontakt</b> </img></a>
<!-- Unterlinks--> <div class="hide" id="index.php?inhalt=kontakt">
<a href="index.php?inhalt=kontakt_stadtwerke" class="Option"><img src="pic/pfeil6.png" border=0> <b> stadt</b> </img></a>
<a href="index.php?inhalt=kontakt_syskoplan" class="Option"><img src="pic/pfeil6.png" border=0> <b> Sysko</b> </img></a>
<a href="index.php?inhalt=kontakt_arbeitsamt" class="Option"><img src="pic/pfeil6.png" border=0> <b> amt</b> </img></a>
<a href="index.php?inhalt=kontakt1" class="Option"><img src="pic/pfeil6.png" border=0> <b> meier </b> </img></a>
<a href="index.php?inhalt=kontakt2" class="Option"><img src="pic/pfeil6.png" border=0> <b> müller</b> </img></a>
<a href="index.php?inhalt=kontakt3" class="Option"><img src="pic/pfeil6.png" border=0> <b>schulze</b> </img></a>
</div>
</div>
</body>
</html>
|
|
|
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Do 10.05.2007 09:22
Titel
|
|
|
JavaScript hat im Menü im Idealfall nix zu suchen.
http://www.drweb.de/leseproben/klappmenu.shtml
Viel Valider und ich finde auch einfacher umzusetzen.
Zuletzt bearbeitet von Mark-Korb am Do 10.05.2007 10:51, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Do 10.05.2007 10:09
Titel
|
|
|
Mit Gültigkeit hat das aber nix zu tun. Trotzdem sollte man auf den Einsatz von JavaScript im HTML-Markup verzichten (stichwort [url=http://www.google.de/search?hl=de&q=unobtrusive+javascript&btnG=Suche]unobtrusive Javascript[/url)
prototypejs.org ist eine Seite, die dir die Javascript-Programmierung sehr einfach macht. Das in Verbindung mit der Referenz auf de.selfhtml.org reicht erstmal für ein paar gemütliche Stündchen am Rechner. Viel Spaß
|
|
|
|
|
Jenniffer
Threadersteller
Dabei seit: 03.08.2006
Ort: Augustdorf
Alter: 45
Geschlecht:
|
Verfasst Do 10.05.2007 12:08
Titel
|
|
|
Hallo-
Vielen Dank für die Antworten.
Wir habe allerdings das Problem eben selbst gelöst und haben dabei tatsächlich das Java wieder rausgeschmissen.
Auf jeden Fall steht die Navi jetzt wie sie sollte allein durch CSS und PHP
|
|
|
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Do 10.05.2007 14:43
Titel
|
|
|
Vermutlich wirst du es machen aber:
Mach auf jeden Fall einen Test mit der 5.5/6/7er iE version die ham so ihre Probleme mit Hover...
Das was ich da gepostet hatte biete aber ne nette Lösung sollte eure nicht richtig laufen.
|
|
|
|
|
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Do 10.05.2007 21:56
Titel
|
|
|
Warum in aller Welt setzt du denn bitte XHTML Strict ein, wenn du gar keine Ahnung davon hast?
Welche Vorteile versprichst du dir davon, daß du XHTML Strict anstelle von HTML einsetzt?
Dein Code ist fehlerhaft.
Wenn du XHTML einsetzt, dann mußt du inhaltsleere Elemente auch als solche kennzeichnen.
Attribute müssen zwingend in Quotes gefasst werden.
Der Javascript-Teil muß ausgelagert werden oder in einen CDATA-Bereich gefasst werden.
Image-Tags erfordern zwingend das alt-Attribut.
XHTML-Dokumente müssen wohlgeformt sein.
Du kannst außerdem keine weiteren Elemente wie z.B. <b> in Image-Tags fassen. image ist ein inhaltsleeres Element.
Falsch:
Code: | <a href="index.php?inhalt=feedback" class="Option"><img src="pic/pfeil6.png" border=0> <b> Feedback</b> </img></a> |
Richtig:
Code: | <a href="index.php?inhalt=feedback" class="Option"><img src="pic/pfeil6.png" alt="" border="0" /><b> Feedback</b></a> |
Wozu eigentlich zum Abstandhalten?
Semantisch sinnlos. Abstände kriegst du mit margin und padding oder text-indent rein.
In jedem Fall solltest du das mit CSS machen, wenn du schon XHTML Strict einsetzt.
Und zum JS-Code:
Entweder du lagerst den aus oder du mußt einen CDATA (Charcter Data)-Bereich einsetzen:
Falsch in XHTML (aber korrekt in HTML):
Code: | <script type="text/javascript">
<!--
/* JavaScript-Kommentar: jetzt folgt ein kleines Script */
if (parseInt(navigator.appVersion) < 5)
alert("Oh, ein sehr alter Browser");
/* und damit ist das Script auch schon zu ende */
//-->
</script> |
Richtig (in XHTML):
Code: | <script type="text/javascript">
/* <![CDATA[ */
/* JavaScript-Kommentar: jetzt folgt ein kleines Script */
if (parseInt(navigator.appVersion) < 5)
alert("Oh, ein sehr alter Browser");
/* und damit ist das Script auch schon zu ende */
/* ]]> */
</script> |
Ich würde dir empfehlen, den Code mal durch einen Validator zu jagen und dann alle Fehler zu beseitigen.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Dropdown Menü
Dropdown als Dropup Menü
CSS Javascript Dropdown menü
IE Fehler bei DropDown Menü
JavaScript-Dropdown-Menü
[FLASH] DropDown Menü
|
|