[HTML,JS,CSS] mouseover menüsteuerung

2TAKTER · 23. Dezember 2005

hi
also ich würde gerne ein menü kreieren, welches bei einem mouseover auf einen link erscheint. ist so etwas nur mit java script möglich?
wie kann ich soetwas bewerkstelligen? so wie es auf giga.de gelöst ist, gefällt es mir ganz gut, nur is das auch mit JS und da habe ich keine ahnung von.

wenn es nur damit geht, könntet ihr mir einen kleinen schubs in die richtige richtung geben?

danke

mh1001 · 23. Dezember 2005

Hallo,

schaue dir dann doch einfach mal den Quelltext der Seite an.

Prinzipiell ist das Grundprinzip immer folgendermaßen:

1) Erstelle einen entprechenden DIV-Container oder ein anderes Blocklevelelement in dem nachher das Menü enthalten sein soll und weise diesem die CSS-Eigenschaft "display: none;" zu.
2) Erstelle ein Element, bei dessen mouseover-Event das Menü eingeblendet werden soll und setzte beim Auslösen des mouseover-Event per JavaScript den entsprechenden Menü-Container auf "display: block;" oder ähnliches.
3) Setze beim Verlassen der entsprechenden Bereiche den Menü-Container wieder auf "display: none;"

MfG mh1001

2TAKTER · 24. Dezember 2005

also mein code sieht jetzt so aus

Code:

<table>
<tr>
<td class='menufont'>
<a href="#" onmouseover="document.getElementById('newsmenu').style.display='block';" onmouseout="document.getElementById('newsmenu').style.display='none';">NEWS</a>
</td>
</tr>
</table>

<div id="newsmenu" style="display:none;">
<table>
<tr>
<td class='menufont'>
new news
archive
</td>
</tr>
</table>
</div>

sobald man mit dem mauszeiger über den link fährt erscheint eine neue tabelle darunter. problem, sobald man vom link geht verschwindet diese. es ist quasi unmöglich einen unterpunkt auszuwählen. hat jemand eine idee? wie kann ich eine zeitverzögerte ausblendung machen?

mh1001 · 24. Dezember 2005

Hallo,

eine Zeitverzögerung kannst du zum Beipiel mit der Funktion setTimeout() realisieren.

P.S.: Frohe Weihnachten!

MfG mh1001

2TAKTER · 24. Dezember 2005

ok der link lautet nun so

Code:

<a href="#" onmouseover="document.getElementById('newsmenu').style.display='block';" setTimeout(onmouseout="document.getElementById('newsmenu').style.display='none';",2000)>NEWS</a>

allerdings wird die tabelle nun nicht mehr ausgeblendet. habe ich einen fehler drin?

mh1001 · 24. Dezember 2005

Da hast du wohl die HTML-Attribute und JavaScript-Funktionen etwas durcheinandergeworfen.

Ich habe mich mal eben mal schnell daran gemacht, ein solches Menü zu schreiben. Dies könnte dann so aussehen:

In einem JavaScript-File oder einem Scriptbereich:

Code:

menuepunkte = new Array();

function onmouseout_event(id)
{
  window.setTimeout("ausblenden(id)", 500);

  menuepunkte[id] = 0;
}

function ausblenden(id)
{
  if(menuepunkte[id] == 0)
  {
    document.getElementById(id).style.display= 'none';
  }
}

function anzeigen(id)
{
  document.getElementById(id).style.display= 'block';

  menuepunkte[id] = 1;
}

Der dazugehörige HTML-Code:

HTML:

<div style="font-weight: bold;">
  <a href="#" onmouseover="anzeigen('newsmenu');" onmouseout="onmouseout_event('newsmenu');">NEWS</a>
</div>

<div id="newsmenu" onmouseover="anzeigen('newsmenu');" onmouseout="onmouseout_event('newsmenu');" style="display: none; border: 1px solid #000; width: 200px;">
  <ul>
    <li>new news</li>
    <li>archive</li>
  </ul>
</div>

MfG mh1001

2TAKTER · 24. Dezember 2005

Code:

<script language="Javascript" src="/ja/dxx.js">
</script>

so habe ich es im html-head eingebunden, ist doch richtig oder? leider funktioniert es nicht.
mein link und der aufruf stimmen. aber es passiert nichts

mh1001 · 25. Dezember 2005

Eigentlich sollte dies so funktionieren.
Das language="Javascript" solltest du jedoch dennoch gegen ein type="text/javascript" ersetzen.

Wie sieht denn dein kompletter Code aus?
Ich habe es testweise mit folgendem Code getestet, welcher sowohl im Firefox 1.0.7/1.5 als auch im Opera-Browser und Internet-Explorer eigentlich bestens funktioniert:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>JavaScript Dropdownmen&uuml;-Beispiel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="/scripts/menue.js" type="text/javascript"></script>
</head>

<body>

<div style="font-weight: bold;">
  <a href="#" onmouseover="anzeigen('newsmenu');" onmouseout="onmouseout_event('newsmenu');">NEWS</a>
</div>

<div id="newsmenu" onmouseover="anzeigen('newsmenu');" onmouseout="onmouseout_event('newsmenu');" style="display: none; border: 1px solid #000; width: 200px;">
  <ul>
    <li>new news</li>
    <li>archive</li>
  </ul>
</div>

</body>
</html>

MfG mh1001

2TAKTER · 25. Dezember 2005

ah war n tippfehler von mir ^^
ich danke dir. dein skript funzt super... nur das schließen musste ich ändern da es statisch bezogen war ^^

schreib mir doch ne PM mit deinem namen, würde dich gern im impressum vermerken wegen dem JS

Suche

[HTML,JS,CSS] mouseover menüsteuerung

2TAKTER

Lt. Junior Grade

mh1001

Lt. Commander

2TAKTER

Lt. Junior Grade

mh1001

Lt. Commander

2TAKTER

Lt. Junior Grade

mh1001

Lt. Commander

2TAKTER

Lt. Junior Grade

mh1001

Lt. Commander

2TAKTER

Lt. Junior Grade