I built a horizontal navigation dropdown menu and it works in IE6, but when we were pushed IE7 it stoped working. Is it my javascript or is it my CSS (do I need html hacks for IE7 )
Any help would be greatly appreciated.
Thanks in advance!!!!!
HTML Code:
[B]Javascript:[/B]
// JavaScript Document
window.addEvent('domready', function(){
$('drop_down_menu').getElements('li.menu').each( function( elem ){
var list = elem.getElement('ul.links');
var myFx = new Fx.Slide(list).hide();
elem.addEvents({
'mouseenter' : function(){
myFx.cancel();
myFx.slideIn();
this.set('tween', {
duration: 1000,
transition: Fx.Transitions.easeOut // This could have been also 'bounce:out' transition: Fx.Transitions.Bounce.easeOut add if you want to bounce
}).tween('height', '100%')
.morph({
opacity: 0.8,
backgroundColor: '#0e1f51'
});
},
'mouseleave' : function(){
myFx.cancel();
myFx.slideOut();
this.set('tween', {}).tween('height', '20px')
.morph({
'opacity': 1,
'background-color':'#0e1f51'
});
}
});
})
$('drop_down_menu').getElements('li.menu2').each( function( elem ){
var list = elem.getElement('ul.links');
var myFx = new Fx.Slide(list).hide();
elem.addEvents({
'mouseenter' : function(){
myFx.cancel();
myFx.slideIn();
this.set('tween', {
duration: 1000,
transition: Fx.Transitions.easeOut // This could have been also 'bounce:out'
}).tween('height', '100%')
.morph({
opacity: 0.8,
backgroundColor: '#0e1f51'
});
},
'mouseleave' : function(){
myFx.cancel();
myFx.slideOut();
this.set('tween', {}).tween('height', '20px')
.morph({
'opacity': 1,
'background-color':'#0e1f51'
});
}
});
})
$('drop_down_menu').getElements('li.menu3').each( function( elem ){
var list = elem.getElement('ul.links');
var myFx = new Fx.Slide(list).hide();
elem.addEvents({
'mouseenter' : function(){
myFx.cancel();
myFx.slideIn();
this.set('tween', {
duration: 1000,
transition: Fx.Transitions.easeOut // This could have been also 'bounce:out'
}).tween('height', '100%')
.morph({
opacity: 0.8,
backgroundColor: '#0e1f51'
});
},
'mouseleave' : function(){
myFx.cancel();
myFx.slideOut();
this.set('tween', {}).tween('height', '20px')
.morph({
'opacity': 1,
'background-color':'#0e1f51'
});
}
});
})
});
[B]CSS:[/B]
.menubkgrd {
background-image:url(../images/navbkgrd.jpg);
width: 800px;
height: 30px;
}
#menu-container {
display:block;
position:relative;
width:800px;
height: 30 px;
margin:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
padding: 7px 0px 2px 0px;
background-image:url(../images/navbkgrd.jpg);
background-repeat:repeat-x;
}
#drop_down_menu {
display:block;
position:absolute;
clear:both;
padding:0px 0px 0px 0px;
text-align:left;
list-style-type:none;
text-align:right;
width:900px;
float:none;
left:0px;
top:0px;
margin-left:1px;
}
#drop_down_menu li {
font-size:14px;
float:left;
color:#ffffff;
padding:7px 7px 3px 0px;
cursor:pointer;
width:142px;
height: 20px;
margin:0px;
}
#drop_down_menu li ul {
margin:0px;
padding:0px;
list-style-type:none;
padding-top:10px;
background-color: #0e1f51;
}
#drop_down_menu li ul li {
display:block;
float:none; clear:both;
padding:3px 0px 0px 0px;
}
#drop_down_menu li ul li a {
color:#FFFFFF;
font-weight:normal;
text-decoration:none;
display:block;
font-size:12px;
padding: 0px 2px 0px 0px;
}
#drop_down_menu li ul li a:HOVER {
text-decoration:underline;
color:#CCCCCC;
}
#drop_down_menu li a {
color:#FFFFFF;
font-weight:normal;
text-decoration:none;
display:block;
color:#ffffff;
padding:0px 0px 3px 0px;
cursor:pointer;
font-size: 14px;
}
#drop_down_menu li a:HOVER {
text-decoration:underline;
color:#ffffff;
}
[B]HTML[/B]
<body><div id="menu-container"><ul id="drop_down_menu" name="drop_down_menu"><li class="menu3"><a href="">Home</a></li><li class="menu">DD1
<ul class="links"><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li></ul></li><li class="menu">DD2
<ul class="links"><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li></ul></li><li class="menu">DD3
<ul class="links"><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li></ul></li><li class="menu">DD4
<ul class="links"><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li></ul></li></ul></div></body>
You what? It is obvious that you have built nothing, you have used a javascript framework. The question is which framework? JQuery, MooTools, Protototype? Other?
Again I apologize for my wording; I did not mean that MooTools was a tutorial. The other source I used was a tutorial, to get the drop down drop over the background image. I included some code from that tutorial in the MooTools framework. I am not trying to come off like I am a JavaScript expert, I am not....I am a beginner, so my terminology may be wrong, but I really do need help. I can not give a link because of security issues. Also Fang, thanks for the link, but I am using ColdFusion. Is this forum for PHP and JavaScript only?
I need to know why this is not working in IE7, but it did work in IE6, and has been for a while.
I can't see how a server language, ColdFusion, would affect the problem.
The 'tutorial' example works, except for the z-index. Compare that with your code.
At least 98% of internet users' DNA is identical to that of chimpanzees
Nav works in IE6 not in IE7
Reply With Quote
Originally Posted by graphis22
Bookmarks