Javascript-Navi mit Unterleiste

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/javascript-navi_mit_unterleiste_76678/page_1 - zur Vollversion wechseln!

grOOvekill@ schrieb am 28.04.2003 um 12:59

S'gott,

habe hier ein kleines Problem, da ich mit Javascript leider nicht so gut kann. Hab zwar schon gegoogelt, aber ich dachte mir, ich frag euch auch mal:

Ich brauche eine Navigationsleiste, die in etwa so aussieht:

Die rote Leiste beinhaltet Links die, sobald ich mit der Mouse drüberfahre, einen Unterbalken in der grünen Sub-Navogationsleiste anzeigen. Ich habe zwar einige Javascripts, die ganz nette Mouse-Over-Effekte bieten, aber das krieg ich irgendwie nicht hin. Ich nehme mal an, daß da auch ein wenig mit Tabellen und so rumgespielt werden muß. Nur wie geht das in Javascript?

Inspiriert hat mich übrigens die Navigationsleiste von Standard.at

Bin dankbar für jeden Hinweis

atrox schrieb am 28.04.2003 um 13:07

die untermenüs versteckst du am besten in <div id=untermenuXYZ>s die defaultmäßig nicht sichtbar sind (style='display:'none'), und erst bei einem onmouseover bzw onclick auf den hauptmenüpunkten führst du ein document.getElementByID('untermenuXYZ').style.display='block' (und alle anderen auf display='none') aus.

grOOvekill@ schrieb am 28.04.2003 um 13:13

Puh, das klingt zwar alles sehr einleuchtend, aber ich weiß nicht so recht, wo ich anfangen soll und wo die info jeweils eingetragen werden soll. soll ich erstmal eine tabelle erstellen und die jeweiligen menüpunkte da reinklatschen? wie soll ich vorgehen?

Yeahman schrieb am 28.04.2003 um 18:32

ich würd zuerst die Tabelle ausgeben, dann irgentwas bei onmouseover machen, und am Ende die Untermenüs rein

watchout schrieb am 28.04.2003 um 19:57

Zitat von Yeahman
ich würd zuerst die Tabelle ausgeben, dann irgentwas bei onmouseover machen, und am Ende die Untermenüs rein

wers gscheit machen will braucht auch keine tables...
<div>{home}{link1}{link2}{link3}....</div>
<div>
<div id="X1" style="display:none;">{link1sub1}{link1sub2}{link1sub3}...</div>
<div id="X2" style="display:none;">{link2sub1}{link2sub2}{link2sub3}...</div>
<div id="X3" style="display:none;">{link3sub1}{link3sub2}{link3sub3}...</div>
</div>

function hideall()
{
for(i;1;3;i++)
{
document.getElementByID('X'+i).style.display='none'
}
}

function show(elementID)
{
hideall()
document.getElementByID(elementID).style.display='none'
}

und ein link sollte dann halt sowas in der art drinn stehen haben:
onMouseover="show('X1')"

so, vor allem die "hideall" function kann noch bissal verbesserung vertragen, aber für 3 minuten nicht schlecht eh?