Drop Down Menü

oOoJustMeoOo · Beitrag von **oOoJustMeoOo** » 05.08.2006 15:15

Habe hierher einen ganz brauchbaren Code für ein Menüeffekt, den ich auch direkt hier eingebaut habe.. Gestern hat das ganze noch funktioniert... heute geht es auf einmal nicht mehr.. und ich habe nichts währenddessen dran gemacht.. gestern funktionierte es noch einwandfrei...

Hier der Style-Code:

Code: Alles auswählen

#dropmenudiv{
		position:absolute;
		border:1px solid black;
		border-bottom-width: 0;
		font:normal 12px Verdana;
		line-height:18px;
		z-index:100;
		}

#dropmenudiv a{
		width: 100%;
		display: block;
		text-indent: 3px;
		border-bottom: 1px solid black;
		padding: 1px 0;
		text-decoration: none;
		font-weight: bold;
		}

#dropmenudiv a:hover{ 
		background-color: #ff8383;
		}

Und hier der Index Quellcode:

Code: Alles auswählen

	<head>
		<title>Delightful</title>
		<link rel="stylesheet" href="style.css">
		<script type="text/javascript">

		<script>
		/***********************************************
		* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
		* This notice MUST stay intact for legal use
		* Visit http://www.dynamicdrive.com/ for full source code
		***********************************************/

		<!--Contents for menu 1-->
		var menu1=new Array()
		menu1[0]='<a href="#">Credits </a>'
		menu1[1]='<a href="#">Impressum</a>'

		<!--Contents for menu 2-->
		var menu2=new Array()
		menu1[0]='<a href="#">Formmailer </a>'
		menu1[1]='<a href="#">Email</a>'
		menu1[2]='<a href="#">Gästebuch</a>'

		<!--Contents for menu 3-->
		var menu3=new Array()
		menu1[0]='<a href="#">Über mich </a>'
		menu1[1]='<a href="#">Steckbrief</a>'
		menu1[2]='<a href="#">Friends</a>'

		<!--Contents for menu 4-->
		var menu4=new Array()
		menu1[0]='<a href="#">Friends </a>'
		menu1[1]='<a href="#">JuKS 2006</a>'

		<!--Contents for menu 5, and so on-->
		var menu5=new Array()
		menu2[0]='<a href="#">Link</a>'
		menu2[1]='<a href="#">Link</a>'
		menu2[2]='<a href="#">Link</a>'

		var menuwidth='688px' <!--default menu width-->
		var menubgcolor='#c5d58b'  <!--menu bgcolor-->
		var disappeardelay=250  <!--menu disappear speed onMouseout (in miliseconds)-->
		var hidemenu_onclick="yes" <!--//hide menu when user clicks within menu?-->

		<!--No further editting needed-->

		var ie4=document.all
		var ns6=document.getElementById&&!document.all

		if (ie4||ns6)
		document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

		function getposOffset(what, offsettype){
		var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
		var parentEl=what.offsetParent;
		while (parentEl!=null){
		totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
		parentEl=parentEl.offsetParent;
		}
		return totaloffset;
		}


		function showhide(obj, e, visible, hidden, menuwidth){
		if (ie4||ns6)
		dropmenuobj.style.left=dropmenuobj.style.top="-500px"
		if (menuwidth!=""){
		dropmenuobj.widthobj=dropmenuobj.style
		dropmenuobj.widthobj.width=menuwidth
		}
		if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
		obj.visibility=visible
		else if (e.type=="click")
		obj.visibility=hidden
		}

		function iecompattest(){
		return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
		}

		function clearbrowseredge(obj, whichedge){
		var edgeoffset=0
		if (whichedge=="rightedge"){
		var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
		dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
		if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
		edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
		}
		else{
		var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
		var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
		dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
		if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
		edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
		if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
		edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
		}
		}
		return edgeoffset
		}

		function populatemenu(what){
		if (ie4||ns6)
		dropmenuobj.innerHTML=what.join("")
		}


		function dropdownmenu(obj, e, menucontents, menuwidth){
		if (window.event) event.cancelBubble=true
		else if (e.stopPropagation) e.stopPropagation()
		clearhidemenu()
		dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
		populatemenu(menucontents)

		if (ie4||ns6){
		showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
		dropmenuobj.x=getposOffset(obj, "left")
		dropmenuobj.y=getposOffset(obj, "top")
		dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
		dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
		}

		return clickreturnvalue()
		}

		function clickreturnvalue(){
		if (ie4||ns6) return false
		else return true
		}

		function contains_ns6(a, b) {
		while (b.parentNode)
		if ((b = b.parentNode) == a)
		return true;
		return false;
		}

		function dynamichide(e){
		if (ie4&&!dropmenuobj.contains(e.toElement))
		delayhidemenu()
		else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
		delayhidemenu()
		}

		function hidemenu(e){
		if (typeof dropmenuobj!="undefined"){
		if (ie4||ns6)
		dropmenuobj.style.visibility="hidden"
		}
		}

		function delayhidemenu(){
		if (ie4||ns6)
		delayhide=setTimeout("hidemenu()",disappeardelay)
		}

		function clearhidemenu(){
		if (typeof delayhide!="undefined")
		clearTimeout(delayhide)
		}

		if (hidemenu_onclick=="yes")
		document.onclick=hidemenu

		</script>



	</head>

	<body background="lay/lay.gif" no-repeat>

		<iframe name="content" scrolling="auto" style="position: absolute; top:471; left: 157; width: 688; height: 369"
		src="home.html" ALLOWTRANSPARENCY="true" frameborder=0 ></iframe></div>
		</div>


		<table border="0">
			<tr>
				<td height="390" width="270"><br></td>
				<td><br></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<a href="home.html" target="content"> <img src="lay/home.gif" border="0"></img></a>
					<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><img src="lay/main.gif" border="0"></img></a>
					<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><img src="lay/kontakt.gif" border="0"></img></a>
					<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><img src="lay/ich.gif" border="0"></img></a>
					<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><img src="lay/fotos.gif" border="0"></img></a>
					<a href="#"> <img src="lay/holly.gif" border="0"></img></a>
					<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()"><img src="lay/links.gif" border="0"></img></a></td>
			</tr>
		</table>

	</body>

