nicht angemeldet
Hallo !
Wie mache ich denn solche Menüs wie bei Microsoft.com ? Also, solche die bei einem MouseOver hervorkommen und dann wieder bei MouseOut verschwinden ? Und natürlich so, daß Sie sowohl Netscape als auch IE kompatibel sind ?
du kannst es mal mit dem folgenden Code versuchen (sorry, das ist ziemlich viel Text), den ich selber auf einer Seite verwende:
<html>
<head>
<title>Menue 1</title>
<base target="_blank">
<style>
.menu
{
position: absolute;
z-index: 1;
padding:3;
border-width: 2;
border-style: ridge;
background-color: white;
color: black;
}
</style>
<script language="JavaScript">
var mpos=new Array();
var mdir=new Array();
var maxmenus=5;
var delay=2;
function do_menu(menu){
for(i=0; i<maxmenus; i++){
if(menu!=i && mpos[i]>-225){
mdir[i]=-20;
if(mpos[i]>=35)
move_menu(i);
}
}
mdir[menu]=-mdir[menu];
if(mpos[menu]<=-225 mpos[menu]>=35)
move_menu(menu);
}
function move_menu(menu){
mpos[menu]+=mdir[menu];
if(document.layers)
document.layers["menu"+menu].top=mpos[menu];
else
document.all["menu"+menu].style.top=mpos[menu];
if(mpos[menu]>-225 && mpos[menu]<230)
setTimeout("move_menu("+menu+")", delay);
}
function init(){
for(i=0; i<maxmenus; i++){
mpos[i]=-225;
mdir[i]=-20;
}
}
</script>
<style type="text/css">
<!--
p { font-size:10pt; font-family: Arial,Sans-serif; text-align:justify }
p.normal { font-size:10pt; font-family: Arial,Sans-serif; text-align:left }
//-->
</style>
</head>
<body onload="init()">
<p>Dieses script erzeugt ein aus fünf Feldern bestehendes Menü mit sich aufrollenden
Untermenüs. Es wird etwa in der Mitte des Browserfensters positioniert. Für die jeweils
gewünschte Positionierung müssen die Positionsangaben "mpos" und "mdir" entsprechend
angepaßt - und selbstverständlich müssen auch die Adreßangaben korrigiert werden. </p>
<p> </p>
<p> </p>
<p> </p>
<p>
<dl>
<div class="menu" style="left:15; width: 150; z-index:2"><p class="normal">
<a href="javascript:do_menu(0)" target="_self"><b>Seitenauswahl</b></a></p>
</div>
<div id="menu0" class="menu" style="top:-170; left:15; width:150; position: absolute">
<dd><p class="normal"><b><br>
<a href="index.html" target="_self">Startseite</a><br>
<a href="main.html" target="_self">Hauptseite</a><br>
Seite 3<br>
Seite 4<br>
Seite 5<br>
</b></p>
</dd>
</div>
<div class="menu" style="left:163; width: 150; z-index:2"><p class="normal">
<a href="javascript:do_menu(1)" target="_self"><b>Java-Applets</b></a></p>
</div>
<div id="menu1" class="menu" style="top:-225; left:163; width: 150; position: absolute">
<dd><p class="normal"><b><br>
<a href="applets1.html" target="_self">Applets 1</a><br>
<a href="applets2.html" target="_self">Applets 2</a><br>
<a href="applets3.html" target="_self">Applets 3</a><br>
<a href="applets4.html" target="_self">Applets 4</a><br>
<a href="applets5.html" target="_self">Applets 5</a><br>
<a href="applets6.html" target="_self">Applets 6</a><br>
<a href="applets7.html" target="_self">Applets 7</a><br>
</b></dd>
</div>
<div class="menu" style="left:310; z-index:2; width: 150"><p class="normal">
<a href="javascript:do_menu(2)" target="_self"><b>JavaScript-Seiten</b></a></p>
</div>
<div id="menu2" class="menu" style="top:-230; left:310; width: 150; position: absolute">
<dd><p class="normal"><b><br>
<a href="jscript01.html" target="_self">erste Seite</a><br>
<a href="jscript02.html" target="_self">zweite Seite</a><br>
<a href="jscript03.html" target="_self">dritte Seite</a><br>
<a href="jscript04.html" target="_self">vierte Seite</a><br>
</b></dd>
</div>
<div class="menu" style="left:458; z-index:2; width: 150"><p class="normal">
<a href="javascript:do_menu(3)" target="_self"><b>Fractale</b></a></p>
</div>
<div id="menu3" class="menu" style="top:-230; left:458; width: 150 ; position:absolute">
<dd><p class="normal"><b><br>
Fractale 1<br>
Fractale 2<br>
Fractale 3</b></dd>
</div>
<div class="menu" style="left:606; z-index:2; width: 150"><p class="normal">
<a href="javascript:do_menu(4)" target="_self"><b>verschiedene Links</b></a></p>
</div>
<div id="menu4" class="menu" style="top:-230; left:606; width: 150; position: absolute">
<dd><p class="normal"><b><br>
<a href="http://msn.de">MSN-Portalseite</a><br>
<a href="http://java.sun.com">Sun Microsystems</a><br>
</b></dd>
</div>
</dl>
</body>
</html>
Christoph S.