Menu déroulant.
Résolu/Fermé
JésusLeGrec
Messages postés
96
Date d'inscription
mardi 3 mai 2011
Statut
Membre
Dernière intervention
5 mars 2013
-
18 sept. 2011 à 19:44
rodoplop Messages postés 77 Date d'inscription vendredi 16 septembre 2011 Statut Membre Dernière intervention 6 juillet 2012 - 19 sept. 2011 à 11:06
rodoplop Messages postés 77 Date d'inscription vendredi 16 septembre 2011 Statut Membre Dernière intervention 6 juillet 2012 - 19 sept. 2011 à 11:06
A voir également:
- Menu déroulant.
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Menu contextuel windows 11 - Guide
- Menu caché bios hp - Forum BIOS
- Supprimer menu déroulant excel ✓ - Forum Excel
3 réponses
rodoplop
Messages postés
77
Date d'inscription
vendredi 16 septembre 2011
Statut
Membre
Dernière intervention
6 juillet 2012
12
18 sept. 2011 à 20:31
18 sept. 2011 à 20:31
ce genre de menu déroulant ce fait avec du Javascript.
Une façon de faire sa simplement, c'est d'utiliser le plugin JQuery
en gros, au chargement de la page, on cache le div, et lorsqu'on clique sur ton lien 'afficher' ou 'dérouler', il suffit d'utiliser la fonction 'slideToggle()' sur le div pour afficher les informations qui y sont contenues.
plus d'information sur le slideToggle
https://api.jquery.com/slideToggle/
Une façon de faire sa simplement, c'est d'utiliser le plugin JQuery
en gros, au chargement de la page, on cache le div, et lorsqu'on clique sur ton lien 'afficher' ou 'dérouler', il suffit d'utiliser la fonction 'slideToggle()' sur le div pour afficher les informations qui y sont contenues.
plus d'information sur le slideToggle
https://api.jquery.com/slideToggle/
Encore plus simple :
Ca c'été le javascript, a présent le clic sur "dérouler":
Voila ca devrais fonctionner comme ca !
<script>function bascule(elem)
{
etat=document.getElementById(elem).style.display;
if(etat=='none'){document.getElementById(elem).style.display='block';}
else{document.getElementById(elem).style.display='none';}
}</script>
Ca c'été le javascript, a présent le clic sur "dérouler":
<p OnClick="bascule('deroule');">Dérouler</p>
<div style='display:none;'>ICI le bloc a afficher lors du clic sur le bouton</div>
Voila ca devrais fonctionner comme ca !
rodoplop
Messages postés
77
Date d'inscription
vendredi 16 septembre 2011
Statut
Membre
Dernière intervention
6 juillet 2012
12
19 sept. 2011 à 11:06
19 sept. 2011 à 11:06
Pour mettre du code avec du Jquery :
L'avantage par rapport au code ci-dessus, c'est que dans le cas ou Javascript est désactivé, le div sera tout de même afficher (le div est caché au chargement de la page, alors qu'avec un display:none, si Javascript est désactivé, le contenu de ce div ne sera jamais affiché)
<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mondiv").hide();
$("#b_deroulant").click(function(){
$('#mondiv').slideToggle('slow', function() {
// Animation complete.
});
return false;
});
});
</script>
</head>
<body>
<a href="" id="b_deroulant">Dérouler</a>
<div id="mondiv" style="width:200px;height:50px;border:1px solid black;">ICI le bloc a afficher lors du clic sur le bouton</div>
</body>
</html>
L'avantage par rapport au code ci-dessus, c'est que dans le cas ou Javascript est désactivé, le div sera tout de même afficher (le div est caché au chargement de la page, alors qu'avec un display:none, si Javascript est désactivé, le contenu de ce div ne sera jamais affiché)