Hallo allesammt,
habe mir recht kürzlich einen Code ergoogelt. Nach einigen verschwendeten stunden auf der Suche hab ich schlussendlich einen relativ einfachen code gefunden.
Der .html Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Drop-Down Menu</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css"
href="css/default2.css" />
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{ // cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose; // -->
</script>
</head>
<body>
<ul id="sddm">
<li><a href="#" onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1" onmouseover="mcancelclosetime()"
onmouseout="mclosetime()"> <a href="#">HTML
DropDown</a> <a href="#">DHTML DropDown menu</a>
<a href="#">JavaScript DropDown</a> <a
href="#">DropDown Menu</a> <a href="#">CSS
DropDown</a> </div>
</li>
<li><a href="#" onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2" onmouseover="mcancelclosetime()"
onmouseout="mclosetime()"> <a href="#">ASP
Dropdown</a> <a href="#">Pulldown menu</a> <a
href="#">AJAX dropdown</a> <a href="#">DIV
dropdown</a> </div>
</li>
<li><a href="#" onmouseover="mopen('m3')"
onmouseout="mclosetime()">Order</a>
<div id="m3" onmouseover="mcancelclosetime()"
onmouseout="mclosetime()"> <a href="#">Visa
Credit Card</a> <a href="#">Paypal</a> </div>
</li>
<li><a href="#" onmouseover="mopen('m4')"
onmouseout="mclosetime()">Help</a>
<div id="m4" onmouseover="mcancelclosetime()"
onmouseout="mclosetime()"> <a href="#">Download
Help File</a> <a href="#">Read online</a> </div>
</li>
<li><a href="#" onmouseover="mopen('m5')"
onmouseout="mclosetime()">Contact</a>
<div id="m5" onmouseover="mcancelclosetime()"
onmouseout="mclosetime()"> <a href="#">E-mail</a>
<a href="#">Submit Request Form</a> <a
href="#">Call Center</a> </div>
</li>
<li><a href="#" onmouseover="mopen('m6')"
onmouseout="mclosetime()">Mein Test Menü</a>
<div id="m6" onmouseover="mcancelclosetime()"
onmouseout="mclosetime()"><a href="#">Test
undTest</a>
<a href="#">Test ME!</a>
<a href="#">Dont do that!</a>
</div>
</li>
</ul>
</body>
</html>
Und das hier wäre der .CSS Code
Code:
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 10px arial}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #8ca75e;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #c2d79f}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #e9f2d9;
border: 1px solid #ccdbb3}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #8ca75e;
font: 10px arial}
#sddm div a:hover
{ background: #ccdbb3;
color: #FFF}
Und hier mein Hover-Code:
Code:
<td><!-- BUTTON 1: HOME --><a
href="01_home.html"><img name="Home"
src="Bilder/home_12.png"
onmouseover="this.src='Bilder/home_12b.png';"
onmouseout="this.src='Bilder/home_12.png';" border="0"></a>
</td>
... Soooo um das ganze nun mal abzuschliessen, Ich versuche den unteren Teil des Dropdownmenus (Also das Dropdownmenu an sich) unter den Hoverbutton (welchen ich bereits fertig gecodet hab) zu schieben.
Würde mich freuen wenn es jemand schaffen würde diese beiden Dinge zu verbinden... Denn ich schaffs einfach nicht -.-
Danke im Vorraus,
freundliche Grüsse Philippe