Faire des menu comme ccm ?

zogo Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   -  
zogo Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   -
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
A voir également:

9 réponses

jcbetin Messages postés 339 Date d'inscription   Statut Membre Dernière intervention   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
Reivax962 Messages postés 3672 Date d'inscription   Statut Membre Dernière intervention   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
jcbetin Messages postés 339 Date d'inscription   Statut Membre Dernière intervention   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
Reivax962 Messages postés 3672 Date d'inscription   Statut Membre Dernière intervention   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
zogo Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   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

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

Posez votre question
Reivax962 Messages postés 3672 Date d'inscription   Statut Membre Dernière intervention   1 011
 
Oui j'ai bien compris, et ma réponse s'applique bien ;)
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   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
zogo Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   5
 
Merci bcp pour ce "petit" code comme tu dis, je vais le tester desuite
0
zogo Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   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
zogo Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   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