HILFE BITTE - CSS Aufklappmenü

[Kcio]

Hallo alle zusammen,

ich habe im mai matura und in info habe ich mir als spezialgebiet ein Css Aufklappmenü, mit einer kleinen Java script funktion ausgesucht.
ich kenne mich schon aus... jedoch habe ich einige probleme beim dem ganzen, vorallem wie das mit dem java script genau funktioniert.

deswegen kopiere ich euch meinen qulltext hinein und ich BIN ÜBER ABSOLUT JEDE HILFE UNENDLICH VIEL DANKBAR denn das ist sehr wichtig für mich.

Also: Die java script funktion:

Code:

function auf(menu) {

// DOM ALLE NEUEN BROWSER
if (document.getElementById) {
document.getElementById(menu).style.visibility="visible";
}

// IE 5

if (document.all) {
document.all[menu].style.visibility="visible";
}

// NN 4
if (document.layers) {
document.layers[menu].visibility="visible";
}
}

function zu(menu) {


if (document.getElementById) {
document.getElementById(menu).style.visibility="hidden";
}


if (document.all) {
document.all[menu].style.visibility="hidden";
}

if (document.layers) {
document.layers[menu].visibility="hidden";
}
}

Die CSS Datei für das Auf klapp menü:

Code:

/* Hauptrubriken */

div.leiste {
    text-align: center;
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    top: 15px;
    left: 430px;
    height: 14px;
    width: 100px;
    font-family: Verdana;
    font-size: 10px;
    color: #43677C;
    z-index: 3;
}


div.leiste2 {
font-weight: bold;
text-align:center;
background: #E6E6E6;
position: absolute;
color: #43677C;
top: 15px;
left:530px;
line-height: 14px;
width: 100px;
font-family: Verdana,sans-serif;
font-size: 10px;
border:solid 1px black;
z-index:3;
}


div.leiste3 {
font-weight: bold;
text-align:center;
background: #E6E6E6;
position: absolute;
color: #43677C;
top: 15px;
left: 630px;
line-height: 14px;
width: 100px;
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 10px;
border:solid 1px black;
z-index:3;
}


div.leiste4 {
font-weight: bold;
text-align:center;
background: #E6E6E6;
position: absolute;
color: #43677C;
top: 15px;
left:730px;
line-height: 14px;
width: 100px;
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 10px;
border:solid 1px black;
z-index:3;
}

div.leiste5 {
    font-weight: bold;
    text-align: center;
    background: #E6E6E6;
    color: #43677C;
    position: absolute;
    top: 15px;
    left: 830px;
    line-height: 14px;
    width: 100px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: solid 1px black;
    z-index: 3;
}


/* Position Unterrubriken */

div.menu1 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 430px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}

div.menu2 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 530px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3

}

div.menu2b {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 55px;
    left: 631px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}

div.menu3 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 630px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}


div.menu4 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 730px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}

div.menu4b {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 75px;
    left: 831px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}    

div.menu5 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 830px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}

/*
Aussehen der Links */

a:link {display: block;
text-decoration: none;
font-family:Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #43677C;
background-color:white;
width:100px;
line-height: 14px;
text-align:center;
line-height:20px;
z-index: 3
}

a:visited {
text-decoration: none;
font-family:Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #43677C;
background-color:white;
width:100px;
line-height: 14px;
text-align:center;
line-height:20px;
z-index: 3
}
a:active {
    text-decoration: none;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #43677C;
    background: #E6E6E6;
    width: 100px;
    line-height: 14px;
    text-align: center;
    line-height: 20px;
}

a:hover {
    text-decoration: none;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: black;
    background-color:#E6E6E6;
    background: url('pfeil.gif') no-repeat ;
    width: 100px;
    line-height: 14px;
    text-align: center;
    line-height: 20px;
}



und jetzt was im html head tag drinnen steht:

und jetzt was im html head tag drinnen steht:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="format.css" type="text/css">

<link rel="stylesheet" type="text/css" href="menue.css" >
<script type="text/javascript"src="menue_oben.js"></script>




<div id="leiste" class="leiste"onmouseover="auf('menu1')" onmouseout="zu('menu1')">
<a href="javascript:auf('menu1')"
onmouseover="auf('menu1')" onmouseout="zu('menu1')">
Der Verein</a></div>
<div id="menu1" class="menu1" javascript:auf('menu1')
onmouseover="auf('menu1')" onmouseout="zu('menu1')">
[url=#]Entstehung[/url]
[url=#]Angebot[/url]
[url=#]Vorstand[/url]
[url=#]Trainer[/url]
</div>

<div id="leiste2" class="leiste2" onmouseover="auf('menu2')" onmouseout="zu('menu2')">
<a href="javascript:auf('menu2')"
onmouseover="auf('menu2')" onmouseout="zu('menu2')"
>
St&auml;dte</a></div>
<div id="menu2" class="menu2" javascript:auf('menu2')
onmouseover="auf('menu2')" onmouseout="zu('menu2')"
>
[url=#]Brighton[/url]
[url=#]Bremen&raquo;[/url]
[url=#]Amsterdam[/url]
</div>

<div id="menu2b" class="menu2b" onmouseover="auf('menu2b')" onmouseout="zu('menu2b')">
[url=#]Meister[/url]
[url=#]Pokalsieger[/url]
</div>


<div id="leiste3" class="leiste3" onmouseover="auf('menu3')" onmouseout="zu('menu3')">
<a href="javascript:auf('menu3')"
onmouseover="auf('menu3')" onmouseout="zu('menu3')"
onmouseout="zu('menu3')">
Fl&uuml;sse</a></div>

<div id="menu3" class="menu3" javascript:auf('menu3')
onmouseover="auf('menu3')" onmouseout="zu('menu3')"
>
[url=#]Weser[/url]
[url=#]Rhein[/url]
[url=#]Elbe[/url]
[url=#]Main[/url]
[url=#]Isar[/url]
</div>

<div id="leiste4" class="leiste4" onmouseover="auf('menu4')" onmouseout="zu('menu4')">
<a href="javascript:auf('menu4')"
onmouseover="auf('menu4')" onmouseout="zu('menu4')"
onmouseout="zu('menu4')">
Menue4</a></div>

<div id="menu4" class="menu4" javascript:auf('menu4')
onmouseover="auf('menu4')" onmouseout="zu('menu4')"
>
[url=#]Top1[/url]
[url=#]Top2[/url]
[url=#]Top3&raquo;[/url]
[url=#]Top4[/url]
</div>

<div id="menu4b" class="menu4b" onmouseover="auf('menu4b')" onmouseout="zu('menu4b')">
[url=#]&raquo;Test1[/url]
[url=#]&raquo;Test2[/url]
[url=#]&raquo;Test3[/url]

</div>



<div id="leiste5" class="leiste5" onmouseover="auf('menu5')" onmouseout="zu('menu5')">
<a href="javascript:auf('menu5')"
onmouseover="auf('menu5')" onmouseout="zu('menu5')"
onmouseout="zu('menu5')">
Menue5</a></div>

<div id="menu5" class="menu5" javascript:auf('menu5')
onmouseover="auf('menu5')" onmouseout="zu('menu5')"
>
[url=#]Top1[/url]
[url=#]Top2[/url]
[url=#]Top3[/url]
</div>

</head>

was ich jetzt von euch brache:
wie funktioniert die java script funktion mit dem menü??
ich brauche das alles genau erklärt, welche funktion was macht und so weiter, und dann muss ich auch noch wissen wie das ganze damm im auf der html seite funktioniert mit dem layern und so weiter, ich weiß es ist viel, aber cih brauche das wirklich dringend, also wenn jeder mir ein wenig helfen kann wäre es echt super!

ausschauen tut es dann so:
VIELEN DANK!!

Chris

[Hulot]

Hallo,

den ultragenauen Durchblick habe ich zwar nicht, aber es dürfte sich bei Deinem Script um ein Uraltes handeln:

// IE 5 (Den IE6 gibts nun schon ein paar Jahre...)

if (document.all) {
document.all[menu].style.visibility="visible";
}

// NN 4 (... und Netscape 4 sollte man nun wirklich nicht mehr berücksichtigen, da uralt und äußerst komaanfällig was CSS-Styles angeht)
if (document.layers) {
document.layers[menu].visibility="visible";
}
}

Muss es unbedingt dieses Script sein?

Gruß Hulot

[Kcio]

hm... tja... könntest du mir etwas empfehlen??
pls??

wenn du was gute wüsstest... und etwas was du mir vielleicht gut erklären könntest... wäre ich dir SEHR DANKBAR!!!

danke!! mfg Chris

[Helmut]

Hi,

schau mal besser hier rein http://css.maxdesign.com.au/listamatic/ Speziell unter Links to other lists solltest Du eher fündig werden.

ich kenne mich schon aus...

...sicher dat? :wink: Das schreibt man erst wenn man sowas ohne Hilfe kann.

Cu Helmut

[Kcio]

ja du hast recht!

also danke auf jeden fall....

is echt einen super seite!