The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Side Bar/Nav Issue

View previous topic View next topic Go down

Solved Side Bar/Nav Issue

Post by ShadesOfJay on December 22nd 2014, 12:31 am

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');
});


Last edited by ShadesOfJay on December 22nd 2014, 2:46 am; edited 1 time in total

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: Side Bar/Nav Issue

Post by Ange Tuteur on December 22nd 2014, 2:43 am

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;}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Side Bar/Nav Issue

Post by ShadesOfJay on December 22nd 2014, 2:47 am

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

ShadesOfJay
Forumember

Female Posts : 35
Reputation : 1
Language : English

http://www.virtuousrealms.board-directory.net

Back to top Go down

Solved Re: Side Bar/Nav Issue

Post by Ange Tuteur on December 22nd 2014, 2:50 am

You're welcome ^^

Topic archived

Happy holidays santa

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum