Parties identiques

Modifier

Introduction

Le but étant de décrire le fonctionnement d'un menu réalisé uniquement en CSS. Voici les hypothèses de départ

le menu doit être compatible depuis IE5
il peut être horizontal ou vertical ou bien mélanger les deux
il est multiniveau
il ne doit pas nécessiter de balisage particulier au niveau du html

Pour cela nous utiliserons donc des puces
Modifier

Mise en place

Modifier

Obligations

Il faut obligatoire mettre pour ie l'entête suivante

{BR}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">{BR}
<html xmlns="http://www.w3.org/1999/xhtml">{BR}

Sinon l'interprétation des css 2 est différentes ou non prise en compte. Modifier

Le menu

Simple

{{{{
  <ul id="nav">
      <li>Menu 1
        <ul>
          <li> sous Menu 1.1</li>
          <li> sous Menu 1.2</li>
          <li> sous Menu 1.3</li>
        </ul>
      </li>
      <li>Menu 2
        <ul>
          <li> sous Menu 2.1 -->
            <ul>
              <li> sous Menu 2.1.1</li>
              <li> sous Menu 2.1.2</li>
            </ul>
          </li>  
          <li> sous Menu 2.2</li>
          <li> sous Menu 2.3</li>
        </ul>
      </li>  
      <li>Menu 3</li>
    </ul>
}}}}

Modifier

Parties identiques

Modifier

Compatibilité IE

Ajouter la ligne suivante qui permet d'inclure un fichier placé sur l'événement de page et ajoutant la fonctionnalité hover sur les élements li, uniquement pour ie 5.5 et inférieur

{BR}
<!--[if gt IE 5.0]><![if lt IE 7]>{BR}
<style type="text/css">{BR}
ul.makeMenu li {&nbsp;&nbsp;{BR}
&nbsp;&nbsp;behavior: url( IEmen.htc );{BR}
}{BR}
ul.makeMenu ul {&nbsp;&nbsp;{BR}
&nbsp;&nbsp;display: none; position: absolute; top: 2px; left: 78px;{BR}
}{BR}
</style>{BR}
<![endif]><![endif]-->{BR}