ilch Forum » Allgemein » HTML, PHP, SQL,... » Dropdown Menü geht nicht

Geschlossen
  1. Fr. 12.11.2010 21:17 Uhr #1
    User Pic
    Venece gelöschter User
    hey leute ... habe heute mal versuch das Chromestyle DropDown menü einzubinden ...
    Nicht wundern! Ich habe in einer Spalte die normale Navi mit normalem Hovereffekt in Tabellen und in einer Spalte darunter die DropDown navi mit div-Tags

    Problem:
    1. Hover-Effekt funktioniert nicht (auch nicht bei der Tabellenschreibweise!)
    2. Das Menü klappt nicht aus 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />

<title>KILLERSTÜBCHEN v2 TEST</title>
<script type="text/javascript" src="js/chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#010101" marginwidth="0" marginheight="0" onload="MM_preloadImages('Images/hover/nav_04.gif','Images/hover/nav_05.gif','Images/hover/nav_06.gif','Images/hover/nav_07.gif','Images/hover/nav_08.gif')">
<table height="1400px" width="100%" border="0" cellspacing="0" cellpadding="0" background="images/bg.gif" style="background-position:top center">
  <tr>
    <td align="center" style="vertical-align:top"><table width="1300" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/nav_02.gif" width="210" height="65" border="0" /></td>
            <td width="240" background="images/nav_03.gif">&nbsp;</td>
            <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/hover/nav_04.gif',1)"><img src="images/nav_04.gif" name="Image1" width="71" height="65" border="0" id="Image1" /></a></td>
            <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/hover/nav_05.gif',1)"><img src="images/nav_05.gif" name="Image2" width="72" height="65" border="0" id="Image2" /></a></td>
            <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/hover/nav_06.gif',1)"><img src="images/nav_06.gif" name="Image3" width="72" height="65" border="0" id="Image3" /></a></td>
            <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/hover/nav_07.gif',1)"><img src="images/nav_07.gif" name="Image4" width="102" height="65" border="0" id="Image4" /></a></td>
            <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/hover/nav_08.gif',1)"><img src="images/nav_08.gif" name="Image5" width="87" height="65" border="0" id="Image5" /></a></td>
            <td width="446" background="images/nav_09.gif">&nbsp;</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td>
        <div style="width: 1300px; height: 65px;">
  <div style="float: left; width: 210px; height: 65px; background-image: url(images/nav_02.gif);"></div>
  <div style="float: left; width: 240px; height: 65px; background-image: url(images/nav_03.gif);"></div>
  <div class="chromestyle" id="chromemenu" style="float: left; width: 71px; height: 65px;">
    <a rel="dropmenu1" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/hover/nav_04.gif',1)">
      <img src="images/nav_04.gif" name="Image1" width="71" height="65" border="0" id="Image1" />
    </a>
  </div>
  <!-- DropDown 1 -->
  <div id="dropmenu1" class="dropmenudiv">
    <a href="index.php?news" onMouseOver="MM_swapImage('Image1','','images/hover/nav_04.gif',1)" onMouseOut="MM_swapImgRestore('Image1')">News</a>
	<a href="index.php?newsextended-archiv" onMouseOver="MM_swapImage('Image1','','images/hover/nav_04.gif',1)" onMouseOut="MM_swapImgRestore('Image1')">News Archiv</a>
    <a href="index.php?links" onMouseOver="MM_swapImage('Image1','','images/hover/nav_04.gif',1)" onMouseOut="MM_swapImgRestore('Image1')">Links</a>
	<a href="index.php?kalender" onMouseOver="MM_swapImage('Image1','','images/hover/nav_04.gif',1)" onMouseOut="MM_swapImgRestore('Image1')">Kalender</a>
	<a href="index.php?contact" onMouseOver="MM_swapImage('Image1','','images/hover/nav_04.gif',1)" onMouseOut="MM_swapImgRestore('Image1')">Kontakt</a>
	<a href="index.php?impressum" onMouseOver="MM_swapImage('Image1','','images/hover/nav_04.gif',1)" onMouseOut="MM_swapImgRestore('Image1')">Impressum</a>
  </div>
  <!-- DropDown 1 Ende -->
  <div class="chromestyle" id="chromemenu2" style="float: left; width: 72px; height: 65px;">
    <a rel="dropmenu2" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/hover/nav_05.gif',1)">
      <img src="images/nav_05.gif" name="Image2" width="72" height="65" border="0" id="Image2" />
    </a>
  </div>
  <!-- DropDown 2 -->
  <div id="dropmenu2" class="dropmenudiv">
    <a href="index.php?phgstats" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/hover/nav_05.gif',1)">&Uuml;bersicht</a>
	<a href="http://ks.gameme.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/hover/nav_05.gif',1)">HLstatsX</a>
	<a href="index.php?serverregel" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/hover/nav_05.gif',1)">Regeln</a>
	<a href="http://www.gc-server.eu" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/hover/nav_05.gif',1)">Hosted by</a>
  </div>
  <!-- DropDown 2 Ende -->
  <div class="chromestyle" id="chromemenu3" style="float: left; width: 72px; height: 65px;">
    <a rel="dropmenu3" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/hover/nav_06.gif',1)">
      <img src="images/nav_06.gif" name="Image3" width="72" height="65" border="0" id="Image3" />
    </a>
  </div>
  <!-- DropDown 3 -->
  <div id="dropmenu3" class="dropmenudiv">
    <a href="index.php?rules" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/hover/nav_06.gif',1)">Rules</a>
    <a href="index.php?teams" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/hover/nav_06.gif',1)">Teams</a>
    <a href="index.php?map" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/hover/nav_06.gif',1)">Membermap</a>
	<a href="index.php?joinus" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/hover/nav_06.gif',1)">Join us</a>
    <a href="index.php?wars" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/hover/nav_06.gif',1)">Wars</a>
	<a href="index.php?fightus" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/hover/nav_06.gif',1)">Fight us</a>
  </div>
  <!-- DropDown 3 Ende -->
  <div class="chromestyle" id="chromemenu4" style="float: left; width: 102px; height: 65px;">
    <a rel="dropmenu4" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/hover/nav_07.gif',1)">
      <img src="images/nav_07.gif" name="Image4" width="102" height="55" border="0" id="Image4" />
    </a>
  </div>
  <!-- DropDown 4 -->
  <div id="dropmenu4" class="dropmenudiv">
    <a href="index.php?forum" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/hover/nav_07.gif',1)">Forum</a>
    <a href="index.php?omember" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/hover/nav_07.gif',1)">Userlist</a>
    <a href="http://steamcommunity.com/groups/Killerfriends" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/hover/nav_07.gif',1)">SteamGruppe</a>
    <a href="index.php?gbook" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/hover/nav_07.gif',1)">G&auml;stebuch</a>
    <a href="index.php?gallery" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/hover/nav_07.gif',1)">Galerie</a>
  </div>
  <!-- DropDown 4 Ende -->
  <div class="chromestyle" id="chromemenu5" style="float: left; width: 87px; height: 65px;">
    <a rel="dropmenu5" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/hover/nav_08.gif',1)">
      <img src="images/nav_08.gif" name="Image5" width="87" height="65" border="0" id="Image5" />
    </a>
  </div>
  <!-- DropDown 5 -->
  <div id="dropmenu5" class="dropmenudiv">
    <a href="index.php?downloads" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/hover/nav_08.gif',1)">Downloads</a>
  </div>
  <!-- DropDown 5 Ende -->
  <div style="float: left; width: 446px; height: 52px; background-image: url(images/nav_09.gif)"></div>
