<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"> </script>
<script type='text/javascript'>
$(document).ready(function(){	
	
if($("#navlist li").height() > 7){
  $("#navlist li").hover(		
    function() {  $(this).stop().animate({ top: '15px' }, 200, 'swing'); }, 
    function() {  $(this).stop().animate({ top: '0px' }, 200, 'swing');	}					
   );
}
else{}
  
   $('#navlist li').click(function(){   

     $('#navcontainer').animate({opacity: 1,"marginTop": 0,duration: "slow",easing: "easein"}, 1000 );
		
        $('#navlist li').animate({ height: "7", opacity: 0.4  }, 1000 );
        $(this).stop().animate({ opacity: 1 });
	$('#navlist li a').hide();
	$(this).find('a').stop().animate({ opacity: 1 });		
	$(this).find('a').show('slide',1000);
	
   });
	
});
</script>
<div id="navcontainer">
   <ul id="navlist">
	<li><a href="#" class="current"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
	<li><a href="#"><span>Item four</span></a></li>
	<li><a href="#"><span>Item five</span></a></li>
   </ul>
</div>

You just spit some code, but what's your problem? What are you trying to accomplish? What work and what does not?

When menu is clicked menu container slides to top from center, lists -other than clicked one- are reduced to 7px height. From onward I failed to code properly.

How to make another menu to original height after clicked on it when it's height is 7px? How to make 7px height of previously clicked menu when other menu is clicked ?


Try code. Not too much complex.

You just spit some code, but what's your problem? What are you trying to accomplish? What work and what does not?

I really didn't understand what you are trying to do, but post you css so I can see the menu working and see if I figure it out.

/* CSS Document */

#navcontainer{
		text-align: center;
		text-transform: uppercase;				
		float: left;
		color: #333;
		background: #f0e7d7;
		height: 25px;
		width: 100%;
		display: inline-block;				
		padding: 2em 0;				
		margin-top:250px;
		padding-bottom:55px;
		padding-top:5px;
		position:relative;				
	     }
			  
		  
#navlist {
	   display: block;
	   list-style-type: none;
	   background:none;			
	   width: 70%;	
	   height: 100%;
	   padding: 0;
	   margin: 0 auto;				
	   position:relative;			
	 }


#navlist li{
	     display: inline;				
	     width:  125px;
	     height: 75px;				
	     float: left;		
	     position:relative;
	     padding-right:1px;
             background:#99CC66;
	    }
			
			
#navlist li a {
		display: block;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background:none;
		color:#000000;
				
	      }
			  
#navlist li a span {
	             display: block;
	             padding: 60px 7px 0;
	             font-size: 12px;
	             text-align: center;
	             font-weight:bold;
                   }

I really didn't understand what you are trying to do, but post you css so I can see the menu working and see if I figure it out.

Ok, let's see:

1. All itens are showed at the center of the page.
2. Click on Home item.
3. The menu goes to the top of the page.
4. Home item remains the same size, and all others are minimized.

From there, what you want to do?

Thanks for trying code.
From here, how to maximize minimized menu on mouse over, how to show(maximize ) next clicked menu and minimize current selected menu?

Ok, let's see:

1. All itens are showed at the center of the page.
2. Click on Home item.
3. The menu goes to the top of the page.
4. Home item remains the same size, and all others are minimized.

From there, what you want to do?

Something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"> </script>
<script type='text/javascript'>
$(document).ready(function(){	
	
	$("#navlist li").hover(		
		function() {  
			if ( $(this).hasClass("minimized") )
			{
				$(this).animate({ height: "75", opacity: 1  }, 1000 ).addClass("minimized");
				$(this).find('a').show('slide', 500);
			}
			else
			{
				$(this).stop().animate({ top: '15px' }, 200, 'swing'); 
			}
		}, 
		function() {  
			if ( $(this).hasClass("minimized") )
			{
				$(this).animate({ height: "7", opacity: 0.4  }, 1000 ).addClass("minimized");
				$(this).find('a').hide();
			}
			else
			{
				$(this).stop().animate({ top: '0px' }, 200, 'swing');	
			}
		}					
	);
  
	$('#navlist li').click(function(){   

		$('#navcontainer').animate({opacity: 1,"marginTop": 0,duration: "slow",easing: "easein"}, 1000 );
		
		$('#navlist li').not(this).animate({ height: "7", opacity: 0.4  }, 1000 ).addClass("minimized");
		
		$(this).removeClass("minimized");
		
		$('#navlist li a').hide();
		$(this).find('a').stop().animate({ opacity: 1 });		
		$(this).find('a').show('slide',1000);
	});
	
});
</script>

<style>

/* CSS Document */

#navcontainer{
		text-align: center;
		text-transform: uppercase;				
		float: left;
		color: #333;
		background: #f0e7d7;
		height: 25px;
		width: 100%;
		display: inline-block;				
		padding: 2em 0;				
		margin-top:250px;
		padding-bottom:55px;
		padding-top:5px;
		position:relative;				
	     }
			  
		  
#navlist {
	   display: block;
	   list-style-type: none;
	   background:none;			
	   width: 70%;	
	   height: 100%;
	   padding: 0;
	   margin: 0 auto;				
	   position:relative;			
	 }


#navlist li{
	     display: inline;				
	     width:  125px;
	     height: 75px;				
	     float: left;		
	     position:relative;
	     padding-right:1px;
             background:#99CC66;
	    }
			
			
#navlist li a {
		display: block;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background:none;
		color:#000000;
				
	      }
			  
#navlist li a span {
	             display: block;
	             padding: 60px 7px 0;
	             font-size: 12px;
	             text-align: center;
	             font-weight:bold;
                   }


</style>

	<div id="navcontainer">
	   <ul id="navlist">
		<li><a href="#" class="current"><span>Home</span></a></li>
		<li><a href="#"><span>About</span></a></li>
		<li><a href="#"><span>Contact</span></a></li>
		<li><a href="#"><span>Item four</span></a></li>
		<li><a href="#"><span>Item five</span></a></li>
	   </ul>
	</div>

</body>
</html>

Hey, Great work...!!!!

Completed my menus!

But there is little problem with script sometimes lists just keep minimizing & maximizing continuously, not always, but sometimes.

I'm trying to solve, but if you have time kindly try to solve.

Nice work, Thanks a lot!!!

Something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"> </script>
<script type='text/javascript'>
$(document).ready(function(){	
	
	$("#navlist li").hover(		
		function() {  
			if ( $(this).hasClass("minimized") )
			{
				$(this).animate({ height: "75", opacity: 1  }, 1000 ).addClass("minimized");
				$(this).find('a').show('slide', 500);
			}
			else
			{
				$(this).stop().animate({ top: '15px' }, 200, 'swing'); 
			}
		}, 
		function() {  
			if ( $(this).hasClass("minimized") )
			{
				$(this).animate({ height: "7", opacity: 0.4  }, 1000 ).addClass("minimized");
				$(this).find('a').hide();
			}
			else
			{
				$(this).stop().animate({ top: '0px' }, 200, 'swing');	
			}
		}					
	);
  
	$('#navlist li').click(function(){   

		$('#navcontainer').animate({opacity: 1,"marginTop": 0,duration: "slow",easing: "easein"}, 1000 );
		
		$('#navlist li').not(this).animate({ height: "7", opacity: 0.4  }, 1000 ).addClass("minimized");
		
		$(this).removeClass("minimized");
		
		$('#navlist li a').hide();
		$(this).find('a').stop().animate({ opacity: 1 });		
		$(this).find('a').show('slide',1000);
	});
	
});
</script>

<style>

/* CSS Document */

