11540 sujets

JavaScript, DOM et API Web HTML5

Probleme Menu vertical Fade in Fade out

Bonjour a tous,

je viens vers vous car je me bat depuis quelques heures maintenant avec un menu vertical.

d'ailleurs c'est de pire en pire ..
Voici l'adresse : http://langlois.adrien.free.fr/audrey/

je fais un site pour une amie, et voila j'ai pris ce Skin pensant qu'il était parfait pour ce que je voulais en faire car on peut se "logger" et y ajouter soit même ses nouvelles créations sans forcément y connaitre quelque chose en php/css/hmtl ...
Sauf que, sous PORTFOLIO, on peut y mettre autant de sous menu qu'on veut, ce qui nous amène a un bazar de photos .. mais moi ce que je veux c'est plusieurs "PORTFOLIO ( a qui on changera le nom ils vont pas tous s'appeler ainsi hein" qui déroulent donc des sous menus

Exemple :

Accueil
Costumes
Accessoires
About
Contact

quand on clique sur Costumes ca se déroule :
costume1
costume2
costume3

Quand on clique sur Costume 1 on accède a un diaporama de 3 photos par exemple.

Ce que je veux c'est surtout récuperer ce menu, que je trouve magnifique, il est transparent, ca se déroule, enfin plutôt le reste s'écarte vers le bas et laisse apparaître le sous menu tout doucement avec des effets de transparence et tout .

J'ai le code des effets de transparences et tout et tout.
Mais ce que je n'arrive pas c'est simplement creer les liens qui lient le menu "Costume" par exemple aux sous menus Costumes1 , 2 3 etc ...

<!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>Audrey Ithurralde,  <? echo $sitename; ?></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>  
<script type="text/javascript">
	$(document).ready(function(){
		<? if($ok != 1){ ?>
		$(".left_column").fadeIn(1000);
		//Show Home Box when page loads
		focusCurrent("div.side_links a","div#box1");
		<? } ?>
		
		//Clicking On Links - Fade Out All .main Divs, delay everything for 500 ms, Fade Links to half opacity, Fade In Current Link, Fade In Current Content Box
		var fadeable = 1;
		function hidePlinks(){
			$("div.side_links_mini").slideUp("slow").dequeue()
		}
		function fadeMains(){
			$("div.main").fadeOut("slow").fadeTo(550, 1)
			$(".reply").css("display", "none")
		}
		function fadeSideLinks(){
			$("div.side_links a").fadeTo(250, .5).dequeue()
		}
		function focusCurrent(l,b){
			$(l).fadeTo(250, 1).dequeue()
			$(b).fadeIn("slow", function(){ fadeable = 1; })
		}
		function fadeIcons(){
			$("div.icon_holder").fadeTo(250, .75);
		}
		
		$("a#link1").click(function(){
			if(fadeable == 1){
				fadeable = 0;
				$(this).dequeue()
				fadeMains()
				hidePlinks()
				focusCurrent("div.side_links a","div#box1")
			}
		})
		$("a#link2").click(function(){
			if(fadeable == 1){
				fadeable = 0;
				$(this).dequeue()
				fadeMains()
				fadeSideLinks()
				$("div.side_links_mini").slideDown("slow")
				focusCurrent("a#link2","div#box2")
			}
		})
		$("a#link3").click(function(){
			if(fadeable == 1){
				$(this).dequeue()
				fadeMains()
				fadeSideLinks()
				hidePlinks()
				focusCurrent("a#link3","div#box3")
				fadeable = 0;
			}
		})
		$("a#link4").click(function(){
			if(fadeable == 1){
				$(this).dequeue()
				fadeMains()
				fadeSideLinks()
				hidePlinks()
				focusCurrent("a#link4","div#box4")
				fadeable = 0;
			}
		})
		$("div.login").fadeTo(1000, .65);
		$("div.login").hover(
			function(){
				$(this).fadeTo(200, 1).dequeue();
			},
			function(){
				$(this).fadeTo(200, .65).dequeue();
			}
		);
		
		//Portfolio Subs
		<?
		$under_link_query = mysql_query("SELECT DISTINCT(type), type FROM ProFolio_work");
		while($u_row = mysql_fetch_assoc($under_link_query)){
			$type = $u_row['type'];
			?>
			$("a#link_<? echo str_replace(' ', '_', $type); ?>").click(function(){
				if(fadeable == 1){
				fadeable = 0;
					$(this).dequeue()
					fadeMains()
					fadeSideLinks()
					fadeIcons()
					focusCurrent("a#link_<? echo str_replace(' ', '_', $type); ?>","div#box_<? echo str_replace(' ', '_', $type); ?>");
				}
			})
			<?
		}
		?>
		$("div.icon_holder").mouseover(function(){
			$(this).fadeTo(150, 1).dequeue()
		})
		$("div.icon_holder").mouseout(function(){
			$(this).fadeTo(300, .75).dequeue()
		})



Comme vous pouvez le voir en bas il nous propose "Portfolio Subs" comme si je pouvais mettre qu'un seul lien qui se déroule .. j'en voudrai donc plusieurs, mais y a toutes ces variables que je voudrai virer en fait .. et faire quelque chose de simple

ce qu'il faut retenir c'est

-les variables a virer
-pas de login, tant pis trop compliqué
-récupérer le menu tout joli

Est ce possible ?
Merci d'avance

(je disais en haut que c'etait de pire en pire car, le truc veut plus rien uploader, et donc le menu portfolio ne bouge plus --' )
Modifié par Adriendrien (06 Feb 2013 - 23:55)
Sujet clos
Aller à