Comment faire un menu Javascript/CSS complexe ? (voir exemple)

Bonjour à toutes et à tous,
Depuis le temps que je lis et qu'il fallait que je m'inscrive, voilà c'est fait !

Je suis plutot débutant dans la réalisation de site. Je connais le HTML et un peu le CSS. Je suis en train de découvrir les autres languages comme le Javascript par exemple.

Actuellement je bosse sur un site pour une marque de fringue (plutot sympa).
Voilà ou j'en suis pour le moment http://www.7underwear.com/home4.html

Pas de critique il est vraiment fait à l'arrache pour le moment, tout n'est pas cadré.

Cependant, j'ai repéré un autre site qui m'inspire bien : http://www.monsterenergy.com/.

Je suis fan de leur système de naviguation. Sauf que je ne vois pas comment ils ont fait.

Est-ce que quelqu'un pourrait m'expliquer, voire me pister pour en faire de même. Tout du moins quelque chose qui s'en rapproche car je n'ai pas encore autant de conteu. Mais c'est par là que je me dirige.

Ca serait top si vous pouviez m'aider. Je pense que c'est un bon défi

Merci d'avance !
Modifié par Igor (08 Dec 2010 - 16:53)

Bonjour!

Je ne sais pas si tu as lu ce tutoriel, qui pourrais bien t'être utile:

http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html

Petite question: je débute dans la réalisation de site, comment as tu fais ce dégradé au milieu de ta page?
Et comment remplir le fond d'écran en noir?

merci

Définitivement fait avec jQuery ça.

Tu trouveras certainement ton bonheur ici: http://www.1stwebdesigner.com/freebies/38-jquery-and-css-drop-down-multi-level-menu-solutions/ ; on y offre entre autres choses un menu comme tu cherches.

Bonjour Mr Merry,

Effectivement la mise en place de genre de module est un très bon exercice pour qui veut se mettre au javascript. C'est en fait assez simple. La partie de gauche est une liste qui contient des liens sur lesquels on applique un rollover en javascript :

<ul>
<li><a href="" onmouseover="rollover(1)">Lien1</a></li>
<li><a href="" onmouseover="rollover(2)">Lien2</a></li>
</ul>

Et ensuite ta fonction javascript qui fait en sorte que l'image change dans le conteneur principal qui aura un identifiant "principal" :

function rollover(id_menu){
   document.getElementById("principal").innerHTML = "<img src=monimage"+id_menu+".jpg alt=""/>";
}

Bon bien sur dans l'exemple que tu cites, c'est un peu plus compliqué puisque leur div principal ne contient pas seulement une image mais aussi du texte et des liens. Mais tu peux déjà commencer avec cette piste.

Bon courage !
Modifié par hchtot (09 Dec 2010 - 11:33)

Salut à tous !

Merci pour vos réponses à tous.
Je n'ai pas eu le temps de tester vos solutions car je suis parti dans le développement de quelquechose.

En fait, j'ai fait une gallerie slider en Jquery (comme proposé ici d'ailleurs), qui défile en continu. Au dessus de celle-ci se trouve ma barre de naviguation. Au passage souris, apparait une liste ul li qui a la taille du silder. Ce qui fait que visuellement ca recouvre la couche du dessous.

Cependant, là où ca se complique encore pour moi, c'est la compatibilité entre naviguateur internet. Mon site est disons, optimisé pour Firefox. Mais j'ai besoin d'avoir le même rendu (au moins un truc propre disons) sur Safari et surtout IE.

www.7underwear.com/home5.html

Je sais qu'en trifouillant dans le CSS il doit y avoir moyen de parer à cela, mais comment ?
Qu'en pensez-vous ?

Voici mon CSS pour la barre de nav :

/* Barre de naviguation Vimeo's like */

#menu{ 
	margin:0px; 
	padding:0px; 
	list-style:none; 
	color:#fff; 
	line-height:80px; 
	display:inline-block;
    float:left; z-index:1000; 
}
	
#menu a { 
	color:#fff; 
	text-decoration:none; 
}

#menu > li {
	background: none repeat scroll 0 0;
	float:left;
	position:relative;
	padding:0px 10px;
	left: -88px;
	top: 2px;
}
	
#menu > li a:hover {
	color:#B0D730;
}

#menu .logo {
	background:transparent none repeat scroll 0% 0%; 
	padding:0px;
    background-color:Transparent;
}

/* sub-menus*/

#menu ul { 
	padding:0px; 
	margin:0px; 
	display:block; 
	display:inline;}

#menu li ul {
	position:absolute;
	left:-496px;
	top:12px;
	margin-top:45px;
	width:975px;
	height: 644px;
	line-height:16px;
	background-color:#000000;
	color:#0395CC;
	
	/* for IE */ 
	
	display:none;
	right: -1015px;
	bottom: 1px;
}

/* La largeur width est héritee de menu li ul juste au dessus*/
ul.scrolling{
	overflow-y: scroll;
	text-align:center;
}

#menu li ul.athletes {
	position:absolute;
	margin-left:-86px;
	background-image:url(/img/fondproducts.jpg);
	background-position:center;
	background-repeat:no-repeat;
	right: -751px;
	bottom: 1px;
}

/*Valeurs sont heritees jusque ici inclus*/
	
#menu li:hover ul { 
	display:block;
}

#menu li ul li{ 
	display:block; 
	margin:5px 20px; 
	padding: 5px 0px;  
	border-top: dotted 1px #606060;
    list-style-type:none; 
}
	
#menu li ul li:first-child { 
	border-top: none; 
}

#menu li ul li a { 
	display:block; 
	color:#0395CC; 
}

#menu li ul li a:hover { 
	color:#7FCDFE; 
}

/* main submenu */

#menu #main { 
	left:0px; 
	top:-20px; 
	padding-top:20px; 
	background-color:#7cb7e3; 
	color:#fff;
    z-index:999;
}

Et pour Nico,
En ce qu iétait du fond avec un dégradé, rien de plus simple. Tu créé ton image dans le logiciel de ton choix (Illustratort ou Photoshop en fait) et tu le colles en background de ton conteneur ou de la div de ton choix. Optimise le en mettant les bonnes dimensions directement à ton image. J'espères avoir répondu à ta question.