Faire des menu comme ccm ?

zogo -  
Bonjour, j'ai un site web, le problèmme c'est que je n'ai pas assez de place sur les menu en haut, donc j'aimerais faire de menu comme Comment Ca Marche ( je parle pas du design ) mais que quand on survole, il y a denouveau plusieurs possibilitée par exemple :
bouton " Communautée" sous - bouton quand on survole "Forum" et en dessous " livre d'or" et en dessous "..." ?
est.ce que vous auriez un script svp ? ou me dire comment je peux faire ?
merci d'avance
Configuration: Windows Vista
Firefox 2.0.0.6

9 réponses

  1. jcbetin
    Slt!!

    Tout est expliqué ici:

    http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
    0
    1. Reivax962
      Ben sinon, tu regardes le code source de CCM, tu leur demandes si tu peux t'en inspirer, et tu l'adaptes à ton site !
      0
      1. jcbetin
        bah le problème c'est que le style css de ccm est dans une feuille à part (feuille liée) donc il n'y a pas accès...
        0
    2. Reivax962
      Pas accès ? Tu sais, si ton navigateur y accèdes, tu peux y accéder aussi en faisant comme lui, hein ! Tu prends l'url de la feuille de style, tu la mets dans ta barre d'adresse...
      0
      1. zogo Auteur
        lol, je crois que on a mal compris.
        Je ne veux pas le design du menu
        ca je m'en fou totalement
        moi ce que je veux ( avec mon design, et mon menu )
        c'est un menu avec 4 cases et quand tu survole une case, il y a plusieurs option en desous, exemple de CCM , Forum, quand tu passe ta souris desus, en desous il y a d'autre lien qui s'afiche ( forum window, forum webmastering ) etc...
        le design, je l'ai deja, moi je need juste le code ou savoire comment on fait des menu comme ca :)
        0
        2. Reivax962
          Oui j'ai bien compris, et ma réponse s'applique bien ;)
          0
          1. RAD ZONE Contributeur
            SALUT

            allez soyons bon :-))

            voila un modele tres simple 
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="PSPad editor, www.pspad.com">
<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">
      <!--
      body {
      margin: 0;
      padding: 0;
      background: white;
      font: 80% verdana, arial, sans-serif;
      }
      dl, dt, dd, ul, li {
      margin: 0;
      padding: 0;
      list-style-type: none;
      }
      #menu {
      position: absolute;
      margin-left: 50%;
      top: 0;
      left: -400;
      z-index:100;
      width: 800px;
      }
      #menu dl {
      float: left;
      width: 12em;
      margin: 0 1px;
      }
      #menu dt {
      cursor: pointer;
      text-align: center;
      font-weight: bold;
      background: #ccb;
      border: 1px solid gray;
      }
      #menu dd {
      border: 1px solid gray;
      }
      #menu li {
      text-align: center;
      background: #fcb;
      }
      #menu li a, #menu dt a {
      color: #000;
      text-decoration: none;
      display: block;
      height: 100%;
      border: 0 none;
      }
      #menu li a:hover, #menu dt a:hover {
      background: #eec;
      }
      -->
    </style>
  </head>
  <body>
    <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">
          <ul>
            <li>
            <a href="#">Sous-Menu 1.1</a></li>
            <li>
            <a href="#">Sous-Menu 1.2</a></li>
            <li>
            <a href="#">Sous-Menu 1.3</a></li>
            <li>
            <a href="#">Sous-Menu 1.4</a></li>
            <li>
            <a href="#">Sous-Menu 1.5</a></li>
            <li>
            <a href="#">Sous-Menu 1.6</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu2');"> Menu 2
        </dt>
        <dd id="smenu2">
          <ul>
            <li>
            <a href="#">Sous-Menu 2.1</a></li>
            <li>
            <a href="#">Sous-Menu 2.2</a></li>
            <li>
            <a href="#">Sous-Menu 2.3</a></li>
            <li>
            <a href="#">Sous-Menu 2.4</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="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.2</a></li>
            <li>
            <a href="#">Sous-Menu 3.3</a></li>
            <li>
            <a href="#">Sous-Menu 3.4</a></li>
            <li>
            <a href="#">Sous-Menu 3.5</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="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.2</a></li>
            <li>
            <a href="#">Sous-Menu 4.3</a></li>
          </ul>
        </dd>
      </dl>
    </div>
  </body>
</html>


            RAD
            0
            1. zogo Auteur
              Merci bcp pour ce "petit" code comme tu dis, je vais le tester desuite
              0
              1. zogo Auteur
                comment on le design dl dd chais plus quoi ? c'est ou que on met plus large plus haut ?
                ps :merciiiiii bpppp pour ce code, je le cherchaisdpeuis longtemps
                0
                1. zogo Auteur
                  bon, j'avance vachement, seul problèmme, j'ai une image a mettre en background, alors quand je la met, le seul problèmme c'est que je peux pas prendre la largeur et la hauteur exacte de mon image, parce que quand je met height et width, je sais pas, ca me le fait bizzarement
                  0