Partage
  • Partager sur Facebook
  • Partager sur Twitter

Super menu javascript

se déroule puis apparaît

    15 février 2006 à 19:13:24

    j'aimerai que mon menu déroulant puisse apparaître façon tooltips en faisant des sortes de sous-dossier (je ne m'y connaît pas trop en JavaScript :-° )
    Je vous donne mes codes sources si ça peut vous aider.
    Mon code source déroulant:

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

    </script>
    <style type="text/css">
    </style>
    </head>
    <body>
    <dl id="menu">
    <dt onclick="javascript:montre();"><a target="mainframe" href="accueil.htm">Accueil</a></dt>
    <dt onclick="javascript:montre('smenu2');">La radioactivité</dt>
    <dd id="smenu2">
    <ul>
    <li>c'est là que le tooltips apparaît (voir plus bas)</li>
    <li><a href="stabilitérad.htm">Noyaux stables et instables</a></li>
    <li><a href="alpha.htm">Radiation alpha</a></li>
    <li><a href="betap.htm">Radiation bêta +</a></li>
    <li><a href="betam.htm">Radiation bêta -</a></li>
    <li><a href="gamma.htm">Radiation gamma</a></li>
    <li><a href="typesrad.htm">Décroissance Radioactive</a></li>
    </ul>
    </dd>
    <dt onclick="javascript:montre('smenu3');">Menu 3</dt>
    <dd id="smenu3">
    <ul>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    </ul>
    </dd>
    <dt onclick="javascript:montre('smenu4');">Menu 4</dt>
    <dd id="smenu4">
    <ul>
    <li><a href="#">Sous-Menu 4.1</a></li>
    <li><a href="#">Sous-Menu 4.1</a></li>
    </ul>
    </dd>
    </dl>


    Et mon code source façon tooltips:


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

    </script>
    </head>
    <body>
    <!-- Menu  -->
    <dl id="menu">
    <dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt>
    <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
    <ul>
    <li><a href="#">ca doit apparaître en tooltips 1.1</a></li>
    <li><a href="#">en même temps que ça</a></li>
    <li><a href="#">et que ça</a></li>
    </ul>
    </dd>   
    <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu 2</dt>
    <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
    <ul>
    <li><a href="#">Sous-Menu 2.1</a></li>
    <li><a href="#">Sous-Menu 2.2</a></li>
    </ul>
    </dd>   
    <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt>
    <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
    <ul>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    <li><a href="#">Sous-Menu 3.1</a></li>
    </ul>
    </dd>
    <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu 4</dt>
    <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
    <ul>
    <li><a href="#">Sous-Menu 4.1</a></li>
    <li><a href="#">Sous-Menu 4.1</a></li>
    </ul>
    </dd>
    </dl>


    Bonne chance :euh:
    • Partager sur Facebook
    • Partager sur Twitter

    Super menu javascript

    × 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