Forums

benkenobi77

So, my menu is working but I have a question about having a jQuery function only load on the initial page view. Right now my little menu load up movement loads everytime you click an item because it refreshes the instance of header.php (in WP) and of course executes the load and all of the menu animation after. So -

1) How do I change this so when the site first loads that little menu transition but it never happens again.

2) How can you do this in a broader sense? Like have the background or sidebar do a transition into place when the user comes to the site but upon further navigation the site stays the same?

Thanks in advance for any help.

MY LINK: http://abrahamkinney.com/isgood/

MY JS:

$(function() {
	    var d=300;
	    $('#main_nav a').each(function(){
	        $(this).stop().animate({
	            'marginTop':'-42px'
	        },d+=150);
	    });

$(function() {
$('#main_nav > li').hover(
	function(){
		$('a',$(this)).stop().animate({
			'marginTop':'-5px'},170);
		},
	function(){
		$('a',$(this)).stop().animate({
			'marginTop':'-42px'},170);
		
		});
	});
});

MY CSS FOR THE MENU:

		#main_nav{
		width: 720px;
		height: 60px;
	    list-style: none;
		z-index: 900;
		margin: 0 0 0 225px;
		padding: 0;
		position: absolute;
		}
		
		#main_nav li{
			width: 97px;
			height: 73px;
			margin-left: 5px;
			float: left;
			display: inline;
			}
		
		#main_nav li a{
	    width: 97px;
	    height: 73px;
		margin-top: -5px;
		padding-top: 48px;
		color: #CCC;
		font-size: 95%;
		text-align: center;
		display: block;
		text-decoration: none;
		}
		
		#main_nav li.page-item-4 a {background: url(images/menubutton_home.png) no-repeat;}
		#main_nav li.page-item-2 a {background: url(images/menubutton_about.png) no-repeat;}
		#main_nav li.page-item-12 a {background: url(images/menubutton_contact.png) no-repeat;}	    
		#main_nav li.page-item-8 a {background: url(images/menubutton_web.png) no-repeat;}		
		#main_nav li.page-item-14 a {background: url(images/menubutton_print.png) no-repeat;}
		#main_nav li.page-item-10 a {background: url(images/menubutton_photo.png) no-repeat;}
		#main_nav li.page-item-6 a {background: url(images/menubutton_illustration.png) no-repeat;}

MY HTML/PHP (WordPress) FOR THE MENU:

		        <ul id=\"main_nav\">
			<?php wp_list_pages(\"title_li=\"); ?>
				</ul>

dcp3450

you can use the class from the body when on the home page:

<body class="home page page-id-4 page-template page-template-default">

you can do something like:

if($('body[class$="home"]'))
{
...
}

This checks the class attribute to see if home is listed. if so only the code inside the if statement will execute.

dcp3450

side note:

your header being at the top like that makes me want to keep scrolling up.

benkenobi77

thanks for the input.

1) Would it work to put a body class on the menu and remove that class after the first cycle through or would that class just get put back on once the header is refreshed?

2) Set a cookie and if the cookie is set do not do the menu fade in?

Where else would my header go? Not sure what you mean by the header at the top part.

treehouse : what would you like to learn today?

Forums

jQuery Question