Reputation: 117
I was trying to implement a megamenu, using this plugin, https://www.jqueryscript.net/demo/Responsive-Mega-Menu-dmenu/demo/xmpl1.html
I successfully implemented it, only issue is the entire content is displaying just before the page finishes to refresh/reloads. I tried placing the Js file on head & footer, after Jquery file, inside document ready, nothing really helped.
https://jsfiddle.net/mdsebans/s2quywj5/6/
<script>
$(document).ready(function() {
$(function() {
$(window).resize();
});
$('#menu').dmenu({
menu: {
logo: true,
align: 'right'
},
item: {
bg: true,
border: false,
subindicator: true,
fit: [{
items: null,
fitter: 'icon-hide',
order: 'all'
}, {
items: null,
fitter: 'icon-only',
order: 'all'
}, {
items: ':not(.dm-item_align-right)',
fitter: 'submenu',
order: 'rtl'
}, {
items: ':not(.dm-item_align-right)',
fitter: 'hide',
order: 'rtl'
}]
},
submenu: {
arrow: false,
border: false,
shadow: true
},
subitem: {
bg: true,
border: false
}
});
});
Don't want the content inside dropdown to be displayed on each click on menu items or reload of the page.
Upvotes: 0
Views: 419
Reputation: 305
You can use loader for hiding HTML data to show users.
When browser render the page it first renders the HTML content
So you can use the following code :- End Of the HTML file add this link
<div class="loader"></div>
On the CSS file
.loader{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#fff;
}
In JQuery you can add this line to hide
$(function() {
$(window).resize();
$(".loader").hide();
});
I think this will help.
Upvotes: 1