I have a standard drop-down menu that uses jQuery to hide the children li elements. However, upon loading the site, the child elements quickly appear and subsequently disappear (sort of like a quick flash). I don't think this is at all related to the flash-of-unstyled-content known issue.
The site is in Hebrew, but that shouldn't affect anything. The site is located here
If you'd like a sample HTML + CSS and the Javascript code, I would gladly post it here.
I was just wondering if anyone has encountered this issue before. I'm seeing it in Chrome, and I haven't really checked if it also happens in IE and Firefox.
Thanks!
EDIT: HTML/CSS/JS shown below:
HTML:
<ul class="menu">
<li><a href="#">blah</a>
<ul class="sub-menu">
<li><a href="#">blah</a></li>
</ul>
</li>
</ul>
CSS:
/* NAVIGATION -- level 1 */
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; }
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; }
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95; }
ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; }
body.home .current_page_item > a { }
body.home .current_page_item > a:hover { }
/* NAVIGATION -- level 2 */
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; }
ul.menu li > div span { height: 15px; background: transparent; display: block; } /* used to push down the menu */
JS:
// navigation menu //
// add hasSubMenu to each li that has one //
$('.menu > li').has('ul').addClass('hasSubMenu');
// wrap with <div> //
$('li.hasSubMenu > ul').wrap('<div />');
$('ul.menu li > div').css('display', 'none');
$('ul.menu li > div').prepend('<span></span>');
$('li.hasSubMenu > a').click(function () {
return false;
});
// add class to <div> for extendedBg //
$('li.extendedBg').find('div').addClass('subBg2');
$('li.hasSubMenu').hover(function () {
// hover on
$(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */
function () {
$(this).find('div').css('display', 'block');
//$(this).find('ul').css('display','block');
}
);
}, function () {
// hover off
$(this).removeClass('hover').find('div').stop().fadeOut();
});
I have a standard drop-down menu that uses jQuery to hide the children li elements. However, upon loading the site, the child elements quickly appear and subsequently disappear (sort of like a quick flash). I don't think this is at all related to the flash-of-unstyled-content known issue.
The site is in Hebrew, but that shouldn't affect anything. The site is located here
If you'd like a sample HTML + CSS and the Javascript code, I would gladly post it here.
I was just wondering if anyone has encountered this issue before. I'm seeing it in Chrome, and I haven't really checked if it also happens in IE and Firefox.
Thanks!
EDIT: HTML/CSS/JS shown below:
HTML:
<ul class="menu">
<li><a href="#">blah</a>
<ul class="sub-menu">
<li><a href="#">blah</a></li>
</ul>
</li>
</ul>
CSS:
/* NAVIGATION -- level 1 */
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; }
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; }
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95; }
ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; }
body.home .current_page_item > a { }
body.home .current_page_item > a:hover { }
/* NAVIGATION -- level 2 */
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; }
ul.menu li > div span { height: 15px; background: transparent; display: block; } /* used to push down the menu */
JS:
// navigation menu //
// add hasSubMenu to each li that has one //
$('.menu > li').has('ul').addClass('hasSubMenu');
// wrap with <div> //
$('li.hasSubMenu > ul').wrap('<div />');
$('ul.menu li > div').css('display', 'none');
$('ul.menu li > div').prepend('<span></span>');
$('li.hasSubMenu > a').click(function () {
return false;
});
// add class to <div> for extendedBg //
$('li.extendedBg').find('div').addClass('subBg2');
$('li.hasSubMenu').hover(function () {
// hover on
$(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */
function () {
$(this).find('div').css('display', 'block');
//$(this).find('ul').css('display','block');
}
);
}, function () {
// hover off
$(this).removeClass('hover').find('div').stop().fadeOut();
});
- 1 please, post the sample html and css. Also jQuery or JS if you have one. It's working fine for me. – chepe263 Commented Apr 19, 2012 at 21:28
- @chepe263: posted html, css, and jQuery – Amit Commented Apr 19, 2012 at 21:35
4 Answers
Reset to default 10Set the dropdown menu as display: none in the page's CSS or directly in the element itself using style="display:none". This will hide it as the page loads.
I have the same issue :( except when i used the css to hide it on load, i now have the problem that it never displays! even when hovering over the parent...
Even before i posted my reply i thought id try one more thing
#navigation ul ul{
display:none;
}
instead of
#navigation ul ul li{
display:none;
}
and now it works perfectly
I recommend setting the style to display:none the the li elements in a style sheet, so that the browser knows to render them initially as not displayed. Then, when jQuery loads, the inline style that jQuery adds will override the display style.
ul li {
display:none;
}
Try:
.mobile-menu:not( .mm-menu ) {
display: none;
}
where '.mobile-menu' is whatever class or ID you have given to the containing element of your menu.
e.g
<div class="mobile-menu">
<ul>
<li><a href="/about">about</a></li>
<li><a href="/food">Food</a></li>
</ul>
</div>