Probleme de creation menu et affichage repons
Monkey_nhk
-
monkey_nhk -
monkey_nhk -
Bonjour,
alors voila j'ai un petit souci ou un gros souci "c'est vous qui voyez !"
j'aimerai faire apparaitre par le biais de mon menu différentes information:
le truc c'est q'un lien hypertexte = une page c'est un peu moche et même une requete sql pour chaque c'est pire...
enfin voila j'aimerai faire en sorte que lorsque je clique sur un menu par exemple
je clique sur jouer:
et hop juste en dessous apparait l'article jouer de pokemon à la place de l'ancien article
de ce fait j ai pensé à cela :
et la voila le probleme : j'ai l'idée mais comment organisée tout cela :$
si quelqu'un pouvait me tendre la main pour me sortir de mon gourbier je lui serais eternellement reconnaissant ^^
alors voila j'ai un petit souci ou un gros souci "c'est vous qui voyez !"
j'aimerai faire apparaitre par le biais de mon menu différentes information:
le truc c'est q'un lien hypertexte = une page c'est un peu moche et même une requete sql pour chaque c'est pire...
enfin voila j'aimerai faire en sorte que lorsque je clique sur un menu par exemple
je clique sur jouer:
et hop juste en dessous apparait l'article jouer de pokemon à la place de l'ancien article
de ce fait j ai pensé à cela :
$id = "valeur";
switch($id)
{
case 1:
// faire un header pour afficher
break;
case 2:
...
break;
case 3:
.....
break;
default:
....
break;
}
et la voila le probleme : j'ai l'idée mais comment organisée tout cela :$
si quelqu'un pouvait me tendre la main pour me sortir de mon gourbier je lui serais eternellement reconnaissant ^^
A voir également:
- Probleme de creation menu et affichage repons
- Menu contextuel windows 11 retrouver l'affichage classique - Guide
- Creation de site web - Guide
- Creation de compte google - Guide
- Creation compte gmail - Guide
- Menu déroulant excel - Guide
3 réponses
Bonjour,
Sinon il y a une autre option, celle d'utiliser l'évènement "onClick" et la propriété CSS "display".
Cela fonctionne surtout bien pour peu de liens (si y'a 30 liens ça risque de faire beaucoup de code).
Le lien:
<ul><li>
<a onClick="javascript: document.getElementById('div_pokemon_1').style.display='block';document.getElementById('div_pokemon_2').style.display='none';">pokemon1</a></li>
<li><a onClick="javascript: document.getElementById('div_pokemon_1').style.display='none';document.getElementById('div_pokemon_2').style.display='block';">pokemon2</a></li></ul>
Là ça fait une liste avec 2 liens. Plus y'a de liens, plus ça devient long car à chaque fois il faut un bout de code qui dit de rendre visible le contenu spécifié, et des autres bouts de code pour dire de rendre invisible les autres contenus.
(En gros ça dit au navigateur "quand on clique là, tu affiches ça mais tu caches ça").
Ensuite, il faut faire tes div de contenu, en spécifiant leur identifiant:
<div style="display:block" id="div_pokemon_1">
blablabla
</div>
<div style="display:none" id="div_pokemon_2">
blablabli
</div>
le style ici dit juste comment doivent apparaître les div avant qu'on clique sur les liens (donc en gros tu mets block pour celle qui doit s'afficher, et none pour les autres)
Sinon il y a une autre option, celle d'utiliser l'évènement "onClick" et la propriété CSS "display".
Cela fonctionne surtout bien pour peu de liens (si y'a 30 liens ça risque de faire beaucoup de code).
Le lien:
<ul><li>
<a onClick="javascript: document.getElementById('div_pokemon_1').style.display='block';document.getElementById('div_pokemon_2').style.display='none';">pokemon1</a></li>
<li><a onClick="javascript: document.getElementById('div_pokemon_1').style.display='none';document.getElementById('div_pokemon_2').style.display='block';">pokemon2</a></li></ul>
Là ça fait une liste avec 2 liens. Plus y'a de liens, plus ça devient long car à chaque fois il faut un bout de code qui dit de rendre visible le contenu spécifié, et des autres bouts de code pour dire de rendre invisible les autres contenus.
(En gros ça dit au navigateur "quand on clique là, tu affiches ça mais tu caches ça").
Ensuite, il faut faire tes div de contenu, en spécifiant leur identifiant:
<div style="display:block" id="div_pokemon_1">
blablabla
</div>
<div style="display:none" id="div_pokemon_2">
blablabli
</div>
le style ici dit juste comment doivent apparaître les div avant qu'on clique sur les liens (donc en gros tu mets block pour celle qui doit s'afficher, et none pour les autres)
au merci beaucoup tu m'as donné une sérieuse contribution qui me permet d'avancer dans mon projet ^^
Ah et sinon il y a aussi une autre option, sans javascript:
Il suffit de mettre une ancre à chaque début de div pokemon. Si ta div principale est en "overflow:hidden", alors uniquement le texte concerné s'affiche, et le reste est trop bas et dépasse de la div, et est donc invisible.
Pour ça il faudrait une structure de ce genre:
<div id="div_pokemon_principale">
<div id="div_pokemon_1">
<h2 id="pok1">POKEMON 1 titre</h2>
blabla bla
<div class="div_vide_500px"></div>
</div>
<div id="div_pokemon_2">
<h2 id="pok2">POKEMON 2 titre</h2>
blabla bla
<div class="div_vide_500px"></div>
</div>
</div>
etc
Il faut la div div_vide_500px pour que le texte suivant soit poussé en bas, et donc invisible.
Il suffit de rajouter dans le CSS:
div.div_vide_500px{
height:500px;
}
et aussi, dans le CSS pour la div générale
div#div_pokemon_principale{
overflow:hidden;
}
Il suffit de mettre une ancre à chaque début de div pokemon. Si ta div principale est en "overflow:hidden", alors uniquement le texte concerné s'affiche, et le reste est trop bas et dépasse de la div, et est donc invisible.
Pour ça il faudrait une structure de ce genre:
<div id="div_pokemon_principale">
<div id="div_pokemon_1">
<h2 id="pok1">POKEMON 1 titre</h2>
blabla bla
<div class="div_vide_500px"></div>
</div>
<div id="div_pokemon_2">
<h2 id="pok2">POKEMON 2 titre</h2>
blabla bla
<div class="div_vide_500px"></div>
</div>
</div>
etc
Il faut la div div_vide_500px pour que le texte suivant soit poussé en bas, et donc invisible.
Il suffit de rajouter dans le CSS:
div.div_vide_500px{
height:500px;
}
et aussi, dans le CSS pour la div générale
div#div_pokemon_principale{
overflow:hidden;
}
tout simplement que je gere pas trop bien le javasript et que je pensais pouvoir adapter ton idée en php qui est plus dans mes cordes :$ ( je veux absolument du php en faite car le javascript on peut le desactiver et sa me gene car mon projet est un peu noté et le php est infaible meme si il est un peu limiter ^^ parfois.