Sidebar issue

[london-G]

Hello,

I have my sidebar which does like this:

Mediworld.co.uk

Could someone suggest a solution.

The plugin used for the sidebar is vertical mega menu.

[pikpik]

Hi london-G,

The website and menu appear to work in Safari (5) for Mac OS X. What seems to be the issue?

Thank you,
pikpik

[london-G]

The sidebar is coming too slowly. You can see all the headings(including subheading) as one column when you load the page.

[pikpik]

Oh, I see. Well, one possibility could be to use CSS to hide the menu. Then, after the mega menu JavaScript code has run, you could make them visible again (with either CSS or JS).

Sometime before the menu HTML (maybe in an CSS file):

<style>

    #dc_jqverticalmegamenu_widget-2-item .menu,
    #dc_jqverticalmegamenu_widget-4-item .menu,
    #dc_jqverticalmegamenu_widget-5-item .menu {

        display: none;

    }

</style>

Later, where your inline JavaScript code currently is:

<script type="text/javascript">

    jQuery(document).ready(function($) {

        jQuery('#dc_jqverticalmegamenu_widget-2-item .menu').dcVerticalMegaMenu({
            rowItems: 3,
            speed: 'normal',
            direction: 'right',
            effect: 'show'
        });

        jQuery('#dc_jqverticalmegamenu_widget-4-item .menu').dcVerticalMegaMenu({
            rowItems: 3,
            speed: 'fast',
            direction: 'right',
            effect: 'show'
        });

        jQuery('#dc_jqverticalmegamenu_widget-5-item .menu').dcVerticalMegaMenu({
            rowItems: 1,
            speed: 'fast',
            direction: 'right',
            effect: 'show'
        });


        jQuery('#dc_jqverticalmegamenu_widget-2-item .menu').show();

        jQuery('#dc_jqverticalmegamenu_widget-4-item .menu').show();

        jQuery('#dc_jqverticalmegamenu_widget-5-item .menu').show();

    });

</script>

However, with that solution you might end up completely hiding the menus from users who aren't allowing JavaScript to run. If you must have the menus work for them, then it might be safer to use only CSS for hiding the menu while the page loads. Here's one possibility for that:

Before the menus:

<style>

    #dc_jqverticalmegamenu_widget-2-item .menu,
    #dc_jqverticalmegamenu_widget-4-item .menu,
    #dc_jqverticalmegamenu_widget-5-item .menu {

        display: none;

    }

</style>

After the menus:

<style>

    #dc_jqverticalmegamenu_widget-2-item .menu,
    #dc_jqverticalmegamenu_widget-4-item .menu,
    #dc_jqverticalmegamenu_widget-5-item .menu {

        display: block; /* Or whatever's appropriate for your layout. */

    }

</style>

[JorgeM]

You have quite a bit of stuff happening on that page. When I took a look with dev tools, there were 70 different requests...

honestly, one of the easiest ways to resolve this is probably by hiding/showing the content after its loaded as described above. However, you may want to take a look at http://www.webpagetest.org/ for some guidance on things you can do to improve loading, etc... This site was rated "F" on just about every category.

Results of initial testing --> http://www.webpagetest.org/result/130721_BC_P7D/

[london-G]

Alright, thanks. JorgeM I don't really understand what is means, Could you please explain further?

[JorgeM]

With regard to your site's performance, you can use the webpagetest site to help you identify items on the site that are not optimal such as caching content, using compression, etc.. There are other things you can also do to optimize your external content such as merge files where possible, minify CSS and JavaScript, etc..

Every little bit helps improve the site's performance.

also, sort of related, run your site through a markup validation service such a http://validator.w3.org/ as you can find markup errors to ensure your code is clean and functional accross all browsers...

With regard to your sidebar question, again, I think a quick fix is to hide, then show upon load complete. Any other guidance from my is challenging at this point...you have a lot of markup and external files that I would have to go through to identify other things to help your site load more effecient.

[london-G]

Thanks JorgeM, I get it now.

I only have one CSS file for the menu:

