Sujet Précédent Sujet Suivant

Comment ajouter un sous sous menu

Fermé
flexi2202 Messages postés 3798 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 3 mai 2024 - 16 oct. 2020 à 10:07
flexi2202 Messages postés 3798 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 3 mai 2024 - 19 oct. 2020 à 13:10
bonjour a tous
je viens de trouver le menu déroulant qui me correspond le soucis c est qu il me manque des sous sous menu
voici le code html 

<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Menu 1</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.4</a>
		</div>
	</div>
	
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Menu 2</a>
	</div>
</div>


merci de l aide
A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38171 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 4 665
Modifié le 16 oct. 2020 à 10:16
Bonjour,

Ce bout de code est incomplet....
Il doit y avoir du CSS et du JAVASCRIPT qui le completent afin qu'il puisse fonctionner.
et qu'il faudra certainement modifier, en plus du html, pour que ça marche.



.
1
Réponse 2 / 4
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
17 oct. 2020 à 19:32
Salut,
Pas si simple, ni rapide, de modifier de l'existant...
Tu écris je viens de trouver le menu déroulant qui me correspond, si tu dois le modifier, c'est que ce n'est pas le cas et à mon avis tu ferais mieux de rechercher un autre modèle; incluant des sous-menus.
Les exemples ne manquent pas, y compris sans JavaScript, ce qui me paraît plus léger.
Un exemple ici par exemple.
Entrer html css menu déroulant dans un moteur de recherche t'en donneras bien d'autres.
1
Réponse 3 / 4
flexi2202 Messages postés 3798 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 3 mai 2024 187
16 oct. 2020 à 10:27
merci pour la reponse

voici donc tout les codes 

<!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>Menu déroulant vertical sur clic</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="style.css" type="text/css" />
	 <script type="text/javascript" src="functions.js"></script>
</head>
<body>

<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Menu 1</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.4</a>
		</div>
	</div>
	
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Menu 2</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.3</a>
		</div>
	</div>
	
	<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">Menu 3</a>
	</div>
	
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Menu 4</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#" >Sous-Menu 4.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.4</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.5</a>
		</div>
	</div>
</div>

</body>
</html>


le css 

*{
	margin:0;
	padding:0;
}
#menu{
	width:150px;
	margin:20px auto 0 auto;
}
.menu, .sousmenu{
	text-align:center;
}
.menu{
	height:18px;
	width:150px;
	padding:2px 0;
	background:#404040;
	color:#fff;
}
.sousmenu{
	height:18px;
	width:150px;
	padding:1px 0;
	background:#808080;
	color:#fff;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#404040;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#808080;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
	background:#ca0008;
}


et le javascript 

function afficheMenu(obj){
	
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
	
	/*****************************************************/
	/**	on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 4; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
	
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
	
}
0
Réponse 4 / 4
flexi2202 Messages postés 3798 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 3 mai 2024 187
19 oct. 2020 à 13:10
bonjour
merci pour al reponse
j en ai trouve un autre mais y a juste un truc que j aimerais ajouter
j ouvre donc un autre post
encore merci
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses