Question

I am testing new menu code and one problem with it, is that it loads everything, then jumps into place when all finished loading.

So what i’m trying is to hide it until the document is ready and then show it

So, CSS to hide it:

#mega-menu-1 {
font: normal 13px Arial, sans-serif; 
list-style: none; 
position: relative; 
padding: 0; 
margin: 0;
margin-top:13px;
display: none;
}

Then I’m calling the jquery at the end of the page to load the menu, then change the display to block, but menu not displaying

Here’s the jquery I’m trying:

<script type="text/javascript">
    $(document).ready(function($){
        $('#mega-menu-1').dcMegaMenu({
            rowItems: '2',
            event: 'click',
            fullWidth: false
        });
        $('#mega-menu-1').css('display') == 'block';
    });
</script>

What’s the correct way to do this?

Answer 1

If you are trying to set the display property then you have wrong syntax for jQuery function css(), you need css( propertyName , value) to set property value.

Change

$('#mega-menu-1').css('display') == 'block';

To

$('#mega-menu-1').css('display', 'block') ;

OR You can also call jQuery show() method that will do the same.

$('#mega-menu-1').show();