#dc_jqverticalmegamenu_widget-%ID%-item {font: normal 13px Arial, sans-serif; line-height: 16px;}
#dc_jqverticalmegamenu_widget-%ID%-item ul ul, #dc_jqverticalmegamenu_widget-%ID%-item ul li, #dc_jqverticalmegamenu_widget-%ID%-item ul li .sub ul {margin: 0; padding: 0; border: none;}
#dc_jqverticalmegamenu_widget-%ID%-item ul.menu.left, #dc_jqverticalmegamenu_widget-%ID%-item ul.menu.right {position: relative; margin: 0; padding: 0; border-bottom: 1px solid #afafaf;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li {float: none; display: block; margin: 0; padding: 0; font-size: 13px; font-weight: bold;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li a {float: none; display: block; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; color: #222; background: url(skins/images/bg_white.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;}
#dc_jqverticalmegamenu_widget-%ID%-item ul.left li a {padding: 12px 10px 12px 38px;}
#dc_jqverticalmegamenu_widget-%ID%-item ul.right li a {padding: 12px 38px 12px 15px;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li a.dc-mega {position: relative;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li a .dc-mega-icon {display: block; position: absolute; top: 18px; width: 6px; height: 8px;}
#dc_jqverticalmegamenu_widget-%ID%-item ul.left li a .dc-mega-icon {background: url(skins/images/arrow_side.png) no-repeat 0 0; left: 15px;}
#dc_jqverticalmegamenu_widget-%ID%-item ul.right li a .dc-mega-icon {background: url(skins/images/arrow_side.png) no-repeat -18px 0; right: 15px;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li.mega-hover a, #dc_jqverticalmegamenu_widget-%ID%-item ul li a:hover {background-position: 100% -40px; color: #000; text-shadow: none;}
#dc_jqverticalmegamenu_widget-%ID%-item ul.left li.mega-hover a.dc-mega {border-left-color: #f5f5f5;}
#dc_jqverticalmegamenu_widget-%ID%-item ul.right li.mega-hover a.dc-mega {border-right-color: #f5f5f5;}
#dc_jqverticalmegamenu_widget-%ID%-item ul.left li.mega-hover a .dc-mega-icon {background-position: 0 0;}
#dc_jqverticalmegamenu_widget-%ID%-item ul.right li.mega-hover a .dc-mega-icon {background-position: -18px 0;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub-container {position: absolute; border: 1px solid #bbb;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub {padding: 20px 10px 10px 20px; background: #F4F4F4 url(skins/images/bg_grad.png) repeat-x 0 0; border: 1px solid #fff; margin: 0;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub .row {width: 100%; overflow: hidden; clear: both;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub li {list-style: none; float: none; width: 160px; font-size: 1em; font-weight: normal;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub li.mega-hdr.last {margin-right: 0;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub a {background: none; border: none; text-shadow: none; color: #111; padding: 6px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 10px; margin-bottom: 5px; background: #d9d9d9 url(skins/images/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #000; text-shadow: 1px 1px 1px #fff;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;}
#dc_jqverticalmegamenu_widget-%ID%-item ul .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; border: 1px solid #f4f4f4; background: url(skins/images/arrow_off.png) no-repeat 5px 8px; font-weight: normal;}
#dc_jqverticalmegamenu_widget-%ID%-item ul .sub li.mega-hdr li a:hover {color: #a32403; border: 1px solid #ccc; background: #fff url(skins/images/arrow_on.png) no-repeat 5px 8px;}
#dc_jqverticalmegamenu_widget-%ID%-item ul .sub ul li {padding-right: 0;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub-container.non-mega .sub {padding: 20px;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(skins/images/arrow_off.png) no-repeat 7px 12px;}
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub-container.non-mega li a:hover {color: #a32403; padding: 6px 4px 6px 21px; border: 1px solid #ccc; background: #fff url(skins/images/arrow_on.png) no-repeat 6px 11px;}

How I am supposed to add the code before and after the menu in that case? I tried to put it at beginning and end but it hides the complete menu.

[JorgeM]

If you want to hide then show, the easiest approach is to wrap you menu in a div, then only worry about showing or hiding that single div element.

[london-G]

That's confusing. Will I not be able to do this only by editing the CSS?

[JorgeM]

You can hide the elements via CSS using display:none, but I would show the element via jQuery using the .show() method that pikpik described above.