Problem mit DropDown Menü !!!?

Dani

Hallo,

ich habe ein DropDown Menü nach (fast) meinen Vorstellungen...das einzige ist, dass es im IE noch nicht so will wie ich

Wenn man das Menü 'normal' aufruft, also einfach Pfad eintippen, funktioniert alles einwandfrei! Wenn ich nun das Menü inlude() hab ich folgendes Problem:

Wenn man über den ersten Untermenüpunkt mit der Maus nach unten geht, klappt das Menü wieder ein, aber seht selbst was ich meine:

> das Menü:
http://www.power4sport.at/tests/navi.php

> Menü included:
http://www.power4sport.at/tests/testmain.php

...hab keine Ahnung was ich da machen kann um das hinzubiegen, bitte um Hilfe

Hier noch der Code fürs MenÜ:

HTML

<html>


<head>
....
<link rel="stylesheet" type="text/css" href="dropdownmenu.css" />
</head>
<script type="text/javascript" src="css_dropdown.js"></script>


<body topmargin="0" leftmargin="230">


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr>
    <td width="100%">
    <p align="center">


<style>


body
{
    font-family:verdana;
}


ul.dropdown a
{
    background-color:#;
    color:#444;
    padding-right:6px;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:6px;
    text-decoration:none;
}


ul.dropdown a:hover
{
    background-color:#444;         // hintergrund farbänderung bei hover
    color:#fff;
}


ul.dropdown ul
{
    border:1px outset;


}


ul.dropdown ul a
{
    background-color:#fff;         //hintergund dropdown
    color:#fff;
    padding:1px;
    text-decoration:none;
}


ul.dropdown ul a:hover
{
    background-color:#f0f0f0;
    color:#000;
}


ul.dropdown ul li
{
    background-color:#fff;
}
    </style>


<body onload="enableDropdownMenuForIE();">


 <ul class="dropdown" id="mainmenu">
        [*]
            [b][url='#']<font style="font-size: 8pt">NEWS</font>[/url]<font style="font-size: 8pt"> </font>
            [/b]
            <ul>


                [*][b]<a href="">
                <font style="font-size: 8pt">Angebote</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Events</font></a>[/b][*][b]<a href="">
                <font style="font-size: 8pt">Irgendwas</font></a>[/b][/list]



        [*]
            [b]
            <a href="">
            <font style="font-size: 8pt">PRODUKTE</font></a><font style="font-size: 8pt"> </font>[/b]
            <ul>


                [*][b]<a href="">
                <font style="font-size: 8pt">Metadaten</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Grundeigenschaften</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Standardtemplates</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Zugriffsrechte</font></a>[/b]            [/list]



        [*]
            [b]
            <a href="">
            <font style="font-size: 8pt">UNTERNEHMEN</font></a><font style="font-size: 8pt"> </font>[/b]
            <ul>


                [*][b]<a href="#" class="has_submenu">
                <font style="font-size: 8pt">Seitenleiste</font></a><font style="font-size: 8pt">
                </font>[/b]


                <li class="seperator">[b]<a href="">
                <font style="font-size: 8pt">Kindobjekte</font></a>[/b]
                [*][b]<a href="" rel="top">
                <font style="font-size: 8pt">Webseite</font></a>[/b]
            [/list]



        [*]


            [b]
            <a href="">
            <font style="font-size: 8pt">DIENSTLEISTUNGEN</font></a><font style="font-size: 8pt"> </font>
            [/b]
            <ul>
                [*][b]<a href="" class="has_submenu">
                <font style="font-size: 8pt">Benutzermanager</font></a>
				[/b]
                [*]
                    [b]
                    <a href="#" class="has_submenu">
                    <font style="font-size: 8pt">Cache</font></a><font style="font-size: 8pt">
                    </font>[/b]




                [*][b]<a href="">
                <font style="font-size: 8pt">Papierkorb</font></a>[/b]
            [/list]

        [*][b][url='#']<font style="font-size: 8pt">SHOP</font>[/url][/b]<ul>
                [*][b]
                <font style="font-size: 8pt">
                [url='']Inhaltsverzeichnis[/url]</font>[/b]
            [/list]

    [/list]</td>
  </tr>
