jurgen-1234
02-18-2014, 11:17 AM
Hi all,
I know I should not be bothered to much with IE8 but I still find people who work with this browser.
My issue is that IE8 does not seem to show the third level of my submenu (http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/).
I did alter the submenu and maybe it is due to an bug in IE8 (which I installed in Virtualbox). Anyway, I would appriciate it if someone would take a look at it.
You can find an exampe on my website (http://www.apologeet.nl/studies/essay).
This is the JQuery:
/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/
//Update: April 12th, 10: Fixed compat issue with jquery 1.4x
//** Jul 23rd, '12: Unofficial update adds hover images for down and right arrows in the format: filename_over.ext
//** These must be present for whichever or both of the arrow(s) are used and will preload.
//** See: http://www.dynamicdrive.com/forums/showthread.php?p=278181#post278181
//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'http://www.apologeet.nl/images/template/down.gif', 23], right:['rightarrowclass', 'http://www.apologeet.nl/images/template/right.gif'], re: /\.(?=(gif)|(jpg)|(png))/i}
var subslidemenu={
animateduration: {over: 400, out: 300}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid, arrowsvar){
arrowsvar.down[3] = arrowsvar.down[1].replace(arrowimages.re, '_over.');
arrowsvar.right[3] = arrowsvar.right[1].replace(arrowimages.re, '_over.');
jQuery(new Image()).attr('src', arrowsvar.right[3]);
jQuery(new Image()).attr('src', arrowsvar.down[3]);
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
var overarrow=arrowsvar[this.istopheader? 'down' : 'right'][3];
$curobj.find('img:eq(0)').attr('src', overarrow)
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(subslidemenu.animateduration.over)
},
function(e){
var arrow=arrowsvar[this.istopheader? 'down' : 'right'][1];
$curobj.find('img:eq(0)').attr('src', arrow)
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(subslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function(){
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}
//build menu with ID="slidemenu" on page:
subslidemenu.buildmenu("slidemenu", arrowimages)
This is the CSS:
.subslidemenu {
font: normal 11px/12px Arial, Helvetica, sans-serif;
padding: 4px 0 0 0;
height: 17px;
float: left;
}
.subslidemenu ul {
margin: 0;
padding: 0;
list-style-type: none;
background-image: url("http://www.apologeet.nl/images/template/sub-bg.gif");
background-repeat: repeat;
}
/*Top level list items*/
.subslidemenu ul li {
position: relative;
display: inline;
float: left;
background: url("http://www.apologeet.nl/images/template/navigation-dropdown-divider.gif") 0 0 no-repeat;
}
/*Top level menu link items style*/
.subslidemenu ul li a {
display: block;
padding: 8px 10px;
text-decoration: none;
}
.subslidemenu ul li a:link,.subslidemenu ul li a:visited {
outline: none;
text-decoration: none;
color: #84915D;
}
.subslidemenu ul li a:hover {
color: white;
}
/*1st sub level menu*/
.subslidemenu ul li ul {
position: absolute;
left: 0;
display: block;
visibility: hidden;
-moz-box-shadow: 8px 10px 25px #000; /* Firefox/Mozilla */
-webkit-box-shadow: 8px 10px 25px #000; /*Safari/Chrome */
box-shadow: 8px 10px 25px #000; /* Opera & how it should be */
z-index: 999;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.subslidemenu ul li ul li {
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.subslidemenu ul li ul li ul {
top: 0;
}
/*Sub level menulinks style*/
.subslidemenu ul li ul li a {
font: normal 11px/12px Arial, Helvetica, sans-serif;
width: 160px; /*width of sub menus*/
padding: 5px 5px 5px 10px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.subslidemenu ul li ul li a:hover {
/*sub menus hover style*/
background: rgba(0, 0, 0, 0.6);
/*color: black;*/
}
/*CSS classes applied to down and right arrow images*/
.downarrowclass {
position: absolute;
top: 12px;
right: 5px;
}
.rightarrowclass {
position: absolute;
top: 6px;
right: 5px;
}
* html .subslidemenu ul li a {
/*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ie7-8 .subslidemenu ul li ul {
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=8),
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6),
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=225,strength=1),
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=270,strength=3),
}
Probably it is just a small thing but I cannot find it.
Kind regards,
Jurgen
I know I should not be bothered to much with IE8 but I still find people who work with this browser.
My issue is that IE8 does not seem to show the third level of my submenu (http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/).
I did alter the submenu and maybe it is due to an bug in IE8 (which I installed in Virtualbox). Anyway, I would appriciate it if someone would take a look at it.
You can find an exampe on my website (http://www.apologeet.nl/studies/essay).
This is the JQuery:
/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/
//Update: April 12th, 10: Fixed compat issue with jquery 1.4x
//** Jul 23rd, '12: Unofficial update adds hover images for down and right arrows in the format: filename_over.ext
//** These must be present for whichever or both of the arrow(s) are used and will preload.
//** See: http://www.dynamicdrive.com/forums/showthread.php?p=278181#post278181
//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'http://www.apologeet.nl/images/template/down.gif', 23], right:['rightarrowclass', 'http://www.apologeet.nl/images/template/right.gif'], re: /\.(?=(gif)|(jpg)|(png))/i}
var subslidemenu={
animateduration: {over: 400, out: 300}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid, arrowsvar){
arrowsvar.down[3] = arrowsvar.down[1].replace(arrowimages.re, '_over.');
arrowsvar.right[3] = arrowsvar.right[1].replace(arrowimages.re, '_over.');
jQuery(new Image()).attr('src', arrowsvar.right[3]);
jQuery(new Image()).attr('src', arrowsvar.down[3]);
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
var overarrow=arrowsvar[this.istopheader? 'down' : 'right'][3];
$curobj.find('img:eq(0)').attr('src', overarrow)
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(subslidemenu.animateduration.over)
},
function(e){
var arrow=arrowsvar[this.istopheader? 'down' : 'right'][1];
$curobj.find('img:eq(0)').attr('src', arrow)
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(subslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function(){
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}
//build menu with ID="slidemenu" on page:
subslidemenu.buildmenu("slidemenu", arrowimages)
This is the CSS:
.subslidemenu {
font: normal 11px/12px Arial, Helvetica, sans-serif;
padding: 4px 0 0 0;
height: 17px;
float: left;
}
.subslidemenu ul {
margin: 0;
padding: 0;
list-style-type: none;
background-image: url("http://www.apologeet.nl/images/template/sub-bg.gif");
background-repeat: repeat;
}
/*Top level list items*/
.subslidemenu ul li {
position: relative;
display: inline;
float: left;
background: url("http://www.apologeet.nl/images/template/navigation-dropdown-divider.gif") 0 0 no-repeat;
}
/*Top level menu link items style*/
.subslidemenu ul li a {
display: block;
padding: 8px 10px;
text-decoration: none;
}
.subslidemenu ul li a:link,.subslidemenu ul li a:visited {
outline: none;
text-decoration: none;
color: #84915D;
}
.subslidemenu ul li a:hover {
color: white;
}
/*1st sub level menu*/
.subslidemenu ul li ul {
position: absolute;
left: 0;
display: block;
visibility: hidden;
-moz-box-shadow: 8px 10px 25px #000; /* Firefox/Mozilla */
-webkit-box-shadow: 8px 10px 25px #000; /*Safari/Chrome */
box-shadow: 8px 10px 25px #000; /* Opera & how it should be */
z-index: 999;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.subslidemenu ul li ul li {
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.subslidemenu ul li ul li ul {
top: 0;
}
/*Sub level menulinks style*/
.subslidemenu ul li ul li a {
font: normal 11px/12px Arial, Helvetica, sans-serif;
width: 160px; /*width of sub menus*/
padding: 5px 5px 5px 10px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.subslidemenu ul li ul li a:hover {
/*sub menus hover style*/
background: rgba(0, 0, 0, 0.6);
/*color: black;*/
}
/*CSS classes applied to down and right arrow images*/
.downarrowclass {
position: absolute;
top: 12px;
right: 5px;
}
.rightarrowclass {
position: absolute;
top: 6px;
right: 5px;
}
* html .subslidemenu ul li a {
/*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ie7-8 .subslidemenu ul li ul {
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=8),
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6),
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=225,strength=1),
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=270,strength=3),
}
Probably it is just a small thing but I cannot find it.
Kind regards,
Jurgen