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

eigenes contextmenü

Status
Für weitere Antworten geschlossen.
E

Elessar

Neues Mitglied
eigenes contextmenü

Ich habe in einem anderen Forum diesen code (darunter) aufgegabelt. Er zeigt auf rechtsklick ein eigenes contextmenü. Jetzt wollt ich den code so umschreiben, dass das contextmenü nicht auf rechtsklick geöffnet wird, sondern als hover effekt, also wenn ich über einen link fahre. Da ich mich mit JavaScript nicht gut auskenne, wollte ich fragen ob mir da jemand weiterhelfen kann.
Danke jetzt schon


Code: 
<html>
<head>

<script type="text/javascript">
<!--
var x=0;
var y=0;
function contextmenu(e)
	{
	document.getElementById('contextmenu').style.display = "block";

	x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;

	document.getElementById('contextmenu').style.left = x;
	document.getElementById('contextmenu').style.top = y;
	}
function closecontextmenu()
	{
	document.getElementById('contextmenu').style.display = "none";
	}

document.oncontextmenu=contextmenu;
document.onclick=closecontextmenu;

//-->
</script>

<style type="text/css">
<!--
a.contextmenu_link, a.contextmenu_link:visited
	{
	display: block;
	background-color: #FFFFFF; 
	font-family: Verdana; 
	color: #000000;
	font-size: 12px; 
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 1px;
	width: 120px;
	text-decoration: none;
	}
a.contextmenu_link:hover, a.contextmenu_link:active
	{
	display: block;
	background-color: #316AC5; 
	font-family: Verdana; 
	color: #FFFFFF;
	font-size: 12px; 
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 1px;
	width: 120px;
	text-decoration: none;
	}
//-->
</style>
</head>

<body oncontextmenu="return false" oncontext="return false">
<div id="contextmenu" style="display: none; position: absolute; border: 1px solid #555555; background-color: #FFFFFF; padding: 3px;border-style:outset">
[url="#"]- link Nr. 1[/url]
[url="#"]- link Nr. 2[/url]
[url="#"]- link Nr. 3[/url]
[url="#"]- link Nr. 4[/url]
[url="#"]- link Nr. 5[/url]
[url="#"]- link Nr. 6[/url]
</div>
</body>
</html>
 
supercode, nur helfen kann ich dir nich :mrgreen:
aber vll hilft dir das hier wieter:
Code: 
<html>
<head>
<title>Men&uuml;punkte mit Css!</title>
<style type="text/css">
#box {
position:absolute; top:50px; left:50px;
z-index:3;
}
#box a {
color:#ffffff;
background:#b3b06c;
font:bold 10px verdana, sans-serif;
text-decoration:none;
display:block;
padding:2px;
border:1px solid black;
}
#box a:hover {
color:black;
background:#ddd8b7;
width:400px;
}
#box a span {display:none;
}
#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
</style>




</head>
<body>


<div id = "box"><a href = "#">Obertext<span><a href = "irgendowhin.html" target = "dahin">Link1</a><a href = "noch_wohin.html" target = "dahin">Link2</a></span></a></div>


</body>
</html>
guck in dir einfach mla im browser an!
dann kannst dus ja nach deinen wünschen verändern!
 
Müsste eigentlich mit
Mouseover
Funktionieren. Selber weis ich das nicht :oops:
aber guck doch mal bei Self HTML da sollte was darüber stehen!
 
öööm also ich hab ma rumprobiert...

aber bei mir geht das von Mr. DHTML leider nicht :(
ich kann nicht auf link1 oder link2 klicken, denn wenn ich die maus runter bewege, verschwindet das menü schon wieder :-/ (bei IE)

bei FF zeigt er die links schon vorher an... :-/

aber das von Elessar funktioniert. ist auch ne coole sache :D
also thx ertstmal (endlich mal wieder ne gute idee für meine seite :mrgreen: )
 
ja ich überleg gerade, wie ich des damals hingekriegt ahbe, dass das menü dann steht blieb! :idea:
 
wenn du es wieder weißt, schreib rein...

und es sollte mögligst auch bei firefox richtig funktionieren....
aber ansonten ist das schon ma ne coole sache :D
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben