Menu du site iaaf.org

Bonjour.

Pourriez-vous m'aider à comprendre la structure du menu du site
www.iaaf.org Je voudrais réaliser un menu de ce genre mais je ne sais pas comment faire. Quelqu'un pourrait m'aider à faire le code html et css?
Merci

Salut. Il te suffit d'utiliser le tutoriel d'alsacréations dédié à la construction de menu dynamique horizontaux

Plus précisément, c'est le "menu horizontal une ligne" qui correspond à ce que tu cherche..
Modifié par audrasjb (25 Aug 2008 - 14:44)

audrasjb a écrit :
Salut. Il te suffit d'utiliser le tutoriel d'alsacréations dédié à la construction de menu dynamique horizontaux

Plus précisément, c'est le "menu horizontal une ligne" qui correspond à ce que tu cherche..

Merci pour la réponse on ne peut plus rapide.

J'ai déjà consulté le tutoriel publié sur alsacreations.com mais je n'arrive pas à faire le menu horizontal une ligne parce que je veux mettre le menu que j'ai fait moi-même avec Photoshop. De plus je voudrais avoir l'effet rollover. Quand on survole un onglet du menu, il change de couleur et déroule les sous-menus. J'ai réussi à faire un menu rollover. Grâce au tutoriel j'ai réussi à faire un menu déroulant. Mais pour l'instant je n'arrive pas à marier les deux.

Bon, je vais essayer d'intégrer le menu une ligne à mon menu rollover. Je reviendrai très bientôt sur ce forum soit pour demander de l'aide soit pour clore ce sujet.

Après une heure de réflexion je n'arrive pas à intégrer le menu horizontal une ligne à mon menu avec effet rollover.
Mon menu qui est voici http://img389.imageshack.us/img389/3966/menugoodtraitsos0.png a comme code html

<div id="main-nav">
	<ul>
	    <li><a href="#" class="menu1"><span>Menu 1</span></a></li>
	    <li><a href="#" class="menu2"><span>Menu 2</span></a></li>
	    <li><a href="#" class="menu3"><span>Menu 3</span></a></li>
	    <li><a href="#" class="menu4"><span>Menu 4</span></a></li>
          <li><a href="#" class="menu5"><span>Menu 5</span></a></li>
          <li><a href="#" class="menu6"><span>Menu 6</span></a></li>
          <li><a href="#" class="menu7"><span>Menu 7</span></a></li>
       </ul>
   </div>

et comme feuille de style

#main-nav{
	width:896px;
	height:40px;
	margin:0 auto;
	background-image: url(mon_image.png);
      background-repeat: no-repeat; 				
}


#main-nav ul{
	border:0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	clear: left;
}

#main-nav ul li{
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}

#main-nav ul li a span{
	display:none;
}


#main-nav ul li a{
	width:128px;
	height:40px;
	margin:0px;
	padding:0px;
	display: block;
		
}


#main-nav ul li a.accueil:hover{
	background: url#main-nav{
	width:896px;
	height:40px;
	margin:0 auto;
	background-image: url(mon_image.png);
        background-repeat: no-repeat; 			
}


#main-nav ul{
	border:0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	clear: left;
}

#main-nav ul li{
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}

#main-nav ul li a span{
	display:none;
}


#main-nav ul li a{
	width:128px;
	height:40px;
	margin:0px;
	padding:0px;
	display: block;
}
#main-nav ul li a.menu1:hover{
       background: url(mon_image.png) 0px -40px;
}
#main-nav ul li a.menu2:hover {
       background: url(mon_image.png) -128px -40px;
}
#main-nav ul li a.menu3:hover{
	background: url(mon_image.png) -256px -40px;
}			
#main-nav ul li a.menu4:hover{
	background: url(mon_image.png) -384px -40px;
}	
#main-nav ul li a.menu5:hover{	
       background: url(mon_image.png) -512px -40px;
}
#main-nav ul li a.menu6:hover{
       background: url(mon_image.png) -640px -40px;
}
#main-nav ul li a.menu7:hover{	
       background: url(mon_image.png) -768px -40px;
	}

Mon menu fonctionne bien, lorsque je survole l'un des onglets sa couleur passe du noir au rouge. Je voudrais également qu'au passage de la souris les sous-menus apparaissent au-dessous des rubriques. Mais je n'arrive pas à faire cela, notamment je ne sais pas où mettre les balises dt, dl, dd.

Si quelqu'un pourrait m'aider, je lui serai reconnaissant.

Arrmani a écrit :
Pourriez-vous m'aider à comprendre la structure du menu du site
www.iaaf.org Je voudrais réaliser un menu de ce genre mais je ne sais pas comment faire.

Deux remarques:

1. C'est plutôt dommage de chercher à reproduire une erreur ergonomique. Ce menu pose quand même un gros problème lorsque l'utilisateur veut passer, avec la souris, d'un item de premier niveau à un item de deuxième niveaux qui n'est pas situé directement en dessous du premier. Le pointeur passe, en diagonale, par dessus un autre intitulé de premier niveau, et le sous-menu change, alors que ce n'est pas ce que souhaite l'utilisateur. Ce genre de structure est vraiment à proscrire.

2. Un tel menu dynamique devra nécessairement utiliser JavaScript pour gérer l'affichage et le masquage des sous-menus.

Florent V. a écrit :

Deux remarques:

1. C'est plutôt dommage de chercher à reproduire une erreur ergonomique. Ce menu pose quand même un gros problème lorsque l'utilisateur veut passer, avec la souris, d'un item de premier niveau à un item de deuxième niveaux qui n'est pas situé directement en dessous du premier. Le pointeur passe, en diagonale, par dessus un autre intitulé de premier niveau, et le sous-menu change, alors que ce n'est pas ce que souhaite l'utilisateur. Ce genre de structure est vraiment à proscrire.

2. Un tel menu dynamique devra nécessairement utiliser JavaScript pour gérer l'affichage et le masquage des sous-menus.

Merci pour la réponse. Je comprends l'erreur ergonomique.