Avatar billede mrfunder Nybegynder
28. marts 2007 - 09:36 Der er 16 kommentarer og
1 løsning

Problemer med dropdown menu

Hej Eksperter-
Jeg har problemer med denne dropdown menu og kan simpelthen ikke finde fejlen selv. Den virker umiddelbart perfekt i Firefox, men problemet kommer i IE når der skal laves farveskift på submenuen ved onmouseover. Jeg har prøvet med lidt javascript, dog virker det ligeledes ikke..

------------------------------------------------

<div id=\"topmenu\">
    <ul onmouseover=\"changeSelects('hide');\" onmouseout=\"changeSelects('view');\">
        <li>
            <img src=\"/cache/gfx/menu/status.gif\" border=\"0\" style=\"cursor:pointer;\">
        <ul>
            <li><a href=\"#\">Submenu 1</a></li>
        </ul>
        </li>
            </div>

------------------------------------------------

function changeSelects(option) {

    if(navigator.appName == 'Microsoft Internet Explorer') {
   
    var aSels = document.getElementsByTagName("select");
   
    for (i = 0; i < aSels.length; i++) {
           
        if(option == "hide") {
       
        aSels[i].style.visibility = "hidden";
       
        }
        else
        {
   
        aSels[i].style.visibility = "visible";
       
        }

    }

   

    }

}

navHover = function() {
    var lis = document.getElementById("topmenu").getElementsByTagName("li");
    for (var i=0; i<lis.length; i++) {
        lis[i].onmouseover=function() {
            this.className+=" iehover";
        }
        lis[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", navHover);

------------------------------------------------

#topmenu {
    position: relative;
    left: 10px;
    top: 0px;
}

#topmenu ul {
    margin: 0px;
    list-style-type: none;
    display: inline;
}

#topmenu ul li {
    float: left;
    position: relative;
}

#topmenu ul li a {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    display: block;
    padding-bottom: 10px;
}

#topmenu ul li ul li a {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: normal;
    padding: 3px;
}

#topmenu ul li ul {
    display: none;
    position: absolute;
    left: 0px;
    top: 41px;
    background-color: #5E7374;
    opacity: 0.8;
    padding: 0px;
}

#topmenu ul li ul li {
    float: none;
    width: 120px;
}

#topmenu ul li ul li:hover {
    background-color: #212121;
}

#topmenu ul li:hover ul,
#topmenu ul li.iehover ul {
    display: block;
}
Avatar billede crazysnap Seniormester
28. marts 2007 - 09:51 #1
Hej mrfunder,


Hvad er problemet? Hvad er det der sker, eller ikke sker, i IE ved hover?


Mvh.

- Snap
Avatar billede hmm10 Nybegynder
28. marts 2007 - 09:52 #2
#topmenu ul li ul li a

angives bla.:

#topmenu ul li ul li a:link,
#topmenu ul li ul li a:visited

.. og li:hover virker ikke i alle browsere
Avatar billede mrfunder Nybegynder
28. marts 2007 - 09:57 #3
li:hover virker ikke i alle browsere nej, derfor jeg prøvet med en javascript funktion.

@crazysnap, problemet er at farven ikke skifter som den skal når man har onmouseover et element i menuen
Avatar billede crazysnap Seniormester
28. marts 2007 - 10:09 #4
Hej mrfunder,


Nu har jeg kopieret dit kode ind i en html side, fjernet alle "\" fra html koden og tilføjet en closing </ul> tag til <div> elementet som manglede. Har desuden fjernet:


display: block;


fra:


#topmenu ul li a



Da den gav en lille border i bunden af dropdown-listen i IE. Men foruden det virker det fint hos mig; både i IE7, FF og Opera. Jeg har desuden sat farven til rød ved hover så man bedre kan se farveskiftet. Så prøv at kopiere det her kode ind i en ny html side og se om problemet stadig opstår hos dig:


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <style type="text/css">
        #topmenu
        {
            position: relative;
            left: 10px;
            top: 0px;
        }

        #topmenu ul
        {
            margin: 0px;
            list-style-type: none;
            display: inline;
        }

        #topmenu ul li
        {
            float: left;
            position: relative;
        }

        #topmenu ul li a
        {
            color: #FFFFFF;
            font-weight: bold;
            font-size: 12px;
            text-decoration: none;
   
            padding-bottom: 10px;
        }

        #topmenu ul li ul li a
        {
            color: #FFFFFF;
            font-size: 12px;
            font-weight: normal;
            padding: 3px;
        }

        #topmenu ul li ul
        {
            display: none;
            position: absolute;
            left: 0px;
            top: 41px;
            background-color: #5E7374;
            opacity: 0.8;
            padding: 0px;
        }

        #topmenu ul li ul li
        {
            float: none;
            width: 120px;
        }

        #topmenu ul li ul li:hover
        {
            background-color: Red;
        }

        #topmenu ul li:hover ul,
        #topmenu ul li.iehover ul
        {
            display: block;
        }
        </style>
       
        <script type="text/JavaScript">
        function changeSelects(option)
        {

            if(navigator.appName == 'Microsoft Internet Explorer')
            {
                var aSels = document.getElementsByTagName("select");
   
                for (i = 0; i < aSels.length; i++)
                {
           
                    if(option == "hide")
                        aSels[i].style.visibility = "hidden";
                    else   
                        aSels[i].style.visibility = "visible";
       
                }

            }
        }

        </script>
    </head>
    <body>
        <div id="topmenu">
            <ul onmouseover="changeSelects('hide');" onmouseout="changeSelects('view');">
                <li>
                    <img src="pic1.jpg" style="cursor:pointer; border: 0;" width="50" height="50" alt="" />
                    <ul>
                        <li><a href="#">Submenu 1</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>


