Forum

Réagissez dans les forums de JDN Développeurs

Extension du pratique que nous vous avions présenté dans l'article "CSS : cacher/afficher le contenu d'une balise DIV", nous vous présentons ici comment, avec un peu plus d'astuce CSS et le même JavaScript, réalisé une combinaison de menu et sous-menus...

Voici le code source :
<style>
a {text-decoration: none;}

ul, li
  {
  list-style-type: none;
  margin: 0 5px 0 0;
  padding: 0;
  }

.menu
  {
  position : absolute;
  left: 0;
  }

.menu dl
  {
  float: left;
  }

.menu li
  {
  display: inline;
  }

.menu a
  {
  text-decoration: none;
  color: #000;
  }

#menu1, #menu2, #menu3, #menu4
  {
  display: none;
  position: absolute;
  top: 12px;
  left: 0;
  width: 370px;
  }
</style>

<script>
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }

function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }
</script>

<div class="menu">
  <ul>
    <li onMouseOver="afficheId('menu1');" onMouseOut="cacheId('menu1');">Journal du Net</li>
    <ul id="menu1" onMouseOver="afficheId('menu1');" onMouseOut="cacheId('menu1');">
      <li><a href="http://www.journaldunet.com/">Journal du Net</a></li>
      <li><a href="http://solutions.journaldunet.com/">JDN Solutions</a></li>
      <li><a href="http://www.journaldunet.com/developpeur/">JDN Développeurs</a></li>
      <li><a href="http://management.journaldunet.com/">JDN Management</a></li>
    </ul>
  </ul>
  <ul>
    <li onMouseOver="afficheId('menu2');" onMouseOut="cacheId('menu2');">L'internaute</li>
    <ul id="menu2" onMouseOver="afficheId('menu2');" onMouseOut="cacheId('menu2');">
      <li><a href="http://www.linternaute.com/">L'internaute</a></li>
      <li><a href="http://www.linternaute.com/femmes">Journal des Femmes</a></li>
    </ul>
  </ul>
  <ul>
    <li onMouseOver="afficheId('menu3');" onMouseOut="cacheId('menu3');">Autres</li>
    <ul id="menu3" onMouseOver="afficheId('menu3');" onMouseOut="cacheId('menu3');">
      <li><a href="http://www.copainsdavant.com/">Copains d'avant</a></li>
      <li><a href="http://emploi.journaldunet.com/">EmploiCenter</a></li>
      <li><a href="http://www.benchmark.fr/">Benchmark.fr</a></li>
    </ul>
  </ul>
</div>

L'astuce CSS est d'avoir placé le menu dans des balises de liste (afin de respecter une certaine sémantique, mais de les avoir transformées graphiquement grâce à CSS, en les alignant et en supprimant leurs puces.
Les fonctions afficheIf() et cacheId() se chargent ensuite non seulement de montrer/cacher les DIV conteneurs, mais également cette fois les DIV qui se trouvent à l'intérieur...


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius