• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

horizontales Menu -> Mouse Over

Status
Für weitere Antworten geschlossen.
B

burbe

Neues Mitglied
Hallo erstmal,

ich bin neu hier und hab n Problem an dem ich gerade schier verzweifle...

hab hier ein script, das sehr schlicht aber schön aussieht, auch soweit bearbeitet nur ich bekomm hier kein Mouseover für die Links rein... Hilfe wäre sehr nice... ich denk es ist auch recht einfach aber irgendwie wills nich :/
<Html>
<body>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 12px 0 0;
padding: 0;
}

#menu {
position : absolute;
left: 50px;
top: 20px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #000000;
background: #FFFFFF;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.9em;
border-top: 1px solid gray;
width: 400px;
}


.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}

-->
</style>

</head><body>

<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="#">Firma</a></dt>
<dd style="display: none;" id="smenu1">
<ul>
<li><a href="#">Geschichte</a></li>
<li><a href="#">Unternehmen</a></li>
<li><a href="#">Zukunft</a></li>
</ul>
</dd>

</dl>

<dl>
<dt onmouseover="montre('smenu2');"><a href="#">Produkte</a></dt>
<dd style="display: block;" id="smenu2">
<ul>
<li><a href="#">Wechsel</a></li>
<li><a href="#">Pritsche</a></li>
<li><a href="#">Koffer</a></li>
<li><a href="#">Sonder</a></li>
<li><a href="#">Ersatzteile</a></li>
</ul>

</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Service</a></dt>
<dd style="display: none;" id="smenu3">
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Abnahmen</a></li>
<li><a href="#">Ansprechpartner</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu4');"><a href="#">Extras</a></dt>

<dd style="display: none;" id="smenu4">
<ul>
<li><a href="#">Galerie</a></li>
<li><a href="#">Weltkarte</a></li>
<li><a href="#">Referenzen</a></li>
</ul>
</dd>

</dl>

</div>
</body>
</html>
Zum Vergrößern anklicken....
 
Bei mir werden die Untermenüs angezeigt, FF3 und IE7, Opera und Safari hab ich jetzt nicht getestet.

Aber es fällt auf, dass bei dir der Doctype und der Titel fehlt, und du öffnest den body direkt nacht dem html, dann machst du den head zu, der aber nirgends geöffnet wird und dann machst du den body nochmal auf. Das erste body sollte wohl ein head sein.

Sollte es dann noch immer nicht gehen, wären ein paar genauere Informationen hilfreich (verwendeter Browser, Screenshot oder link zur Seite).
 
Hi ho,
habe mal das head und den rest geändert, war allerdings auch nur ein Teil, da es ja wo eingefügt wird.

Das komische is halt das wenn ich per css, hover link usw einfüge, der cursor zum Crosshair wird, was ich nur als beispiel eingefügt habe, aber die Farbe sich nicht ändert weiß jemand warum??

Anbei noch einmal das Script, leicht abgeändert, normal müsste sich der Link in Pink verwandeln, sobald ich drüber gehe... oder was mache ich Falsch??
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="de" lang="de">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>MiFaGm</title>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}

a:link { color:#FFGGFF ; cursor:crosshair; text-decoration: none }
a:visited { color:#FFGGFF; cursor:crosshair; text-decoration: none }
a:active { color:#FFGGFF; cursor:crosshair; text-decoration: none }
a:hover { color:#FFGGFF; cursor:crosshair; text-decoration: none}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 12px 0 0;
padding: 0;
}

#menu {
position : absolute;
left: 10px;
top: 10px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #000000;
background: #FFFFFF;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.9em;
border-top: 1px solid gray;
width: 400px;
}


.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}

-->
</style>

</head><body>

<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="#">Firma</a></dt>
<dd style="display: none;" id="smenu1">
<ul>
<li><a href="#">Geschichte</a></li>
<li><a href="#">Unternehmen</a></li>
<li><a href="#">Zukunft</a></li>
</ul>
</dd>

</dl>

<dl>
<dt onmouseover="montre('smenu2');"><a href="#">Produkte</a></dt>
<dd style="display: block;" id="smenu2">
<ul>
<li><a href="#">Wechsel</a></li>
<li><a href="#">Pritsche</a></li>
<li><a href="#">Koffer</a></li>
<li><a href="#">Sonder</a></li>
<li><a href="#">Ersatzteile</a></li>
</ul>

</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Service</a></dt>
<dd style="display: none;" id="smenu3">
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Abnahmen</a></li>
<li><a href="#">Ansprechpartner</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu4');"><a href="#">Extras</a></dt>

<dd style="display: none;" id="smenu4">
<ul>
<li><a href="#">Galerie</a></li>
<li><a href="#">Weltkarte</a></li>
<li><a href="#">Referenzen</a></li>
</ul>
</dd>

</dl>

</div>
</body>
</html>
Zum Vergrößern anklicken....
 
Also, erstmal gibt es den Farbcode #FFGGFF nicht, der geht nur von #000000 bis #FFFFFF und dann würde ich mal etwas aufräumen
Code: 
a {text-decoration: none;
color: #222;
}

#menu a {
text-decoration: none;
color: #000000;
background: #FFFFFF;
}

a:link { color:#FFGGFF ; cursor:crosshair; text-decoration: none }
a:visited { color:#FFGGFF; cursor:crosshair; text-decoration: none }
a:active { color:#FFGGFF; cursor:crosshair; text-decoration: none }
a:hover { color:#FFGGFF; cursor:crosshair; text-decoration: none}
dann, klappts auch wieder mit der Farbe.
 
Du schreibst dir eine Methode mit dem Inhalt
Code: 
for (var i = 1; i < 5; i++){
  if (document.getElementById('smenu' + i)) {
    document.getElementById('smenu' + i).style.display='none';
  }
}
, übergibst ihr wie bei der function montre die id und rufst die mit onmouseout auf. Dann schließt sich das Menü.
 
Danke für die Hilfe, werde es Montag in der ARbeit mal einbauen
-> nur mal noch ne Frage, das liegt ja in nem Layer drin, wenn ich den entfern dann funktioniert es ja nicht mehr nur
wenn jemand ne andere AUflösung hat dann verschiebt es mir das ja mit der abolusten position, das müsste ich doch normal
einfach in ne tabelle inefügen können, aber wenn ich die div weg mache gehts nich?!
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben