Sebastian Devassy
Sebastian Devassy

Reputation: 117

Content inside menu flashes just while reloading/refreshing page

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

Answers (1)

Puneet Sharma
Puneet Sharma

Reputation: 305

You can use loader for hiding HTML data to show users.

When browser render the page it first renders the HTML content

See Here

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

Related Questions