</div>
        </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
    0 Mitglieder finden den Beitrag gut.
  2. Fr. 12.11.2010 23:01 Uhr #2
    User Pic
    TK814 Mitglied
    Registriert seit
    07.03.2009
    Beiträge
    58
    Beitragswertungen
    0 Beitragspunkte
    Versuchs mal hiermit.: 
    <style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-image:url(Bilder/main.png);
}

#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{ /*hover background color*/
background-image:url(Bilder/hover.jpg);
}

</style>

<script type="text/javascript">

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="index.php?site=news">News</a>'
menu1[1]='<a href="index.php?site=forum">Forum</a>'
menu1[2]='<a href="index.php?site=bannliste">Bann Liste</a>'
menu1[3]='<a href="index.php?site=registered_users">Mitglieder</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="index.php?site=whoisonline">Wer ist Online</a>'
menu2[1]='<a href="index.php?site=files">Downloads</a>'
menu2[2]='<a href="index.php?site=contact">Kontakt</a>'
menu2[3]='<a href="index.php?site=imprint">Impressum</a>'

//Contents for menu 3, and so on
var menu2=new Array()
menu3[0]='<a href="index.php?site=whoisonline">Wer ist Online</a>'
menu3[1]='<a href="index.php?site=files">Downloads</a>'
menu3[2]='<a href="index.php?site=contact">Kontakt</a>'
menu3[3]='<a href="index.php?site=imprint">Impressum</a>'

//Contents for menu 4, and so on
var menu2=new Array()
menu4[0]='<a href="index.php?site=whoisonline">Wer ist Online</a>'
menu4[1]='<a href="index.php?site=files">Downloads</a>'
menu4[2]='<a href="index.php?site=contact">Kontakt</a>'
menu4[3]='<a href="index.php?site=imprint">Impressum</a>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //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>



<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">lalala</a>

<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">lalala</a>

<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">lalala</a>

<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()">lalala</a>
    Wer Rechtschreibfehler findet, darf sie behalten
    0 Mitglieder finden den Beitrag gut.
  3. Fr. 12.11.2010 23:26 Uhr #3
    User Pic
    Venece gelöschter User
    hab den Fehler mit Maddin gefunden ... am ende des codes fehlte noch ein kleiner script part zwinker
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten