Dropdown Menü geht nicht

Gehe zu Seite:

Geschlossen

Fr. 12.11.2010 21:17 Uhr #1

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!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.

zitieren

Fr. 12.11.2010 23:01 Uhr #2

TK814 Mitglied

Versuchs mal hiermit.:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

<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.

zitieren

Fr. 12.11.2010 23:26 Uhr #3

Venece gelöschter User

hab den Fehler mit Maddin gefunden ... am ende des codes fehlte noch ein kleiner script part
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

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