[Sayon]

Nachdem die Menus soweit so funktioniert haben wie sie sollen, dachte ich mir ich schaus mir auch mal mit Opera und Firefox an...

Leider musste ich feststellen das in dem horizontalen Menu gravierende Unterschiede gibt.

Werft bitte mal einen Blick auf den Quellcode und helft mir herauszufinden wieso, und wie ich das abstellen kann.

Vielen Dank
Sayon

[dexter]

Kannst Du einen Screenshot machen, wo bei Dir das Problem ist? Ich seh da nix Gravierendes.

[Sayon]

Ok, kein Problem...


Darstellung IE:


Darstellung Opera:


Darstellung Firefox:


Gruss
Sayon

[dexter]

Oh, ein Javascriptmenü. Dass man davon gar nichts mitbekommt, wenn man Javascript deaktiviert hat oder einen Browser nutzt, der kein javascript kann weisst Du?
Dass Suchmaschinen kein Javascript können, und somit Deine Seiten nicht indizieren, sollte Dir auch klar sein.
Wie man es richtig macht:
http://www.alistapart.com/articles/dropdowns/

Validier Dein Dokument erst einmal und korrigiere die Fehler, vielleicht haut es hin, wenn die Browser das Dokument im Standards-mode rendern.

[Sayon]

Hmm.... Javascript... eigentlich nur das Zeilen wie

document.getElementById('menuh$id').style.visibility='hidden'

einsetze...
Der Rest (die Links) steht doch im Quellcode eigentlich drin...
für CSS Effekte dieser Art habe ich doch gar keine andere Wahl oder?

Validieren werd ich es jedenfalls mal noch... ist ja bisher auch nur ein Konzept.

[dexter]

Zitat von Sayon

...
Der Rest (die Links) steht doch im Quellcode eigentlich drin...

Was schätzt Du, wieviele Deiner Besucher in den Quellcode schauen?

für CSS Effekte dieser Art habe ich doch gar keine andere Wahl oder?

Du hast den Link, den ich gepostet habe, nicht verfolgt.
Ein Beispiel was (mit Ausnahme des IE ) ohne Javascript funktioniert:
http://www.htmldog.com/articles/suckerfish/example/

[terrikay]

Na, mit den richtigen Links waren wohl eher die Suchmaschinen gemeint.....

Und Menüs, die im IE nicht gehen, kann man leider in der Praxis nicht benutzen.....

Ich hätte noch zwei Alternativen:

1. Ein Menü mit kleinem Javascript als "Hilfsmotor" für den IE - bei den anderen Browsern kann man es auch ausmachen - kleiner Schönheitsfehler: im Opera "hakt" es etwas - wenn man von der anderen Seite aus nochmal drüberfährt, geht es dann. Das ganze funktioniert sogar noch eine Ebene tiefer. - Meine Erfindung ist es nicht, habs nur in meiner Trickkiste abgespeichert.

Das CSS:

<style type="text/css">
<!--
ul.dropdown
{
    list-style: none;
    margin:0;
    padding:0;
    width:100%;
       }

ul.dropdown * ul
{
    list-style: none;
    margin:0;
    padding: 0;
	display:none;
	position:absolute;
	}

ul.dropdown li
{
    float:left;
    padding:2px; /* helps Opera with hover - do not remove! */
}

ul.dropdown li * li
{
    float:none;
    position: relative;
}

ul.dropdown ul * ul
{
    left:98%;
    top:0;
    width:100%;
}

ul.dropdown a
{
    display:block;
    background-color:#c0c0c0;
    border:1px solid black;
}

ul.dropdown ul * a
{
	width:13em;
}

ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
    display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
    display:block;
}

ul.dropdown a.has_submenu
{
    background:url(http://www.gy-mi.de/images/elegant_grey/ddm_arrow_right.gif) no-repeat right;
}

ul.dropdown
{
    font:10px verdana;
    }

ul.dropdown ul
{
    font:10px verdana;
    background-color:#f0f0f0;
    border:1px outset #888;
}


ul.dropdown a
{
    color:#000;
    padding:4px;
    text-decoration:none;
}

ul.dropdown a:hover
{
    background-color:#ddd;
    color:#888;
}
//-->
</style>

Das Javascript für den IE:

<script type="text/javascript">
<!--
function enable_menues_for_ie()
{
	if (document.all)
	{
        uls = document.getElementsByTagName('UL');

        for(i = 0; i < uls.length; i++)
        {
            if (uls[i].className == 'dropdown')
            {
                var lis = uls[i].getElementsByTagName('li');

                for (j = 0; j < lis.length; j++)
                {
                    if(lis[j].lastChild.tagName == 'UL')
                    {
                        lis[j].onmouseover = function() { this.lastChild.style.display = 'block'; }
                        lis[j].onmouseout = function() { this.lastChild.style.display = 'none'; }
                    }
                }
            }
        }
    }
}
//-->
</script>

Und der HTML-Teil:

<body onload="enable_menues_for_ie();">

<ul id="mainmenu" class="dropdown">[*]Link1
[*]
        Link2
        <ul>[*]Link2a[*]Link2b[/list]    
[*]
        Link3
        <ul>[*]link3a[*]link3b[*]
                link3c
                <ul>[*]untermenu1[*]untermenü2[*]untermenü3
                    [/list]             [/list]    
[*]
        Link4
        <ul>[*]link4a[*]link4b
[/list]    
[*]
        Link5
        <ul>[*]link5a[*]
                link5b
                <ul>[*]untermenü1[*]untermenü2
                    [/list]            
            [/list]    
[/list]

Es gibt sogar eine reine CSS-Lösung, die Stu Nicholson ausgetüftelt hat - aber die ist nicht valide und der Code sieht recht haarsträubend aus - aber funktioniert in allen Browsern!

Hier: http://www.stunicholls.myby.co.uk/menus/dropdown.html

Hier noch ein paar Worte dazu, er selbst sieht es nur als Gag: http://www.stunicholls.myby.co.uk/me...opdownfun.html

[dexter]

Zitat von terrikay

Na, mit den richtigen Links waren wohl eher die Suchmaschinen gemeint.....

Mhh, hab jetzt nochmal geschaut, war mein Fehler.
Allerdings bleibt, dass das Menü nicht angezeigt wird, wenn javascript deaktiviert ist.

Und Menüs, die im IE nicht gehen, kann man leider in der Praxis nicht benutzen.....

Vielleicht missverständlich formuliert. Ich meinte nicht, dass das Menü im IE _nicht_ funktioniert, sondern dass es ohne Javascript (als "Hilfsmotor") nicht funktioniert. Zu allem Überfluss postest Du (imho) genau den Code von der von mir verlinkten Suckerfish-seite .

Es gibt sogar eine reine CSS-Lösung, die Stu Nicholson ausgetüftelt hat - aber die ist nicht valide und der Code sieht recht haarsträubend aus - aber funktioniert in allen Browsern!

Mist. Auf den ersten Blick sah das sehr interessant aus.

[Sayon]

Die CSS Spass-Variante benutzt Tabellen, das wollte ich eigentlich nicht.

Schade... hab mal Spasseshalber Java abgestellt... klar das es dann nicht mehr geht... aber dann geht sowieso jegliche aktive Dynamik verloren...

Den Fall das es kein Java gibt könnte man ja mit einer Browserweiche regeln, die dann bei Bedarf halt ein anderes Stylesheet benutzt.

Wieso wird OnClick, OnMousover und OnMouseout nicht akzeptiert? Es funktioniert doch in allen Browsern...

Dann bräuchten wir nur noch klären war die Ebene teilweise so verschieden überlappen...

Ich weiß nicht so recht was mir das Suckerfish Beispiel bringen soll, Java nutzt es auch, außer das es halt die oben genannten Javascript Funktionen nicht braucht. Ich wollte eigentlich eine Variante schreiben die leicht zu kapieren ist mit nur minimalen Aufwand...

[hemfrie]

schreib mal das onClick klein. (onclick)

Genauso auch bei onmousover und onmouseout. Danach sollte Deine Seite valid sein.


hemfrie