Menu déroulant.
Résolu
JésusLeGrec
Messages postés
96
Date d'inscription
Statut
Membre
Dernière intervention
-
rodoplop Messages postés 77 Date d'inscription Statut Membre Dernière intervention -
rodoplop Messages postés 77 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je fais un site en php. J'ai des photos à afficher et je veux les afficher que si on clique sur un lien, un peu du genre sur le site qui suit :
https://fr.wikipedia.org/wiki/Bleu
Tout en bas de la page, il y a marqué "Teintes de bleu" et à côté, il y a dérouler. C'est un truc dans le genre que je veux faire. Quand on clique sur dérouler, les photos apparaitraient.
Quelle est la syntaxe ?
Voilà, merci d'avance pour votre aide
Je fais un site en php. J'ai des photos à afficher et je veux les afficher que si on clique sur un lien, un peu du genre sur le site qui suit :
https://fr.wikipedia.org/wiki/Bleu
Tout en bas de la page, il y a marqué "Teintes de bleu" et à côté, il y a dérouler. C'est un truc dans le genre que je veux faire. Quand on clique sur dérouler, les photos apparaitraient.
Quelle est la syntaxe ?
Voilà, merci d'avance pour votre aide
A voir également:
- Menu déroulant.
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Word
- Canon quick menu - Télécharger - Utilitaires
3 réponses
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 !
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é)