zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DropDown CSS/JS Mix, Kleine Frage

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.10.2008, 11:23
Benutzerbild von pkipper
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
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Frage bzgl. Mega DropDown Menü hdwolle Javascript & Ajax 2 09.11.2010 11:04
Kleine frage zu CCSplay NoVexx CSS 1 13.06.2008 17:02
Kleine Frage zum Thema hover! fledermaus CSS 3 20.01.2007 15:31
Kleine Layout Frage ... human CSS 1 18.07.2006 18:27
Photoshop 5.5, kleine frage betreffend "rote Augen" Knuddelkamel Offtopic 7 28.11.2004 21:56


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:37 Uhr.