Cibler des élément Jquery

Résolu/Fermé
gintoxic
Messages postés
520
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
- 1 sept. 2013 à 01:42
gintoxic
Messages postés
520
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
- 2 sept. 2013 à 20:38
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

prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
1 sept. 2013 à 22:36
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
520
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
10
1 sept. 2013 à 23:57
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
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
2 sept. 2013 à 00:01
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
520
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
10
2 sept. 2013 à 00:09
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
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
2 sept. 2013 à 00:19
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
520
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
10
Modifié par gintoxic le 2/09/2013 à 00:59
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