Partage
  • Partager sur Facebook
  • Partager sur Twitter

JS menu dynamique

Herzeleid
    13 juin 2006 à 16:46:23

    Bonjour,

    Pour la version 2 de mon site, je souhaitais faire un menu dynamique, et dans mes recherches, je suis tombé sur le site openweb.

    Je souhaitais adapter le code, à mon site. Sachant que j'ai 9 menus et que je souhaitais les places à l'horizontale, j'ai pris la première version du code. J'ai modifié la première boucle à 9, et j'ai donc les 9 menus qui s'affichent.
    Seulement, probleme, les onglets ne s'affichent pas, exceptés pour les 3 premiers.

    Je pense qu'il faut modifier la seconde boucle, mais quelque soit le chiffre, mes onglets s'affichent en dessous du corps.

    Je n'avais jamais fait de javascript précédemment, donc je n'ai pas les connaissances pour modifier ce code.

    Sauriez vous trouver une solution à ce problème?

    Si vous avez besoin d'informations complémentaires, n'hésitez pas.

    Merci à ceux qui y consacreront un peu de temps.
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      13 juin 2006 à 16:50:55

      Voila un petit script que j'avais trouvé il y a un moment, tu peux en ajouter tant que tu veux ( suffit d'augmenter un nombre dans le js )
      Seulement, quand ca prend plus d'une ligne, ca fait des trucs un peu bizarre les menus :-°
      <style type="text/css" media="screen">
      <!--
      body {
      font: 80% verdana, arial, sans-serif;
      }
      dl, dt, dd, ul, li {
      margin: 0;
      padding: 0;
      list-style-type: none;
      }
      #menu {
      position: absolute; /* placement du menu, à modifier selon vos besoins */
      top: 28px;
      left: 18.5%;
      z-index:100;
      }
      #menu dl {
      float: left;
      width: 12em;
      }
      #menu dt {
      cursor: pointer;
      text-align: center;
      font-weight: bold;
      background: #ccc;
      border: 1px solid gray;
      margin: 1px;
      }
      #menu dd {
      display: none;
      border: 1px solid gray;
      background: #ccc;
      }
      #menu li {
      text-align: center;
      background: #ccc;  /* modifier couleur de fond sous-menu */
      }
      #menu li a, #menu dt a {
      color: #000;
      text-decoration: none;
      display: block;
      height: 100%;
      border: 0 none;
      }
      #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
      background: #eee;
      }
      -->
      </style>

      <script type="text/javascript">
      <!--
      window.onload=montre;
      function montre(id) {
      var d = document.getElementById(id);
              for (var i = 1; i<=10; i++) { //Augmenter le 10 si on a plus de 10 menu
                      if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
              }
      if (d) {d.style.display='block';}
      }
      //-->
      </script>



      <div id="menu">
              <dl>

                      <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
              </dl>

             
              <dl>           
                      <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

                      <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
                              <ul>
                                      <li><a href="#">Test xxxxxxxxxxxxxxxxxxxxxxx</a></li>
                                      </ul>
                      </dd>
              </dl>

             
             
              <dl>   
                      <dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

                              <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
                              <ul>
                                      <li><a href="#">Sous-Menu 2.1</a></li>
                              </ul>

                              </dd>

              </dl>
             
              <dl>   
                      <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
                              <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
                              <ul>

                                      <li><a href="#">Sous-Menu 3.1</a></li>
                              </ul>

                              </dd>
              </dl>
              <dl>   
                      <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
                              <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
                              <ul>

                                      <li><a href="#">Sous-Menu 4.1</a></li>
                              </ul>

                              </dd>
              </dl>
              <dl>   
                      <dt onmouseover="javascript:montre('smenu5');">Menu 5</dt>
                              <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
                              <ul>

                                      <li><a href="#">Sous-Menu 5.1</a></li>

                              </ul>

                              </dd>
              </dl>
              <dl>   
                      <dt onmouseover="javascript:montre('smenu6');">Menu 6</dt>
                              <dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
                              <ul>

                                      <li><a href="#">Sous-Menu 6.1</a></li>

                              </ul>

                              </dd>
              </dl>


      Donc pour ajouter un menu, il faut faire ca:

      <dt onmouseover="javascript:montre('smenu7');">Menu 7</dt>
                              <dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre('');">
                              <ul>

                                      <li><a href="#">Sous-Menu 6.1</a></li>

                              </ul>

                              </dd>
              </dl>

      et remplacer les chiffres ( 7 ici ) par un autre nombre .
      Le nombre doit être plus petit que le chiffre dans le js ( celui qu'on modifie ) pour que ca fonctionne ;)
      • Partager sur Facebook
      • Partager sur Twitter
      Herzeleid
        13 juin 2006 à 16:58:22

        Apparement ça marche :)
        Merci bien, je vais essayer d'adapter le tout à mon site désormais.
        Merci.

        Juste une petite question bète pour ma culture personnelle, les balises <dt>, <dl> et <dd>, à quoi servent-elles?
        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          13 juin 2006 à 17:03:46

          C'est quelque part dans le cours xhtml/css, c'est pour donner un mot et sa définition, je cherche la bonne page et j'édite :p

          C'est pas le cours, mais la liste des balises, suffit de descendre un peu :)
          http://www.siteduzero.com/tuto-3-4874-1-liste-des-balises-xhtml.html#ss_part_4

          Dans le cours, un peu plus bas:
          http://www.siteduzero.com/tuto-3-40-1-les-listes-a-puces.html#ss_part_1
          • Partager sur Facebook
          • Partager sur Twitter
          Herzeleid
          ArnOX
          • HTML / CSS
            13 juin 2006 à 17:21:28

            mais utilisez les balise <a> avec la pseudo class hover !!
            • Partager sur Facebook
            • Partager sur Twitter
            Lead développeur & Architecte logicielle, je partage ma passion sur mon blog : lilobase.wordpress.com
            frednetick
              15 juin 2006 à 12:30:33

              Je ne vois même pas pourquoi certains continue d'utiliser le JS pour les menu déroulant etc vu que le CSS fait ça très bien..

              Un ptit lien pour te prouver qu'on peut faire des trucs de ouf: cssplay

              lui s'amuse comme un fou.. :D
              • Partager sur Facebook
              • Partager sur Twitter

              JS menu dynamique

              × 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