Menu

Mel's creations -  
RAD ZONE Messages postés 5362 Statut Contributeur -
Bonjour, j'aimerais savoir comment on fait pour mettre un menu comme celui de commentcamarche.net dans un code html
Configuration: Windows XP
Internet Explorer 7.0

5 réponses

  1.
    portus Messages postés 461 Statut Membre 88
     
    Je crois que c'est du PHP ^_^

    Mais je saurais pas t'en dire plus ... -_-'

    0
  2. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    SALUT

    en voila 1
    <!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="fr" lang="fr">
  <head>
    <title>
      Menu déroulant horizontal
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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;
      top: 0;
      left: 0;
      z-index:100;
      width: 100%;
      }
      #menu dl {
      float: left;
      width: 12em;
      margin: 0 1px;
      }
      #menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	border: 1px solid gray;
	background-color: #0066CC;
      }
      #menu dd {
      border: 1px solid gray;
      }
      #menu li {
      text-align: center;
      background: #fff;
      }
      #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-color: #66CCFF;
      }
      a {text-decoration: none;
      color: black;
      color: #222;
      }
      -->
    </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
  3. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    salut,

    en voilà un autre sans JavaScript mais qui ne fonctionne pas sous IE6 (juste pour la technique).

    ou avec JS comme RadZone et des explications en plus.
    0
  4. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    attention il faut un hack pour IE6 sur ton menu
    Dalida !! ;-))
    0
    1. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
       
      re,

      ba vi mais comme j'ai posté avant d'avoir fini d'écrire (une de mes grandes spécialités !), tu n'as pas pu lire la fin…

      j'ai aussi mis celui d'AlsaCréations à titre pédagogique !
      0

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

    Posez votre question
  6. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    lool oui j ai vus que le message avait changer apres :-))
    0

Discussions similaires

Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
Kaheil -
Ismo87 -

7 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
menu caché
laurent -
ChariduP -

7 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses