ich will euch ja auch nicht irgendwwie belöffeln, aber es sind 3 layer. rot grün und text. und die sind in einer falschen reihenfolge angeordnet. (so solls aussehen: grün rot text)
schick gleich noch eine erläuterung...
mfg
sven
Code:
var getIdMenu = "menu";
var getIdBack = 'back';
var getIdFore = 'forgound';
var getIdText = 'text';
var getAlt = "Button";
var getClUl = "Ul";
var getClLid = "Lid";
var getClLit = "Lit";
var getClLif = "Lif";
var getClLidsubd = "Lisubd";
var getClLidsubf = "Lisubf";
var getClLidsubt = "Lisubt";
var spalte = new Array(6);
spalte[0] = new Array("Home"); //spalte 1 hat 1ne zeile
spalte[1] = new Array("Mods", "CnC 3: TW", "Links");
spalte[2] = new Array("Scripts");
spalte[3] = new Array("Programming", "C++", "Java", "Links");
spalte[4] = new Array("Hausarbeiten", "Vortäge", "Facharbeiten");
spalte[5] = new Array("Kontakt", "Gästebuch", "Forum");
function appendMyMenu() {
createSection();
createText();
createFore();
createBack();}
function createSection() {
var container = document.getElementById(getIdMenu);
var back = document.createElement('div');
back.id = getIdBack;
var forground = document.createElement('div');
forground.id = getIdFore;
var text = document.createElement('div');
text.id = getIdText;
container.appendChild(back);
container.appendChild(forground);
container.appendChild(text); }
function createFore() {
for(i = 0; i <= spalte.length - 1; i++) {
var myMenu = document.getElementById(getIdFore);
var outerButton = document.createElement('ul');
outerButton.setAttribute('class', getClUl);
var innerButton = document.createElement('li');
innerButton.setAttribute('class', getClLif);
outerButton.appendChild(innerButton);
for(k = 1; k <= spalte[i].length - 1; k++) {
var subButton = document.createElement('li');
subButton.setAttribute('class', getClLidsubf);
outerButton.appendChild(subButton);
}
myMenu.appendChild(outerButton);
}
}
function createBack() {
for(i = 0; i <= spalte.length - 1; i++) {
var myMenu = document.getElementById(getIdBack);
var outerButton = document.createElement('ul');
outerButton.setAttribute('class', getClUl);
var innerButton = document.createElement('li');
innerButton.setAttribute('class', getClLid);
outerButton.appendChild(innerButton);
for(k = 1; k <= spalte[i].length - 1; k++) {
var subButton = document.createElement('li');
subButton.setAttribute('class', getClLidsubd);
outerButton.appendChild(subButton);
}
myMenu.appendChild(outerButton);
}
}
function createText() {
for(i = 0; i <= spalte.length - 1; i++) {
var myMenu = document.getElementById(getIdText);
var outerButton = document.createElement('ul');
outerButton.setAttribute('class', getClUl);
var innerButton = document.createElement('li');
innerButton.setAttribute('class', getClLit);
var myText = document.createTextNode(spalte[i][0]);
innerButton.appendChild(myText);
outerButton.appendChild(innerButton);
for(k = 1; k <= spalte[i].length - 1; k++) {
var subButton = document.createElement('li');
subButton.setAttribute('class', getClLidsubt);
var subText = document.createTextNode(spalte[i][k]);
subButton.appendChild(subText);
outerButton.appendChild(subButton);
}
myMenu.appendChild(outerButton);
}
}
link:
www.kobudokan.de/menu.js
createSection() erstellt 3 div's in dem div mit der id="menu", welches du in dem source code gesehen hast.
ein div "back", ein div "foreground" und ein div "text" in dieser reihenfolge.
createFore() und createBack() machen beide das gleiche, da ich 2 layer brauche für meinen fade-in effekt. nur dass sich jetzt die classes und id's unterscheiden!!!
<ul>
<li> Hauptbutton </li>
<li> ich bin ein untermenü </li>
<li> ich bin ein untermenü </li>
<li> ich bin ein untermenü </li>
</ul>
so sieht das grund gerüst aus. diese beiden funktionen fügen keinen text in die tags.
gibt es kein untermenü (deklariert in var spalten) wird nur ein hauptbutton erstellt.
createText() erstellt das gleiche schema wie oben nur dass es jetzt den text für die buttons einfügt.
mit appendMyMenu() werden bei onload alle funktionen aufgerufen und das menü wir dgeneriert.
ich habe das nicht einfach als html geschrieben, weil es sein kann, das man einfach noch eine spalte oder ein untermenü hinzufügen bzw. entfernen möchte.
natürlich ist das auch erst ein grundgerüst, weil links und layout natürlich noch nicht in angriff genommen wurden.
wenn aber die layer nicht in der richtigen reihen folge liegen, kann ich den fade-in effekt nicht einsetzen. (wenn ich für die class vom fordergrund jetzt die vom hintergrund benutze müsste das ganze zwar funktionieren, aber man will es aj nicht zu verwechslungen kommen lassen)
hier die css datei die dazu gehört:
Code:
#menu { padding:0;
margin:0;}
#forground { position:absolute;}
#back { position:absolute;}
#text { position:absolute; }
ul, li { list-style-type:none; }
.Ul { float:left; }
.Lid { background-color:red;
width:150px;
height:50px;
float:none; }
.Lif { background-color:green;
width:150px;
height:50px;
float:none; }
.Lit { width:150px;
height:50px;
float:none; }
.Lisubt { width:150px;
height:50px;
float:none; }
.Lisubf { width:150px;
height:50px;
float:none;
background-color:green; }
.Lisubd { width:150px;
height:50px;
float:none;
background-color:red; }
link:
www.kobudokan.de/menu.css
