Drop Down Menü
Verfasst: 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:
Und hier der Index Quellcode:
Also ich versteh nicht, was ich falsch mache, weil es ja gestern noch ging...
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;
}
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>
Viiielen Dank...