mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:10 Benutzername: Passwort: Auto-Login

Thema: Bitte um Hilfe bei Dropdown Menü vom 09.05.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Bitte um Hilfe bei Dropdown Menü
Autor Nachricht
Jenniffer
Threadersteller

Dabei seit: 03.08.2006
Ort: Augustdorf
Alter: 45
Geschlecht: Weiblich
Verfasst Mi 09.05.2007 19:33
Titel

Bitte um Hilfe bei Dropdown Menü

Antworten mit Zitat Zum Seitenanfang

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>&nbsp; <b> Startseite</b> </img></a>

<!-- Oberlink--> <a href="javascript:display('index.php?inhalt=projekt')" class="Group"><img src="pic/pfeil6.png" border=0>&nbsp; <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>&nbsp; <b> Ziele</b> </img></a>
<a href="index.php?inhalt=inhalte" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Inhalte</b> </img></a>
<a href="index.php?inhalt=methode" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Methode</b> </img></a>
<a href="index.php?inhalt=umsetzung" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Umsetzung</b> </img></a>
<a href="index.php?inhalt=entwicklung" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Entwicklung</b> </img></a>
<a href="index.php?inhalt=presse" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Presse</b> </img></a>

</div>

<!-- fest--><a href="index.php?inhalt=schulen" class="Group"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Schulen</b> </img></a>
<!-- fest--> <a href="index.php?fakten" class="Group"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Fakten</b> </img></a>

<!-- Oberlink--> <a href="javascript:display('index.php?inhalt=quali')" class="Group"><img src="pic/pfeil6.png" border=0>&nbsp; <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>&nbsp; <b> Feedback</b> </img></a>
<a href="index.php?inhalt=evaluation" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Evaluation</b> </img></a>
<a href="index.php?inhalt=trainer" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Trainer</b> </img></a>
</div>

<!-- Oberlink--> <a href="javascript:display('index.php?inhalt=ini')" class="Group"><img src="pic/pfeil6.png" border=0>&nbsp; <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>&nbsp; <b> weitere</b> </img></a>
</div>

<!-- Oberlink--> <a href="javascript:display('index.php?inhalt=kontakt')" class="Group"><img src="pic/pfeil6.png" border=0>&nbsp; <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>&nbsp; <b> stadt</b> </img></a>
<a href="index.php?inhalt=kontakt_syskoplan" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> Sysko</b> </img></a>
<a href="index.php?inhalt=kontakt_arbeitsamt" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> amt</b> </img></a>
<a href="index.php?inhalt=kontakt1" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> meier </b> </img></a>
<a href="index.php?inhalt=kontakt2" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b> müller</b> </img></a>
<a href="index.php?inhalt=kontakt3" class="Option"><img src="pic/pfeil6.png" border=0>&nbsp; <b>schulze</b> </img></a>
</div>




</div>

</body>
</html>
  View user's profile Private Nachricht senden
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Do 10.05.2007 09:22
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Account gelöscht


Ort: -
Alter: -
Verfasst Do 10.05.2007 10:09
Titel

Antworten mit Zitat Zum Seitenanfang

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ß *zwinker*
 
Jenniffer
Threadersteller

Dabei seit: 03.08.2006
Ort: Augustdorf
Alter: 45
Geschlecht: Weiblich
Verfasst Do 10.05.2007 12:08
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Do 10.05.2007 14:43
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Do 10.05.2007 21:56
Titel

Antworten mit Zitat Zum Seitenanfang

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>&nbsp; <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 &nbsp; 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.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Dropdown Menü
Dropdown als Dropup Menü
CSS Javascript Dropdown menü
IE Fehler bei DropDown Menü
JavaScript-Dropdown-Menü
[FLASH] DropDown Menü
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.