Faire des menu comme ccm ?

zogo Messages postés 116 Statut Membre -  
zogo Messages postés 116 Statut Membre -
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 Messages postés 343 Statut Membre 75
     
    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
  2. Reivax962 Messages postés 3742 Statut Membre 1 011
     
    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 Messages postés 343 Statut Membre 75
       
      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
  3. Reivax962 Messages postés 3742 Statut Membre 1 011
     
    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
  4. zogo Messages postés 116 Statut Membre 5
     
    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

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Reivax962 Messages postés 3742 Statut Membre 1 011
     
    Oui j'ai bien compris, et ma réponse s'applique bien ;)
    0
  7. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    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
  8. zogo Messages postés 116 Statut Membre 5
     
    Merci bcp pour ce "petit" code comme tu dis, je vais le tester desuite
    0
  9. zogo Messages postés 116 Statut Membre 5
     
    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
  10. zogo Messages postés 116 Statut Membre 5
     
    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