Mvh.

- Snap :)
Avatar billede mrfunder Nybegynder
28. marts 2007 - 10:23 #5
Ved den pågældende kode du har frembragt kommer der umiddelbart slet ingen submenu frem hos mig i IE :-/
Avatar billede crazysnap Seniormester
28. marts 2007 - 10:29 #6
Hmm...
Så må forskellen være at du sandsynligvis ikke kører IE7. Jeg har desværre kun IE7 installeret og kan derfor ikke teste det i tidligere versioner.

Så må vi håbe der er andre kloge hoveder i blandt os som kender et fix til tidligere version af IE. :)


Mvh.

- Snap
Avatar billede mrfunder Nybegynder
28. marts 2007 - 10:30 #7
Jeg kører med IE 7 jo :)

.. tjo, et eller andet steds knaser det- det er bare lige hvor!
Avatar billede crazysnap Seniormester
28. marts 2007 - 10:34 #8
Nu begynder det at blive lidt mærkeligt.

Vi er enige om at når musen bevæger sig over billedet skal "Submenu 1" vises og når musen bevæger sig over "Submenu 1" bliver baggrunden en anden farve (i mit tilfælde rød)? :)
Avatar billede mrfunder Nybegynder
28. marts 2007 - 10:36 #9
Mh. din formulering passer det perfekt til firefox, dog gør den ikke sådan i IE
Avatar billede crazysnap Seniormester
28. marts 2007 - 10:41 #10
Ahh, det er fordi jeg glemte at kopiere doctypen ind. Så indsæt denne sætning øverst i html filen så burde det hele virke:      :)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Mvh.

- Snap :)
Avatar billede crazysnap Seniormester
28. marts 2007 - 10:42 #11
Hov, nu er xmlns jo XHTML, så brug denne her doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Mvh.

- Snap
Avatar billede mrfunder Nybegynder
28. marts 2007 - 10:48 #12
Stadig virker det kun i Firefox og ikke i min IE Browser :/
I IE vil den ikke engang display submenu
Avatar billede crazysnap Seniormester
28. marts 2007 - 10:55 #13
Det forstår jeg simpelthen ikke. :/

Jeg har prøvet at lave en helt ny html fil (trial.html) kopieret den ovenskrevne doctype ind og det html dokument som jeg pastede ind 28/03-2007 10:09:51. Submenuen viser sig fint når musen bevæger sig over billedet og baggrundsfarven skifter også fint i alle browsere.

Jeg er ved at løbe tør for idéer. Andre som har input til hvorfor det er at menu'en ikke vises for mrfunder i IE? Nogle security settings måske?


Mvh.

- Snap
Avatar billede mrfunder Nybegynder
28. marts 2007 - 10:57 #14
@Snap - mulighed for at jeg kunne komme med noget content uden for denne side? Det vil ikke have indflydelse på dette spørgsmål og eller point fordelingen.

Har du en privat mail adresse måske?
Avatar billede crazysnap Seniormester
28. marts 2007 - 11:02 #15
Yep, selvfølgelig:


crazysnap18[SnabelA]hotmail.com


:)
Avatar billede mrfunder Nybegynder
28. marts 2007 - 13:37 #16
Eftersom det fremlagte kode af dit virker, men ikke mit eget formoder jeg fejlen ligger i kode der ikke er postet på sitet. Jeg vil kigge mine andre scripts igennem, og se om der er noget der overskriver hinanden 8-)

Jeg synes du skal smide et svar, da din kode mere eller mindre virker perfekt
Avatar billede crazysnap Seniormester
28. marts 2007 - 15:11 #17
Det gør jeg så. :)

Og tak for pointene så og håber du finder synderen i dit eget kode et sted. :)


Mvh.


- Snap
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester