Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème avec mon menu

jacko2
    24 août 2006 à 14:46:05

    Bonjour,



    Voila, j'ai fait un menu horizontal sur mon site mais je voudrais lui ajouter quelques petites modifications.

    Pour mieux vous expliquer, j'aimerai avoir ce style de menu : ICI
    mais pas a la vertical, tout a l'horizontal ainsi que les sous-menu qui descendent

    voila le code source de ce menu :

    <?php header('Content-Language: en'); ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>A Javascript and CSS expanding menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </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="#">Menu 1.1</a></li>
                            <li><a href="#">Menu 1.2</a></li>
                            <li><a href="#">Menu 1.3</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="#">Menu 2.1</a></li>
                                            <li><a href="#">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="#">Menu 3.1</a></li>
                                            <li><a href="#">Menu 3.1</a></li>

                                            <li><a href="#">Menu 3.1</a></li>

                                            <li><a href="#">Menu 3.1</a></li>
                                            <li><a href="#">Menu 3.1</a></li>
                                            <li><a href="#">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="#">Menu 4.1</a></li>
                                            <li><a href="#">Menu 4.1</a></li>
                                    </ul>

                            </dd>
    </dl>

    <div id="mentions">Raphael GOETTER<br />

      <a href="http://www.alsacreations.com">Alsacréations</a><br />
      <a href="http://tutorials.alsacreations.com/deroulant">Back</a></div>

    </body>
    </html>




    body {
    background: white;
    padding:0;
    margin:0;
    font-family: verdana, arial, sans-serif;
    font-size: 90%;
    color: black;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    position: absolute;
    top: 1em;
    left: 1em;
    width: 10em;
    }

    #menu dt {
    cursor: pointer;
    background: #A9BFCB;
    height: 20px;
    line-height: 20px;
    margin: 2px 0;
    border: 1px solid gray;
    text-align: center;
    font-weight: bold;
    }

    #menu dd {
    position: absolute;
    z-index: 100;
    left: 8em;
    margin-top: -1.4em;
    width: 10em;
    background: #A9BFCB;
    border: 1px solid gray;
    }

    #menu ul {
    padding: 2px;
    }
    #menu li {
    text-align: center;
    font-size: 85%;
    height: 18px;
    line-height: 18px;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    }

    #menu li a:hover {
    text-decoration: underline;
    }


    #mentions {
    font-family: verdana, arial, sans-serif;
    position: absolute;
    bottom : 200px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    }
    #mentions a {text-decoration: none;
    color: #222;
    }
    #mentions a:hover{text-decoration: underline;
    }


    <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>


    Si quelqu'un peut m'eclaire un peu, c'est sympa ;)

    MErci d'aavance
    • Partager sur Facebook
    • Partager sur Twitter
    msg_dracula
      24 août 2006 à 15:04:04

      En ce qui me concerne, je trouve que c'est un des meilleurs site sur le css,et il y a plein de menu :
      CSS Play

      ou tu as également ce site :
      CSS Max Design

      Voila, bonne exploration, tu trouvera surement ce que tu cherche !
      • Partager sur Facebook
      • Partager sur Twitter

      Problème avec mon menu

      × 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