28173 sujets

CSS et mise en forme, CSS3

Un petit menu pratique et qui fonctionne

Bonjour,

Grâce à l'aide de vous tous, j'ai créé un petit menu qui semble bien fonctionner et je me permets de vous le faire partager. N'hésiter absolument pas à émettre votre avis et éventuelles corrections. Smiley cligne

D'autre part, j'ai posé une question le 23 novembre et personne ne m'a répondu. Quelqu'un saurait pour quelle raison lorsque l'on met une balise <select> dans un div semi-transparent, au moment où l'on scroll, IE6 fait un beau plantage graphique. Quelqu'un aurait-il la solution, ce serait vraiment cool Smiley smile

Code HTML:

<body>
<div id="menu">
  <dl id="barremenu1">
    <dt onmouseover="javascript:montre(1);AnnulerCacher();"
        onmouseout="CacherDelai();">Menu1</dt>
    <dd id="smenu1"
    onmouseover="AnnulerCacher();"
    onmouseout="CacherDelai();"
    onfocus="AnnulerCacher();"
    onblur="CacherDelai();">
      <ul>
        <li><a href="#">&nbsp;Sous-menu 1</a></li>
        <li><a href="#">&nbsp;Sous-menu 2</a></li>
        <li><a href="#">&nbsp;Sous-menu 3</a></li>
        <li><a href="#">&nbsp;Sous-menu 4</a></li>
      </ul>
    </dd>
  </dl>

<!-- ----------------------------------------- -->

  <dl id="barremenu2">
    <dt onmouseover="javascript:montre(2);AnnulerCacher();"
        onmouseout="CacherDelai();">Menu2</dt>
    <dd id="smenu2"
    onmouseover="AnnulerCacher();"
    onmouseout="CacherDelai();"
    onfocus="AnnulerCacher();"
    onblur="CacherDelai();">
      <ul>
        <li><a href="#">&nbsp;Sous-menu 1</a></li>
        <li><a href="#">&nbsp;Sous-menu 2</a></li>
        <li><a href="#">&nbsp;Sous-menu 3</a></li>
        <li><a href="#">&nbsp;Sous-menu 4</a></li>
        <li><a href="#">&nbsp;Sous-menu 5</a></li>
        <li><a href="#">&nbsp;Sous-menu 6</a></li>
      </ul>
    </dd>
  </dl>

<!-- ----------------------------------------- -->

  <dl id="barremenu3">
    <dt onmouseover="javascript:montre();">
      <a href="#">&nbsp;Menu3</a>
    </dt>
  </dl>

</div>


<!-- Correction du bug pour les balises select -->
<script language="JavaScript" type="text/JavaScript">
<!--
if (navigator.appName=='Microsoft Internet Explorer') {
  document.write("<iframe id='framemenu' frameborder='0' scrolling='no' src='about:blank'></iframe>");
  document.getElementById("framemenu").style.visibility = "hidden";
}
-->
</script>
<!-- ----------------------------------------- -->


<!-- Exemple d'un formulaire ----------------- -->
<br /><br />
<table style="margin-left:100px">
  <tr>
    <td>
      Nom : <input type="text" name="nom" />
    </td>
  </tr>
  <tr>
    <td>
      Couleur : <select name="couleur"><option>rouge</option><option>vert</option><option>bleu</option></select>
    </td>
  </tr>
</table>

<!-- ----------------------------------------- -->

</body>


Code JS:

function montre(id) {
  var d = document.getElementById('smenu'+id);
  for (var i = 1; i<=10;  i++) {
    if (document.getElementById('smenu'+i)) {
      document.getElementById('smenu'+i).style.display='none';
    }
  }
  if (document.getElementById("framemenu")) {
    document.getElementById("framemenu").style.visibility = "hidden";
  }
  if (d) {
    d.style.display='block';
    if (document.getElementById("framemenu")) {
      document.getElementById("framemenu").style.visibility = "visible";
      document.getElementById("framemenu").style.height = d.offsetHeight;
      document.getElementById("framemenu").style.width = d.offsetWidth;
      document.getElementById("framemenu").style.left = document.getElementById("barremenu"+id).offsetLeft+document.getElementById("menu").offsetLeft;
      document.getElementById("framemenu").style.top = d.offsetTop+document.getElementById("menu").offsetTop;
    }
  }
}

function CacherDelai() {
  timeout = setTimeout('montre()', 500);
}

function AnnulerCacher() {
  if (timeout) {
    clearTimeout(timeout);
  }
}


Code CSS:

/* Paramètres généraux */
* {
  margin: 0;
  padding: 0;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #6342ff;
}

dl, dt, dd, ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}


/* Paramètres du menu */
#menu {
  position:absolute;
  top: 0px;
  left: 50px;
  z-index:100;
  width: 100%;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  opacity: 0.8;
  font-size: 14px;
}

#menu dl {
  float: left;
  width: 149px;
  margin: 0 1px;
}

#menu dt {
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  background: #ccc;
}

#menu dd {
  display:none;
  border: 1px solid gray;
  z-index:1;
}

#menu li {
  text-align: left;
  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: #aaa;
}

#framemenu {
  border: 0px;
  z-index:1;
  position:absolute;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  filter:alpha(opacity=50);
  left:250px;
}

Modifié par astrobob (05 Dec 2006 - 11:59)
Administrateur
Hello,

Deux petites choses :
- peut-on voir le menu en ligne ? (j'avoue que recopier ou copier/coller le code va en refroidir plus d'un)
- est-il possible d'avoir une version dans les listes de définition, qui ne correspondent pas à cet emploi ? (oui oui, le tuto actuel sur Alsa est obsolète)
Sujet clos
Aller à