Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 01.10.2008, 11:23
Benutzerbild von pkipper
pkipper pkipper ist offline
Will keinen Titel
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 01.10.2008
Ort: Winterthur
Beiträge: 164
pkipper befindet sich auf einem aufstrebenden Ast
Unglücklich DropDown CSS/JS Mix, Kleine Frage

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&uuml;</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

Geändert von pkipper (01.10.2008 um 11:27 Uhr)
Mit Zitat antworten
Sponsored Links