Need Help to complete menus

Question

vizz 0 Junior Poster

12 Years Ago

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

javascript

2 Contributors
10 Replies
108 Views
2 Days Discussion Span
Latest Post 12 Years Ago Latest Post by vizz

AleMonteiro 238 Can I pick my title?

12 Years Ago

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

AleMonteiro 238 Can I pick my title?

12 Years Ago

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.

AleMonteiro 238 Can I pick my title?

12 Years Ago

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?

Reply to this topic

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.

vizz 0 Junior Poster · Answer 1 · 2012-03-08T23:46:59+00:00

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?

vizz 0 Junior Poster · Answer 2 · 2012-03-09T00:07:40+00:00

/* 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.

vizz 0 Junior Poster · Answer 3 · 2012-03-09T11:51:58+00:00

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?

AleMonteiro 238 Can I pick my title? · Answer 4 · 2012-03-09T12:19:40+00:00

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>

vizz 0 Junior Poster · Answer 5 · 2012-03-09T15:23:01+00:00

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>

AleMonteiro 238 Can I pick my title? · Answer 6 · 2012-03-10T00:02:24+00:00

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

vizz 0 Junior Poster · Answer 7 · 2012-03-10T15:30:39+00:00

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