Problem mit Hybrid CSS+JS Menü

kritop

Junior Schreiberling

Posts: 223

Date of registration: Sep 22nd 2003

Location: Bochum

1

Friday, September 3rd 2004, 9:34pm

Hallo Leute!

Irgendwie krieg ichs nicht hin das, dass submenu im IE&anderen nicht das topmenu überlagert. Das Menü ist ausser im IE pure css, da IE ja kein :hover erkennt. Im IE regelt das ein .js !

link zum Menü:
http://sani.kritop.de/hov/

CSS Dateien:
http://sani.kritop.de/hov/css/cssjsmenudhtml.css
http://sani.kritop.de/hov/css/cssjsmenuhover.css
http://sani.kritop.de/hov/css/cssjsmenustyle.css

.js Dateien:
http://sani.kritop.de/hov/scripts/dhtml.js
http://sani.kritop.de/hov/scripts/cssjsmenu.js

Vielen Dank schonmal

Wer es gelernt hat, sich von der Herrschaft des Ärgers zu befreien, wird das Leben viel lebenswerter finden. Bertrand Russel

This post has been edited 3 times, last edit by "kritop" (Sep 3rd 2004, 9:37pm)

Go to the top of the page

ap

Erfahrener Schreiberling

Posts: 269

Date of registration: Feb 14th 2002

Occupation: Student ;-)

2

Saturday, September 4th 2004, 8:57am

RE: Problem mit Hybrid CSS+JS Menü

Bei allein 29 Fehlern nur im HTML-Quelltext (ohne das JavaScript zu beachten!) wundert mich das nicht.

Nächster Punkt: Der IE unterstützt :hover. Definitiv, denn ich setze auf meinen Seiten kein JS ein, gehovert wird trotzdem, auch im IE (obwohl ich persönlich Firefox oder Mozilla Suite bevorzuge).

Dritter Punkt: Auch mit deinem JavaScript solltest du ausschließlich das CSS zur Laufzeit dynamisch verändern.

HTH

Who the fuck is General Failure and why does he read my hard disk?

Go to the top of the page

kritop

Junior Schreiberling

Posts: 223

Date of registration: Sep 22nd 2003

Location: Bochum

3

Saturday, September 4th 2004, 10:29am

Ist ja schön und gut das du die Seite in den XHTML-Validator gestopft hast und der hat dann 29 Fehler angezeigt, dass heißt aber noch lange nicht das es deshalb nicht funktioniert. Ausserdem ist die html datei garnicht das Problem. Ja IE unterstützt :hover bei TAGs, also z.B.: bei links usw. aber das wars auch schon. Was bringt mirs wenn ich das CSS verändern wenns mit CSS nie klappen wird im IE? Also wenn du das Menü pure CSS im IE realisiert kriegst hut ab und zeig mir bitte wie!

Wer es gelernt hat, sich von der Herrschaft des Ärgers zu befreien, wird das Leben viel lebenswerter finden. Bertrand Russel

Go to the top of the page

ap

Erfahrener Schreiberling

Posts: 269

Date of registration: Feb 14th 2002

Occupation: Student ;-)

4

Saturday, September 4th 2004, 10:58am

DOM kann nur funktionieren, wenn die Dokumentenstruktur einwandfrei ist! Es kommt daher doch auf die HTML-Datei an.

Ansonsten kannst Du per JS doch jederzeit die Styles ändern. Beispiel (Ausschnitt aus HTML-Code):

Source code

<script type="text/javascript">
<!--
function in() {
  document.getElementById("meinEintrag").style.backgroundColor="#FF0000";
  document.getElementById("meinEintrag").style.color="#FFFFFF";
}
function out() {
  document.getElementById("meinEintrag").style.backgroundColor="#FFFFFF";
  document.getElementById("meinEintrag").style.color="#000000";
}
//-->
</script>
<div id="meinEintrag" onMouseOver="in();" onMouseOut="out()">Test</div>

Bei diesem Beispiel wird der Hintergrund Rot, der Text weiß, wenn die Maus über dem Wort "Test" steht und schwarzer Text auf weißem Grund, wenn sie wieder ausfährt => Hover-Effekt.

Jetzt das Ganze nur noch mittels Parametern machen (damit du nicht für jedes Element eine eigene Funktion schreiben musst) und an deine Sachen anpassen. Es muss übrigens nicht unbedingt ein div-Container sein, dass funktioniert mit beliebigen Elementen. Es muss halt lediglich dafür gesorgt werden, dass die Elemente eindeutige IDs haben (siehe HTML-Spezifikation).

Zu DHTML mittels DOM gibts hier die Lektüre: http://de.selfhtml.org/dhtml/modelle/dom.htm

HTH

Who the fuck is General Failure and why does he read my hard disk?

This post has been edited 1 times, last edit by "ap" (Sep 4th 2004, 10:58am)

Go to the top of the page

Joachim

Guru

Posts: 2,863

Date of registration: Dec 11th 2001

Location: Hämelerwald

Occupation: Wissenschaftlicher Mitarbeiter (Forschungszentrum L3S, TU Braunschweig)

5

Sunday, September 5th 2004, 4:27pm

RE: Problem mit Hybrid CSS+JS Menü

Quoted

Original von kritop
Hallo Leute!

Irgendwie krieg ichs nicht hin das, dass submenu im IE&anderen nicht das topmenu überlagert. Das Menü ist ausser im IE pure css, da IE ja kein :hover erkennt. Im IE regelt das ein .js !

link zum Menü:
http://sani.kritop.de/hov/

Auch wenn Du es wahrscheinlich nicht hören willst:

Vergiß das Aufklappmenü. Und zwar aus mehreren Gründen:

Bei so wenigen Menüpunkten bringt ein aufklappendes Menü keinerlei Gewinn, es ist im Gegenteil sogar noch verwirrender, wenn etwas aufklappt. Das liegt ganz einfach daran, daß es nicht das vom Benutzer erwartete Verhalten ist -- normalerweile klappt die Navigation nicht auf. Nutzen stellt sich (wenn überhaupt) erst bei sehr vielen Unterpunkten ein.
Es ist ein fast sicheres Zeichen für schlechte Websitestruktur und unpassende Benennung von Menüpunkten, wenn diese erst aufklappen müssen, um sie zu verstehen.
Nahezu nichts, was man in Sachen Webdesign persönlich cool oder besonders hip findet, ist auch sinnvoll.

Alternativen:

so wie bisher (würde ich so machen)
Menü ständig ausgeklappt anzeigen
Menü nur bei Browsern ausklappen, die das auch mit passenden Mitteln (gleich CSS, ungleich JavaScript) hinbekommen (siehe dazu http://www.meyerweb.com/eric/css/edge/menus/demo.html).
wilde JavaScript-Frickeleien, bei denen garantiert irgendwelche ungewollten Nebeneffekte auftreten

PS: Die aktuelle Website (http://sani.kritop.de/) hat noch einige ganz andere Probleme. Eine Klappnavigation ist da nur Kosmetik. Näheres bei Interesse per Mail.

The purpose of computing is insight, not numbers.

– Richard Hamming, 1962

This post has been edited 1 times, last edit by "Joachim" (Sep 5th 2004, 5:17pm)

Go to the top of the page

Fachrat Informatik - Forum