Cibler des élément Jquery

Résolu
gintoxic Messages postés 566 Statut Membre -  
gintoxic Messages postés 566 Statut Membre -
bonjour,
je tache de faire un menu de 7 items qui doivent chacun faire apparaitre une div qui va recevoir un sous-menu respectif (certainement créé en PHP) ...

auriez vous de l'aide à me fournir svp ?

j'ai testé avec 
if(event.target = this)
mais rien à faire

bien entendu si vous avez l'explication avec votre aide je suis TRES preneur afin de comprendre et e pas faire betement du code


merci à vous

1 réponse

Réponse 1 / 1
prosthetiks Messages postés 1309 Statut Membre 431
 
Hello,

Voici une liste de menus css3.

https://www.smashingapps.com/2012/03/14/40-excellent-css3-menu-tutorials.html

Tu devrais y trouver ton bonheur, sinon merci de préciser tes besoins.

++
0
gintoxic Messages postés 566 Statut Membre 10
 
beh j'ai des div id qui ont le meme nom de classe et je voudrais par exemple changer la couleur de fond de chacun d'entre eux au survol de la souris sans que ca ne change celle des autres
0
prosthetiks Messages postés 1309 Statut Membre 431
 
dans ce cas là, assigne leur une seconde classe distincte:

<div class="submenu submenu-red"></div>
<div class="submenu submenu-blue"></div>

et en css:

.submenu{
width: ...px;
height: ...px;
// Suite du code identique pour tous les sous-menus
}

.submenu-blue{
background-color: blue;
}
.submenu-red{
background-color: red;
}
0
gintoxic Messages postés 566 Statut Membre 10
 
la couleur était un exemple bien entendu mais là il s'agit de coder en jquery pour que chacun de ces items de menus serve de trigger pour afficher des sous menus dans une div... distant mais sur la meme page
0
prosthetiks Messages postés 1309 Statut Membre 431
 
re, qqch dans le genre ? 

<html>
<head>
	<title></title>
	<style type="text/css">
		html, body{
			padding:0;
			margin:0;
			height: 100%;
		}
		#firstLevelMenu ul li{
			display: inline;
		}
		#firstLevelMenu{
			width: 100%;
			height: 30px;
			text-align: center;
			background-color: red;
		}
		#secondLevelMenu{
			position: absolute;
			bottom:100px;
			width: 100%;
			height: 0;
		}
		.submenu{
			width: 100px;
			float: left;
			visibility: hidden;
			transition: all linear .3s;
		}
		.submenu.active{
			display: block;
			visibility: visible;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<nav id="firstLevelMenu">
		<ul>
			<li><a href="#">Sous-menu1</a></li>
			<li><a href="#">Sous-menu2</a></li>
			<li><a href="#">Sous-menu3</a></li>
			<li><a href="#">Sous-menu4</a></li>
			<li><a href="#">Sous-menu5</a></li>
		</ul>
	</nav>

	<nav id="secondLevelMenu">
		<div class="submenu active">Sous menu1</div>
		<div class="submenu">Sous menu2</div>
		<div class="submenu">Sous menu3</div>
		<div class="submenu">Sous menu4</div>
		<div class="submenu">Sous menu5</div>
	</nav>


	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
		$('#firstLevelMenu a').click(function(e){
			e.preventDefault();
			var index = $(this).parent().index();
			$('.submenu').removeClass('active');
			$($('.submenu').get(index)).addClass('active');
		});
	</script>
</body>
</html>
0
gintoxic Messages postés 566 Statut Membre 10
 
merci à toi pour ce script, mais et j'insiste là dessus, je voudrais bien le comprendre.
aussi pourrais-tu détailler stp le JS que j'assimile


merci à toi ceci dit

ps : je rappelle que les sous-menus sont créés en php a part sur des feuilles sur le serveur
0

Discussions similaires

Comment "inspecter l'élément" sur Mac ?
enzo2501 -
Tatazazazizi -

14 réponses
inspecter macbook
cleid -
Utilisateur anonyme -

1 réponse
Mettre le menu Inspecter l’élément en bas
ali.rachid -
Dori@n -

3 réponses
Impossible de copier car cet élément est trop volumineux
Alan_Cohen -
Utilisateur anonyme -

9 réponses
vous ne disposez pas des autorisations...
Kemar54 -
r12 -

19 réponses