</table>


</body>


</html>

Alles anzeigen

Hier noch die JS-Datei:

Code

function enableDropdownMenuForIE()
{
    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'; }
                    }
                }
            }
        }
    }
}

Alles anzeigen

Lg Dani

jojo87

Du könntest mal im js getElementByTagName('LI') statt ('ul') verwenden.

Dikra

die gute Nachricht: In Firefox funzt es

Dani

..^ nein leider, funkt nicht, fährt das Untermenü gar nicht mehr aus ...

lg

Dani

Dikra
...naja, ich weiß, leider surfn ja zu viele leutz noch mitn IE

lg

Dikra

Komisch, bei mir funzt es mit Firefox 2.007. Opera Netscape funktioniert auch , nur der neue IE macht nicht was er soll.

Dikra

lis[j].onmouseover = function() { this.lastChild.style.display = 'block'; }
lis[j].onmouseout = function() { this.lastChild.style.display = 'none'; }

Wie ist das, wenn du den zweiten Eintrag auch auf "Block" änderst, bleibt das menü dann immer offen, wenn es einmal offen ist ???

Dani

^ja eben, das ist ja das Problem, in den andren Browsern läufts ja ....nur der IE macht wieder seine eigene Sache

Dikra

hm, jetzt geht es.

Dani

Dikra
...jap, dann gehts nimma zu :..

Dani

^ was geht ??

jojo87

So, Problem einfacher als Gedacht:
Dein HTML Grundgerüst ist einfach grundlegend falsch. Du machst den body zweimal auf und hast dann auch noch <style> tags drin.
NImm diesen Code:

HTML

<html>


<head>
....
<link rel="stylesheet" type="text/css" href="dropdownmenu.css" />
<script type="text/javascript" src="css_dropdown.js"></script>
<style>


body
{
    font-family:verdana;
}


ul.dropdown a
{
    background-color:#;
    color:#444;
    padding-right:6px;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:6px;
    text-decoration:none;
}


ul.dropdown a:hover
{
    background-color:#444;         // hintergrund farbänderung bei hover
    color:#fff;
}


ul.dropdown ul
{
    border:1px outset;


}


ul.dropdown ul a
{
    background-color:#fff;         //hintergund dropdown
    color:#fff;
    padding:1px;
    text-decoration:none;
}


ul.dropdown ul a:hover
{
    background-color:#f0f0f0;
    color:#000;
}


ul.dropdown ul li
{
    background-color:#fff;
}
    </style>
</head>
<body onload="enableDropdownMenuForIE();">


 <ul class="dropdown" id="mainmenu">
        [*]
            [b][url='#']<font style="font-size: 8pt">NEWS</font>[/url]<font style="font-size: 8pt"> </font>
            [/b]
            <ul>


                [*][b]<a href="">
                <font style="font-size: 8pt">Angebote</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Events</font></a>[/b][*][b]<a href="">
                <font style="font-size: 8pt">Irgendwas</font></a>[/b][/list]



        [*]
            [b]
            <a href="">
            <font style="font-size: 8pt">PRODUKTE</font></a><font style="font-size: 8pt"> </font>[/b]
            <ul>


                [*][b]<a href="">
                <font style="font-size: 8pt">Metadaten</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Grundeigenschaften</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Standardtemplates</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Zugriffsrechte</font></a>[/b]            [/list]



        [*]
            [b]
            <a href="">
            <font style="font-size: 8pt">UNTERNEHMEN</font></a><font style="font-size: 8pt"> </font>[/b]
            <ul>


                [*][b]<a href="#" class="has_submenu">
                <font style="font-size: 8pt">Seitenleiste</font></a><font style="font-size: 8pt">
                </font>[/b]


                <li class="seperator">[b]<a href="">
                <font style="font-size: 8pt">Kindobjekte</font></a>[/b]
                [*][b]<a href="" rel="top">
                <font style="font-size: 8pt">Webseite</font></a>[/b]
            [/list]



        [*]


            [b]
            <a href="">
            <font style="font-size: 8pt">DIENSTLEISTUNGEN</font></a><font style="font-size: 8pt"> </font>
            [/b]
            <ul>
                [*][b]<a href="" class="has_submenu">
                <font style="font-size: 8pt">Benutzermanager</font></a>
            [/b]
                [*]
                    [b]
                    <a href="#" class="has_submenu">
                    <font style="font-size: 8pt">Cache</font></a><font style="font-size: 8pt">
                    </font>[/b]




                [*][b]<a href="">
                <font style="font-size: 8pt">Papierkorb</font></a>[/b]
            [/list]

        [*][b][url='#']<font style="font-size: 8pt">SHOP</font>[/url][/b]<ul>
                [*][b]
                <font style="font-size: 8pt">
                [url='']Inhaltsverzeichnis[/url]</font>[/b]
            [/list]

    [/list]</td>
  </tr>
</table>


</body>


</html>

Alles anzeigen

Sollte jetzt klappen.

Dani

...hilft leider nichts, geht genau so wenig wie vorher *seufz*
...versteh es nicht warums gerade beim include() nicht funktioniert ??!

lg

jojo87

Dieser code geht jetzt, echt.
Index.php:

PHP

<html>


<head>


<link rel="stylesheet" type="text/css" href="dropdownmenu.css" />
<script type="text/javascript">
function enableDropdownMenuForIE()
{
    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>


<style>
body
{
    font-family:verdana;
}


ul.dropdown a
{
    background-color:#;
    color:#444;
    padding-right:6px;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:6px;
    text-decoration:none;
}


ul.dropdown a:hover
{
    background-color:#444;         // hintergrund farbänderung bei hover
    color:#fff;
}


ul.dropdown ul
{
    border:1px outset;


}


ul.dropdown ul a
{
    background-color:#fff;         //hintergund dropdown
    color:#fff;
    padding:1px;
    text-decoration:none;
}


ul.dropdown ul a:hover
{
    background-color:#f0f0f0;
    color:#000;
}


ul.dropdown ul li
{
    background-color:#fff;
}
    </style>










<style>
ul.dropdown


{


    list-style: none;


    margin:0;


    padding:0;


    width:100%;


    z-index:99;


}






ul.dropdown * ul


{


    list-style: none;


    margin:0;


    padding: 0;


	display:none;


	position:absolute;


	z-index:99;


	width:20em;


}






ul.dropdown li


{


    float:left;


}






ul.dropdown li * li


{


    border:1px solid #fff;


    float:none;






    position: relative;


}






ul.dropdown ul * ul


{


    left:98%;


    top:0;






}






ul.dropdown a


{


    display:block;






}






ul.dropdown ul * a


{


    height:100%;


}






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;


}




body
{
    font-family:verdana;
}


ul.dropdown a
{
    background-color:#;
    color:#444;
    padding-right:6px;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:6px;
    text-decoration:none;
}


ul.dropdown a:hover
{
    background-color:#444;         // hintergrund farbänderung bei hover
    color:#fff;
}


ul.dropdown ul
{
    border:1px outset;


}


ul.dropdown ul a
{
    background-color:#fff;         //hintergund dropdown
    color:#fff;
    padding:1px;
    text-decoration:none;
}


ul.dropdown ul a:hover
{
    background-color:#f0f0f0;
    color:#000;
}


ul.dropdown ul li
{
    background-color:#fff;
}
    </style>
</head>
<body onload="enableDropdownMenuForIE();">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr>
    <td width="100%">
    <p align="center">
<?php 
include "menu.html";
?>


 </td>
  </tr>
</table>


</body>


</html>

Alles anzeigen

menu.html:

Code

