Texte déroulant sur page d'accueil

Question

Bonjour,

Je construis actuellement un site internet.
Sur ma page d'accueil, je souhaiterais faire des textes déroulants (on clique sur un titre, et le texte se déroule... etc). > et non des menus déroulants
Voici un modèle, trouvé sur wikipédia.
https://fr.wikipedia.org/wiki/Discographie_des_Beatles#Albums_studio

L'objectif est clairement de désengorger la page d'accueil.

Je souhaiterais savoir s'il existe donc un code html permettant de faire quelque chose de la sorte.

Merci,

Valentin.

Zegai · Answer

Bonjour,
Affiche le code source de la page et vois s'il y a pas moyen de voir comment ils font ;-)

valweb · Answer

Je viens de tenter, mais ça ne marche pas, malheureusement!

okuni · Answer

C'est bien sur du Javascript, tu dois donc tout trouver dans le code source.
cherche la fonction toggleNavigationBar() c'est le nom de la fonction JS que Wiki utilise.
Si tu trouve pas, cherche dans le header les lien fait avec un fichier JS.

valweb · Answer

Merci beaucoup, j'ai pigé le concept.

Cependant ma "novicitude" en java m'oblige à demander de l'aide.
La page wikipedia possède une bonne dizaine de feuilles de style (javascripts inclus) donc je n'ai pas vraiment un fichier de base, sur lequel je pourrais m'inspirer.

On peut tenter déjà de partir de :

Actu 1 (dérouler/enrouler)
*Actu 1 déroulée

Actu 2 (dérouler/enrouler)
* Actu 2 déroulée

.. etc

Le problème doit sans doute venir du fait qu'on donne 36 noms différents à la même chose (mes longues recherches google sont restées infructueuses).

okuni · Answer

Juste une petite remarque, Java et Javascript sont 2 langage totalement différents. A ne pas confondre.

si tu veux, je peux te passer mon code pour un menu déroulant, que tu pourras adapter à ta guise (http://www.blizer.net ) Tu peux aussi essayer de le copier :)
Il y a très peu de script JS sur mon site, donc tu devrais t'en sortir.
Sinon, je peux te les passer la semaine prochaine je pense car je suis en vacances et j'ai pas mon ordi :)

valweb · Answer

C'est super sympa... mais j'ai réussi de mon côté à trouver un code assez simple à manier.
je me permets de l'expliquer ici, pour ceux que ça intéresse.

1RE MANIP : CODE JAVASCRIPT
A placer entre <head> et </head>

Code:

    <script>
    function visibilite(thingId)
    {
    var targetElement;
    targetElement = document.getElementById(thingId) ;
    if (targetElement.style.display == "none")
    {
    targetElement.style.display = "" ;
    } else {
    targetElement.style.display = "none" ;
    }
    }
    </script>

2E MANIP Code (x)HTML
A placer entre <body> et </body>

Code:

    <a href="javascript:visibilite('divid');">afficher/masquer</a>
    <div id="divid" style="display:none;">
    <!-- Ici, le texte que l'on veut afficher -->
    </div>

3E MANIP (FACULTATIVE MAIS EFFECTUEE ICI)
CODE CSS. Ouvrir et éditer le fichier CSS.
J'y ai collé :
Code

    div#divid
    {
        border: 1px dashed black; /* Un contour pour délimiter et faire plus joli */
        padding: 5px; /* Un petit espace pour pas que le texte colle le cadre */
    }

ATTENTION!!
Au fur et à mesure de la répétition de ce dernier code (car oui, il est nécéssaire de le répéter si nous utilisons plusieurs boîtes de texte déroulantes), il conviendra de mettre à la suite de divid :
divid1 ; divid2 ... dividX

Texte déroulant sur page d'accueil

6 réponses

Votre réponse

Discussions similaires

Newsletters