#navcontainer{
		text-align: center;
		text-transform: uppercase;				
		float: left;
		color: #333;
		background: #f0e7d7;
		height: 25px;
		width: 100%;
		display: inline-block;				
		padding: 2em 0;				
		margin-top:250px;
		padding-bottom:55px;
		padding-top:5px;
		position:relative;				
	     }
			  
		  
#navlist {
	   display: block;
	   list-style-type: none;
	   background:none;			
	   width: 70%;	
	   height: 100%;
	   padding: 0;
	   margin: 0 auto;				
	   position:relative;			
	 }


#navlist li{
	     display: inline;				
	     width:  125px;
	     height: 75px;				
	     float: left;		
	     position:relative;
	     padding-right:1px;
             background:#99CC66;
	    }
			
			
#navlist li a {
		display: block;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background:none;
		color:#000000;
				
	      }
			  
#navlist li a span {
	             display: block;
	             padding: 60px 7px 0;
	             font-size: 12px;
	             text-align: center;
	             font-weight:bold;
                   }


</style>

	<div id="navcontainer">
	   <ul id="navlist">
		<li><a href="#" class="current"><span>Home</span></a></li>
		<li><a href="#"><span>About</span></a></li>
		<li><a href="#"><span>Contact</span></a></li>
		<li><a href="#"><span>Item four</span></a></li>
		<li><a href="#"><span>Item five</span></a></li>
	   </ul>
	</div>

</body>
</html>

I wasn't able to reproduce the problem, but see if this works:

$(document).ready(function(){	
	
	$("#navlist li").hover(		
		function() {  
			if ( $(this).hasClass("minimized") )
			{
				$(this).stop().animate({ height: "75", opacity: 1  }, 1000 );
				$(this).find('a').show('slide', 500);
			}
			else
			{
				$(this).stop().animate({ top: '15px' }, 200, 'swing'); 
			}
		}, 
		function() {  
			if ( $(this).hasClass("minimized") )
			{
				$(this).stop().animate({ height: "7", opacity: 0.4  }, 1000 ).addClass("minimized");
				$(this).find('a').hide();
			}
			else
			{
				$(this).stop().animate({ top: '0px' }, 200, 'swing');	
			}
		}					
	);
  
	$('#navlist li').click(function(){   

		$('#navcontainer').animate({opacity: 1,"marginTop": 0,duration: "slow",easing: "easein"}, 1000 );
		
		$('#navlist li').not(this).animate({ height: "7", opacity: 0.4  }, 1000 ).addClass("minimized");
		
		$(this).removeClass("minimized");
		
		$('#navlist li a').hide();
		$(this).find('a').stop().animate({ opacity: 1 });		
		$(this).find('a').show('slide',1000);
	});
	
});

Great work!!!
This worked perfectly. Now it's complete.

Thanks for spending your time.

I wasn't able to reproduce the problem, but see if this works:

$(document).ready(function(){	
	
	$("#navlist li").hover(		
		function() {  
			if ( $(this).hasClass("minimized") )
			{
				$(this).stop().animate({ height: "75", opacity: 1  }, 1000 );
				$(this).find('a').show('slide', 500);
			}
			else
			{
				$(this).stop().animate({ top: '15px' }, 200, 'swing'); 
			}
		}, 
		function() {  
			if ( $(this).hasClass("minimized") )
			{
				$(this).stop().animate({ height: "7", opacity: 0.4  }, 1000 ).addClass("minimized");
				$(this).find('a').hide();
			}
			else
			{
				$(this).stop().animate({ top: '0px' }, 200, 'swing');	
			}
		}					
	);
  
	$('#navlist li').click(function(){   

		$('#navcontainer').animate({opacity: 1,"marginTop": 0,duration: "slow",easing: "easein"}, 1000 );
		
		$('#navlist li').not(this).animate({ height: "7", opacity: 0.4  }, 1000 ).addClass("minimized");
		
		$(this).removeClass("minimized");
		
		$('#navlist li a').hide();
		$(this).find('a').stop().animate({ opacity: 1 });		
		$(this).find('a').show('slide',1000);
	});
	
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.