Eigenes menue?

[luxuskern]

Hallo,

ich bin recht neu hier und habe gleich ein paar schwierigkeiten...
und zwar habe ich ein template und möchte jetzt hier mein eigenes menue "reinsetzen"... problem ist, wenn ich es einfüge zerschrettert es mir die komplette seite ... hir ist mein code vom menue (den würde ich in templatexy\xtCore\boxes\box_categories.htm rein tun stimmt doch oder?):

<div id="masterdiv">

<div class="menutitle" onmouseover="this.style.background='url(menue/main_hover.png)';" onmouseout="this.style.background='url(menue/main_out.png)';" onclick="SwitchMenu('sub1')">Site Menu</div>
<span class="submenu" id="sub1">

<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="new.htm">
What's New</a></div>

<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="hot.htm">
What's hot</a></div>

<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="revised.htm">
Revised Scripts</a></div>

<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="morezone/">
More Zone</a></div>

</span>

<div class="menutitle" onmouseover="this.style.background='url(menue/main_hover.png)';" onmouseout="this.style.background='url(menue/main_out.png)';" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="morezone/">
More Zone</a></div>
<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="morezone/">
More Zone</a></div>
<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="morezone/">
More Zone</a></div>
</span>

<div class="menutitle" onmouseover="this.style.background='url(menue/main_hover.png)';" onmouseout="this.style.background='url(menue/main_out.png)';" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="morezone/">
More Zone</a></div>
</span>

<div class="menutitle" onmouseover="this.style.background='url(menue/main_hover.png)';" onmouseout="this.style.background='url(menue/main_out.png)';" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="morezone/">
More Zone</a></div>
<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="morezone/">
More Zone</a></div>
<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="morezone/">
More Zone</a></div>
<div class="sub" onmouseover="this.style.background='url(menue/sub_hover.png)';" onmouseout="this.style.background='url(menue/sub_out.png)';" ><a href="morezone/">
More Zone</a></div>
</span>
</div>

So meine CSS würd ich dann in das stylesheet.css rein machen:

.menutitle {
color:#fff;
padding-top: 5px;
padding-left: 35px;
width: 165px;
height: 25px;
background:#fff url(../menue/main_out.png);
cursorointer;
font-weight:bold;
/*/*/border:1px solid #fff;/* */
}

.sub {
color:#fff;
height: 25px;
width: 135px;
border-top:1px solid #fff;
padding:5px 0px 0px 65px;
background:#fff url(../menue/sub_out.png);

}

.submenu{
margin-bottom: 0.5em;
color: #fff;
}

a:link { color: #fff; text-decoration: none;}
a:visited { text-decoration:none; color: #fff; }
a:hover { color: #f3f3f3; text-decoration: none;}

Und hier meine JS:

// JavaScript Document

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsBy TagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(off set, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display ="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display= ="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

Das ganze sollte dann ein aufklapp menue sein... theoretisch gesehn sollte es ja kein Problem sein aber aus irgendeinen grund geht es nicht wenn mir jemand kurz sagen könnte wie ich vorgehen müsste wäre wirklich nett.

Mit freundlichen Grüßen,
Kevin Götz