Side Bar/Nav Issue

Hello!
So my problem is that whenever I load the page, the contents located inside the sidebar appear for a few seconds upon loading. How do I prevent that?

Forum: www.virtuous-realms.board-directory.net

CSS

Code:

#nav{width:200px;height:200px;position:fixed;top:0;left:0;z-index:100;background:#a4a4a4;color:#fff;overflow:hidden;}
#nav ul{margin:25;padding:25;width:200px;margin:25px;list-style:none;}
#nav a span{margin:0 25px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}

HTML

Code:

<div id="nav">
<ul>
<li><a href="http://virtuous-realms.board-directory.net/t285-general-rules-of-the-pack"><span>     </span>Forum Rules</a></li>
<li><a href=""><span></span> SubPage 1</a></li>
<li><a href=""><span></span> SubPage 2</a></li>
<li><a href=""><span></span> SubPage 3</a></li>
<li><a href="http://virtuous-realms.board-directory.net/t69-pack-copyrights"><span>     </span>Copyrights</a></li>
</ul>
</div>

Located in the overall_header template.


Javascript

Code:

$(function(){
    $('#nav').hover(function(){
        $(this).animate({width:'200px'},500);
    },function(){
        $(this).animate({width:'35px'},500);
    }).trigger('mouseleave');
});

Hello @ShadesOfJay,

Remove the JavaScript, and replace your CSS by this :

Code:

#nav{width:35px;height:200px;position:fixed;top:0;left:0;z-index:100;background:#a4a4a4;color:#fff;overflow:hidden;transition:500ms;}
#nav:hover { width:200px }
#nav ul{margin:25;padding:25;width:200px;margin:25px;list-style:none;}
#nav a span{margin:0 25px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}

Wow. Thank you so much!
You can lock this now.

You're welcome ^^

Topic archived

Happy holidays