Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu qui peut se rétrécir

Comment faire ?

    25 février 2009 à 13:19:49

    Bonjour,
    Ne sachant pas coder en javascript, je demande votre aide pour un petit script pour menu.
    Sur mon site web, j'ai à gauche un menu "fixed", donc qui reste à sa place même quand on descend le corps avec le "scroller" (désoler pour les mots anglais, les mots français m'échappent).
    Mais j'aimerais rajouter un sondage, mais voilà, je n'ai pas assez de place !
    Donc ce que j'aimerais faire, c'est avoir un script, qui, sans recharger la page, agrandi ou rétréci le men ou le sondage.
    En gros, le code HTML pourrait être comme ça :
    <!--Par défaut, ou quand on clique sur le titre "Menu" -->
    <div class="menu">
    <h1>Menu</h1>
    <ul>
    <li><a href="index.php?page=Compte">Compte</a></li>
    <li>kdjjlfkjksjklf</li>
    <li>gfgfdgdfdg</li>
    <ul>
    </div>
    <div class="sondage">
    <h1>Sondage</h1>
    </div>
    
    
    <!-- Quand on clique sur le titre "Sondage" -->
    <div class="menu">
    <h1>Menu</h1>
    </div>
    <div class="sondage">
    <h1>Sondage</h1>
    Aimez vous ce site ?<br/>
    <input type="radio"/>Oui<br/>
    <input type="radio"/>Non<br>
    <input type="submit"/>
    </div>
    


    Voilà je vous ai montré ce que je veut réaliser,
    Merci d'avance,
    David
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      25 février 2009 à 14:28:55

      "ascenseur" !

      sinon il faut que tu transforme tes titres "h1" dans ton menu et ton sondage en lien. Quand tu clique sur ces lien, ça désactiverait le menu / activerait le sondage ou activerait le menu / désactiverait le sondage.

      Quand je dis "activer", ça veut dire "afficher en entier", et "désactiver", faire en sorte qu'il ne reste plus que le titre "menu" ou "sondage"

      tu pourrais faire
      <div id="menu">
          <h1><a href="#" onclick="cacher_masquer_sondage()">Menu</a></h1>
          <ul id="contenu_menu">
               <li><a href="index.php?page=Compte">Compte</a></li>
               <li>kdjjlfkjksjklf</li>
               <li>gfgfdgdfdg</li>
          <ul>
      </div>
      <div id="sondage">
          <h1><a href="#" onclick="cacher_masquer_sondage()">Sondage</a></h1>
          <form id="contenu_sondage" action="[ACTION]" method="MÉTHODE">
               Aimez vous ce site ?<br/>
               <input type="radio"/>Oui<br/>
               <input type="radio"/>Non<br>
               <input type="submit"/>
          </form>
      </div>
      


      Il faut éviter d'utiliser les class quand des id sont plus appropriés, et cette idée n'est quand-même pas top pour l'accessibilité. Et ça fout le camp quand l'utilisateur désactive le javascript. Aussi jet'ai laissé programmer les fonction afficher_masquer_*

      Tu pourrais aussi faire ça en pure CSS: quand ton menu ou ton sondage est survolé (:hover), on l'affiche entièrement.

      L'idée dans les deux cas c'est de masquer / afficher contenu_sondage ou contenu_menu.

      Moi je préfèrerais la solution tout CSS et dans ce cas vire les liens qui sont dans <h1>

      Si néanmoins tu restes sur ton idée en javascript, il te faudra coder les deux fonctions nommées ci-dessus, et, pour ça, apprendre le javascript...
      • Partager sur Facebook
      • Partager sur Twitter

      Menu qui peut se rétrécir

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown