[css]dropdown-menu verdwijnt in IE

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Jordy

jordy

17/12/2007 09:13:00
Quote Anchor link
ik heb een dropdown-menu in css en dit lukt volledig, alleen heb ik een probleempje in IE. Wanneer ik uit het menu ga in IE dan verdwijnt het menu, dit mag echter niet (in FF blijft het menu wel staan.

iemand een idee hoe ik dit kan oplossen??

Mijn css code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*start menu*/


#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

/*einde menu*/


misschien is het ook handig om de bijhorende javascript te hebben:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated Aug 1st, 07'. Fixed bug with "block" parameter not working when persist is enabled
//Updated June 27th, 07'. Added ability for a DIV to be initially expanded.

var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature

function animatedcollapse(divId, animatetime, persistexpand, initstate){
    this.divId=divId
    this.divObj=document.getElementById(divId)
    this.divObj.style.overflow="hidden"
    this.timelength=animatetime
    this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
    this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie value
    this.contentheight=parseInt(this.divObj.style.height)
    var thisobj=this
    if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
        animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
        if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" && this.isExpanded!="") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
            this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
    }
    else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" && this.isExpanded!="") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
        this.divObj.style.height=0 //just collapse content if CSS "height" attribute available
    if (persistexpand)
        animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
}

animatedcollapse.prototype._getheight=function(persistexpand){
    this.contentheight=this.divObj.offsetHeight
    if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
        this.divObj.style.height=0 //collapse content
        this.divObj.style.visibility="visible"
    }
    else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
        this.divObj.style.height=this.contentheight+"px"
}


animatedcollapse.prototype._slideengine=function(direction){
    var elapsed=new Date().getTime()-this.startTime //get time animation has run
    var thisobj=this
    if (elapsed<this.timelength){ //if time run is less than specified length
        var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
    this.divObj.style.height=distancepercent * this.contentheight +"px"
    this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)
    }
    else{ //if animation finished
        this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
        this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
        this.runtimer=null
    }
}


animatedcollapse.prototype.slidedown=function(){
    if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
        if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
            alert("Please wait until document has fully loaded then click again")
        else if (parseInt(this.divObj.style.height)==0){ //if content is collapsed
            this.startTime=new Date().getTime() //Set animation start time
            this._slideengine("down")
        }
    }
}

animatedcollapse.prototype.slideup=function(){
    if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
        if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
            alert("Please wait until document has fully loaded then click again")
        else if (parseInt(this.divObj.style.height)==this.contentheight){ //if content is expanded
            this.startTime=new Date().getTime()
            this._slideengine("up")
        }
    }
}

animatedcollapse.prototype.slideit=function(){
    if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
        alert("Please wait until document has fully loaded then click again")
    else if (parseInt(this.divObj.style.height)==0)
        this.slidedown()
    else if (parseInt(this.divObj.style.height)==this.contentheight)
        this.slideup()
}

// -------------------------------------------------------------------
// A few utility functions below:
// -------------------------------------------------------------------

animatedcollapse.curveincrement=function(percent){
    return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
}


animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    if (target.addEventListener)
        target.addEventListener(tasktype, functionref, false)
    else if (target.attachEvent)
        target.attachEvent(tasktype, functionref)
}

animatedcollapse.getCookie=function(Name){
    var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    if (document.cookie.match(re)) //if cookie found
        return document.cookie.match(re)[0].split("=")[1] //return its value
    return ""
}

animatedcollapse.setCookie=function(name, value){
        document.cookie = name+"="+value
}
Gewijzigd op 01/01/1970 01:00:00 door Jordy
 
PHP hulp

PHP hulp

28/12/2024 20:41:59
 
PHP Newbie

PHP Newbie

31/12/2007 03:15:00
Quote Anchor link
Voor een goed dropdown menu heb je helemaal geen javascript nodig. Zie:

http://www.cssplay.co.uk/menus/flyout_4level.html & http://www.cssplay.co.uk/menus/simple_vertical.html
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.