How can I prevent the menu from showing until it is fully loaded?
username
Good evening, is there a way to prevent all elements from showing in a nested side menu after a click or refresh. What I need is to show the element only in the menu or submenu that I click? Website: link . thank you very much.
jQuery：
if (window.location.href.indexOf('http://www.odsavacky.cz/blog/wpcproduct/') != -1 ){
$('.arrows_list1-1 li ul').hide();
var prev_url = document.referrer;
var $current = $('.arrows_list1-1 li a[href="' + prev_url + '"]');
$current.parents('.sub-menu').show();
$current.next('.sub-menu').show();
}else if(window.location.href.indexOf('/page/') != -1){
$('.arrows_list1-1 li ul').hide();
var page_url = window.location.href.split("/").slice(0,5).join("/");
page_url = page_url + "/";
var $current = $('.arrows_list1-1 li a[href="' + page_url + '"]');
$current.parents('.sub-menu').show();
$current.next('.sub-menu').show();
}else{
$('.arrows_list1-1 li ul').hide();
$('.arrows_list1-1 li').click(function(ev) {
$(this).find('>ul').show();
ev.stopPropagation();
});
var url = window.location.href;
var $current = $('.arrows_list1-1 li a[href="' + url + '"]');
$current.parents('.sub-menu').show();
$current.next('.sub-menu').show();
}
kilobit
There are several ways to do this. But I can suggest you to use one of the following:
add this cssto your page
body:not(.loaded) ul.sub-menu
{
display:none;
}
Then, after all the menu code has executed, add:
$('body').addClass('loaded');
It hides the submenu until the entire script is executed.
upgrade
I don't know how you know which ulelement to display based on the page URL, but you do (right?).
Again create a css rule with logic that just does the math on what you want to hide and append this css before the page loads.
After your last <ul>addition , add the following:
<script>
/** FIRST, use your magic to get the li element thats currently selected **/
var currentlySelectedItem = $('.arrows_list1-1 li a[href="' + MAGIC MAGIC + '"]');
var alwaysShowThisGuy = $currentlySelectedItem.parent().parent(); //Should return a <ul>
//Now the css
style = document.createElement('style');
style.innerHTML = "
body:not(.loaded) ul.sub-menu:not(#"+ $alwaysShowThisGuy.id +")
{
display:none;
}
";
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
</script>
Evil magic, right? !