28173 sujets

CSS et mise en forme, CSS3

Combiner menu niveau1 en image et niveau2 texte dynamique ?

bonjour,

je souhaiterai réaliser un menu horizontal à deux niveaux
mon problème c'est que les deux niveaux ne sont pas du même type :

- le niveau 1 est entièrement en image:
il est horizontal est composé de rollover grace à une seule image de fond réactive (cf gabarits menus proposé par raphael),
- le niveau 2 permettrait d'afficher une liste de menus de façon dynamique . > lorsque je passe avec la souris sur le titre 1
les menus du niveau 2 affectés aparaissent ..

mon souhait est bien évidemment de tout faire en css ...
quelqu'un aurait il déjà pratiqué ce genre de menus hybrides ?
ou aurait une idée ?

ci joint un apperçu de ce que je voudrai réaliser
merci d'avance !

upload/2140-maquettedeb.gif
Bon...j'avais 5 minutes alors voilà un petit coup de main.

Voici une solution JS/CSS (pas le choix).
Le JS est nécessaire pour contrer le manque de IE concernant la pseudo-classe "hover".
Sous FF c'est bon, sous IE il y a un petit bug au niveau du sous-menu (qui se résout en ajouter une taille à bloc sous-menu : voir les commentaires du code CSS)

Pour les images de niveau 1, tu as juste à les mettre dans les liens <a> ou alors en background de ces meme liens...

il y a des paramètres CSS que tu peux enlever, ils servent juste à donner plus de visibilité à l'exemple.

Ya surement moyen d'optimiser...pour ceux qui veulent tenter...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<title>Test</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			font-family:Tahoma;		
			font-size:0.8em;
		}
		ul#menu{
			border:1px solid black;
			list-style-type:none;
			list-style-position:inside;
			height:50px;
		}
		ul#menu li{
			float:left;
			text-align:center;
		}
		ul#menu li a{
			display:block;
			border:1px dashed purple;
			width:200px;
		}		
		ul#menu li:hover>ul{		
			display:block;
		}
		ul#menu li ul{
			position:absolute;
			display:none;
			/* left:0; */ /* à mettre si tu veux que le sous-menu se colle à gauche */
			margin:0;
			list-style-type:none;
			list-style-position:inside;	
			width: 300px; /* pour résoudre le bug d'affichage d'IE...à mettre ou non...vu que IE a un comportement lunatique */
		}
		ul#menu li ul li{		
			width:50px;
			padding:0 5px 0 5px;
			display:inline;
		}
	</style>
</head>

<body onload="menu()">

<script type="text/javascript">

function menu_over(obj){
	if(document.all){
		listeUl = obj.getElementsByTagName("ul");
		if(listeUl.length > 0){
			sousMenu = listeUl[0].style;
			if(sousMenu.display == "none" || sousMenu.display == ""){
				sousMenu.display = "block";
			}else{
				sousMenu.display = "none";
			}
		}
	}
}

function menu(){
	listeLi = document.getElementById("menu").getElementsByTagName("li");
	nLI = listeLi.length;
	for(i=0; i < nLI; i++){
		listeLi[i].onmouseover = function(){
			menu_over(this);
		}
		listeLi[i].onmouseout = function(){
			menu_over(this);
		}
	}
}

</script>

<ul id="menu">
	<li>
		<a href="">Fruits</a>
		<ul>
			<li>Pomme</li>
			<li>Poire</li>
			<li>Banane</li>
			<li>Orange</li>
		</ul>
	</li>
	<li>
		<a href="">Animaux</a>
		<ul>
			<li>Chien</li>
			<li>Chat</li>
			<li>Cheval</li>
			<li>Cochon</li>
		</ul>	
	</li>
	<li>
		<a href="">Fleurs</a>
		<ul>
			<li>Tulipe</li>
			<li>Rose</li>
			<li>Jacinthe</li>
			<li>Bleuet</li>
		</ul>	
	</li>
</ul>
</body>

</html>
[/i][/i]
merci beaucoup pour ton aide Zeke,
je vais regarder cela de plus près.
juste une petite question encore, je souhaite évidemment faire des rollovers avec mes images , comment faire avec ta méthode ?

merci d'avance !
jaenani a écrit :
merci beaucoup pour ton aide Zeke,
je vais regarder cela de plus près.
juste une petite question encore, je souhaite évidemment faire des rollovers avec mes images , comment faire avec ta méthode ?

merci d'avance !


une solution possible :
http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript

sinon tu peux aussi mettre les deux images dans une seule et faire varier background-position sur le hover(système des portes coulissantes)

ou alors tu mets des images dans le code HTML (<img>) et tu utilises du javascript.
Modifié par Zeke (16 Mar 2006 - 16:13)
Sujet clos
Aller à