(JAVASCRIPT) Deklaration einer Variablen/Ansprechen eines html-Tags

[Lini]

Hallo Leute,

ich habe folgendes Problem:

Ich bastel im Moment eine Seite, bei der die Navigation oben horizontal angezeigt werden soll. Es handelt sich dabei um zwei ineinander verschachtelte Listen.

<ul>

    <li>1</li>

    <li>2

        <ul>

            <li>2.1</li>

            <li>2.2</li>

        </ul>

    </li>

</ul>

2.1 und 2.2 sollen erst erscheinen, wenn man mit der Maus über Punkt 2 fährt. Die einzelnen Punkte/Links sind aber kein Text, sondern Buttons. Bis hierher kein Problem, denn das habe ich mit CSS gelöst. Im Mozilla Firefox wird die Navigation richtig angezeigt. Im IE7 funktioniert dies allerdings nicht. Ich habe mich bereits durch die SELFHTML-Doku gewühlt und bin auf die Star-Plus-HTML-Hacks gestoßen, die ja eigentlich für den IE7 da sein sollen. Dies funktioniert leider nicht. Also habe ich für den IE7 eine andere Lösung in JavaScript geschrieben bzw. zusammengesucht. Nun funktioniert die Navigation auch im IE7, nur habe ich jetzt Lücken zwischen den Listenpunkten 2.1 und 2.2. Ich weiß auch, wie ich das Problem beheben kann. Ich muss nur für 2.1 und 2.2 margin und padding auf 0 setzen. Jetzt das Problem: Ich weiß nicht, wie ich deklarieren muss, um genau die "li" von 2.1 und 2.2 ansprechen zu können. Hier der entsprechende Quellcode:

<script type="text/javascript">

if(window.navigator.systemLanguage && !window.navigator.language)

{

    function hoverIE()

    {

        var LI = document.getElementById("Navigation").firstChild;

        do

        {

            if (sucheUL(LI.firstChild))

            {

                LI.onmouseover=einblenden;

                LI.onmouseout=ausblenden;

            }

        LI = LI.nextSibling;

        }

        while(LI);

    }


    function sucheUL(UL)

    {

        do

        {

            if(UL) UL = UL.nextSibling;

            if(UL && UL.nodeName == "UL") return UL;

        }

        while(UL);

        return false;

    }


    function einblenden()

    {

        var UL = sucheUL(this.firstChild);

        UL.style.display = "block"; UL.style.backgroundColor = "#f00";

 UL.style.left = "5";

    }


    function ausblenden()

    {

        sucheUL(this.firstChild).style.display = "none";

    }


    window.onload=hoverIE;

}

</script>

Liege ich mit meinen Behauptungen eigentlich richtig?

Für Eure Hilfe wäre ich euch sehr dankbar, denn so langsam aber sicher kann ich diesen Quellcode nicht mehr sehen ;-).

[geloescht_JesterDay]

2.1 und 2.2 sollen erst erscheinen, wenn man mit der Maus über Punkt 2 fährt. Die einzelnen Punkte/Links sind aber kein Text, sondern Buttons.

Stu Nicholls | CSSplay | A css only dropdown menu

Da findest du noch ne Menge mehr zu CSS-Menüs, davon hilft dir mit Sicherheit was (ohne Javascript).

[Lini]

Danke. Das Problem ist nur, dass der IE7 bekanntermaßen einige Probleme mit CSS hat. Im Firefox ist die Seite schon perfekt.

Hinter folgendem Link befindet sich etwas sehr interessantes zu genau diesem Thema:

Forumsdiskussion

Da ich weiß, dass es im IE7 mit JavaScript klappt, würde ich es gern so machen. Brauche ja wie gesagt nur noch die Info, wie ich dieses Tag ansprechen kann...

[MaddinMV]

Da ich weiß, dass es im IE7 mit JavaScript klappt, würde ich es gern so machen. Brauche ja wie gesagt nur noch die Info, wie ich dieses Tag ansprechen kann...

bin mir zwar nicht sicher ob ich dich richtig verstanden habe, aber versuche es trotzdem:

du kannst auf die tags mit JavaScript zugreifen durch:

document.getElementById('Id')

oder:

document.getElementbyTagName("a") //wobei a für alle <a> tags steht

Irgendein problem gab es bei der 2ten variante, hab nur vergessen welches

aber wenn du ueber ID's gehst, solltest du auf der sicheren seite sein^^

//Edit: weitere möglichkeit:

habs jetzt zwischen nen <div> - tag geknallt, sieht man besser:


<div style=" width:10%; background-color:#666666; color:#00FF00;" onmouseover="this.style.backgroundColor='#00FF00';" onmouseout="this.style.backgroundColor='#666666'">

		<a href="#" style="width:100%; align:center;" >Link</a>

</div>




[/PHP]

die Styles werden natürlich per css verändert nicht wie ich sie mitten reingeknallt hab ^^

ajo gibt noch ne möglichkeit...du gibst deine li oder was auch immer, classnamendie kannst du auch mit javascript ansprechen

this.classname = "neuerClassName"

dann brauchst du den CSS quatsch nur einmal schreiben und veränderst immer dynamisch den KlassenNamen, wenn du dazu noch nen beispiel brauchst, sag bescheid!

[Lini]

Vielen Dank.

Ich brauche JavaScript jetzt allerdings nicht mehr. Hab das jetzt hingekriegt, dass es auch im IE7 mit CSS geht. War ein ganz blöder Fehler von mir. Hab den Wald vor lauter Bäumen nicht mehr gesehen. Beim nächsten Problem melde ich mich wieder...