</html>

Also ich versteh nicht, was ich falsch mache, weil es ja gestern noch ging...

oOoJustMeoOo · Beitrag von **oOoJustMeoOo** » 06.08.2006 11:48

Weiß niemand, was der Fehler sein könnte??

Beitrag von **Pyramide** » 06.08.2006 16:40

Erwartest du jetzt, daß sich jemand den Seitenlangen Code durchliest und nach möglichen Fehlern sucht?

oOoJustMeoOo · Beitrag von **oOoJustMeoOo** » 06.08.2006 17:14

Nein! Der Anfang ist ja einfach ein Java-Script, den ich genau so, wie es auf der Seite stand dahinkopiert habe.. Aber vllt liegt der Fehler in der Tabelle, die ja nicht so lang ist... Nur falls jemand mit dem Java-Code was anfangen kann oder auch mit diesem Code so Erfahrungen hat, hab ich den mal hingeschrieben.. Ich weiß ja eben auch nicht, wo der Fehler ist, klar ist nur, dass es nicht funktioniert...

Miriam · Beitrag von **Miriam** » 06.08.2006 18:19

Also auf den ersten Blick hängt es hier schon --->

Code: Alles auswählen

      <!--Contents for menu 1-->
      var menu1=new Array()
      menu1[0]='<a href="#">Credits </a>'
      menu1[1]='<a href="#">Impressum</a>'

      <!--Contents for menu 2-->
      var menu2=new Array()
      menu1[0]='<a href="#">Formmailer </a>'
      menu1[1]='<a href="#">Email</a>'
      menu1[2]='<a href="#">Gästebuch</a>'

      <!--Contents for menu 3-->
      var menu3=new Array()
      menu1[0]='<a href="#">Über mich </a>'
      menu1[1]='<a href="#">Steckbrief</a>'
      menu1[2]='<a href="#">Friends</a>'

      <!--Contents for menu 4-->
      var menu4=new Array()
      menu1[0]='<a href="#">Friends </a>'
      menu1[1]='<a href="#">JuKS 2006</a>'

      <!--Contents for menu 5, and so on-->
      var menu5=new Array()
      menu2[0]='<a href="#">Link</a>'
      menu2[1]='<a href="#">Link</a>'
      menu2[2]='<a href="#">Link</a>'

Also beim ersten Array passt es ja noch (menu1) aber dann hört es auch schon auf.
Wenn das Array menu2 heisst sollte die Wertzuweisung auch für das Array menu2 erfolgen. Also:

Code: Alles auswählen

<!--Contents for menu 2-->
      var menu2=new Array()
      menu2[0]='<a href="#">Formmailer </a>'
      menu2[1]='<a href="#">Email</a>'
      menu2[2]='<a href="#">Gästebuch</a>'

Analog für die anderen Arrays.
Probier mal.

oOoJustMeoOo · Beitrag von **oOoJustMeoOo** » 06.08.2006 18:56

Oh.. Ja stimmt...

Ist mir garnicht aufgefallen.. Blindfisch!

Danke^^ Ich probier's mal

Viiielen Dank...

Edit: Jaaa, hat geklappt..^^ Viiiielen Dank nochmal!^^