<ul class="dropdown" id="mainmenu">
        [*]
            [b][url='#']<font style="font-size: 8pt">NEWS</font>[/url]<font style="font-size: 8pt"> </font>
            [/b]
            <ul>


                [*][b]<a href="">
                <font style="font-size: 8pt">Angebote</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Events</font></a>[/b][*][b]<a href="">
                <font style="font-size: 8pt">Irgendwas</font></a>[/b][/list]



        [*]
            [b]
            <a href="">
            <font style="font-size: 8pt">PRODUKTE</font></a><font style="font-size: 8pt"> </font>[/b]
            <ul>


                [*][b]<a href="">
                <font style="font-size: 8pt">Metadaten</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Grundeigenschaften</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Standardtemplates</font></a>[/b][*]
                [b]<a href="">
                <font style="font-size: 8pt">Zugriffsrechte</font></a>[/b]            [/list]



        [*]
            [b]
            <a href="">
            <font style="font-size: 8pt">UNTERNEHMEN</font></a><font style="font-size: 8pt"> </font>[/b]
            <ul>


                [*][b]<a href="#" class="has_submenu">
                <font style="font-size: 8pt">Seitenleiste</font></a><font style="font-size: 8pt">
                </font>[/b]


                <li class="seperator">[b]<a href="">
                <font style="font-size: 8pt">Kindobjekte</font></a>[/b]
                [*][b]<a href="" rel="top">
                <font style="font-size: 8pt">Webseite</font></a>[/b]
            [/list]



        [*]


            [b]
            <a href="">
            <font style="font-size: 8pt">DIENSTLEISTUNGEN</font></a><font style="font-size: 8pt"> </font>
            [/b]
            <ul>
                [*][b]<a href="" class="has_submenu">
                <font style="font-size: 8pt">Benutzermanager</font></a>
            [/b]
                [*]
                    [b]
                    <a href="#" class="has_submenu">
                    <font style="font-size: 8pt">Cache</font></a><font style="font-size: 8pt">
                    </font>[/b]




                [*][b]<a href="">
                <font style="font-size: 8pt">Papierkorb</font></a>[/b]
            [/list]

        [*][b][url='#']<font style="font-size: 8pt">SHOP</font>[/url][/b]<ul>
                [*][b]
                <font style="font-size: 8pt">
                [url='']Inhaltsverzeichnis[/url]</font>[/b]
            [/list]

    [/list]

Alles anzeigen

Achte darauf, dass die index.php die endung .php hat....

Dikra

Also die Seite:

http://www.power4sport.at/tests/navi.php#

Funktioniert im IE 7

Wenn ich von da aus aber auf die Seite:

http://www.power4sport.at/tests/

Funzt es wieder nicht.

Dani

@jojo
Erstmals viel Dank für deine Hilfe!!!

Ich hab das Menü jetz soweit nach meinen Vorstellungen angepasst, jedoch ist im IE wieder ein Problem aufgetreten !!

...wieder 2 Bsp.: zu erklärung:

Hier funktioniert es super, wie es sein sollte: http://www.power4sport.at/tests/index.php

Sobald aber unter dem ausgeklappten Menü ein Text bzw. Bild liegt funktioniert es wieder nicht: http://www.power4sport.at/tests/sportbekl.php

...denke dass das am JS liegt da es nur im IE Probleme gibt, oder ?? weiß leider nicht weiter, i hoffe es kann mir nochmals jemand weiterhelfen?!

Code

<script type="text/javascript">
function enableDropdownMenuForIE()
{
    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>

Alles anzeigen

jojo87

Ok, ganz ehrlich, ich kriegs nicht hin. Obwohl ich das css vermute. Hast du das eigentlich selbst geschrieben? Wenn nicht, woher hast du den Code? Dann könnt man mal vergleichen.
Wenn hier keiner was findet, dann könnt ich dir anbieten, ein anderes Dropdownmenu zu verwenden, welches 100% funktioniert.
Gruß,
Jojo

Dani

..^ ok, schade ! ...nein, selbst hab ichs nicht geschrieben, hab nur zusammengesetzt und ergänzt !! ...von wo ich den code her habe weiß ich leider nicht mehr ....=(

...ist jetzt natürlich etwas bitter da ich sehr viel zeit in das DropDown gesteckt habe, wenn du aber ein gutes alternatives Menü für mich wissen würdest, wäre ich dir dankbar mir das mitzuteilen da ich diese Website so schnell wie möglich fertigstellen will!

lg DAni

Dani

falls es was hilft, hier der original-file des dropDown Menü's

lg Dani

jojo87

Naja, wenn dus sehr eilig hast, google mal nach "son of suckerfish".
Das erste Ergebnis ist das richtige.
Ich habe heute leider Keine Zeit mehr, Uni und so.....
Ansonsten guck ich morgen noch mal über dein altes Menu. Muss doch zu lösen sein...
Gruß,
jojo

Tags