Faire son site et le publier

Kompozer et CSS

Faire un Menu déroulant horizontal avec sous-menus à fonds transparents

Le texte placé dans le contenu ne se se déplace pas avec le déroulement des sous-menus car les sous-menus sont en position absolute.
L'opacité des arrières plans a été réduite à 0.748%
Les icônes des arrières plans des sous-menus sont de la même teinte que les textes au repos et survolés.
Bordures latérales noires solid 1 px pour tous les li des sous-menus et (dans le html) bordure basse pour le dernier li de chaque sous-menu.
Faire 2 images pour chaque li de sous-menu  : une pour l'état normal et une autre pour l'état survolé    image d'arrière-plan à l'état normal  image d'arrière-plan à l'état survolé

Menu déroulant horizontal

1 -  Code CSS de la page

html { background-color: #990000; }
body { width: 900px; margin-right: auto; margin-left: auto; margin-top: 0; font-family: Arial,Helvetica,sans-serif;
font-size: 1em; background-color: #cccccc; }
#header { background-image: url(images/canigou.jpg); background-repeat: no-repeat; background-position: center center; height: 100px; }
#content { width: 800px; margin-right: auto; margin-left: auto; height: 1220px; }
#footer { background-image: url(images/vingrau.jpg); width: 900px; height: 75px; }
h1 { color: #990000; margin-top: 0; padding-top: 10px; margin-left: 300px; }
ol, ul { margin: 0;  padding: 0; }

2 - Construire la liste imbriquée dans le html

En utilisant l'interface de Kompozer il faut penser à l'outil Nettoyeur de balises.
Faire les liens

3 - Construire le menu en passant par 3 étapes :

Etape 1 : Faire un menu vertical accordéon (tout ce qui est en bleu )
Etape 2 : Le transformer en menu horizontal déroulant et le placer dans l'en-tête (tout ce qui est en vert)
Etape 3 : Décoration : couleurs, bordures, fonds, transparence (tout ce qui est en rouge)

Code CSS du menu premier niveau
#menuheight: 30px; margin-right: auto; margin-left: auto; width: 460px; }
#menu li { margin: 0; list-style-type: none; float: left; position: relative; }
#menu li a { width: 150px; height: 30px; display: block; line-height: 30px; text-decoration: none; text-indent: 40px; font-weight: bold; color: #990000; }
#menu li a:hover { color: #ff6666; }
Code CSS du menu deuxième niveau
#menu li ul { display: none; }
#menu li ul li { float: none; }
#menu li:hover ul { display: blockposition: absolute; }
#menu li:hover ul li a { border-left: 1px solid black; border-right: 1px solid black; width: 150px; text-indent: 30px;
background-color: #d9deea; font-weight: normal; opacity: 0.748; }
#menu li:hover ul li a:hover { color: #ff6666; }

  .fd_w a { background-image: url(images/forme1.png); background-repeat: no-repeat;
    background-position: left center; }
  .fd_w a:hover { background-image: url(images/forme1Surv.png); background-repeat: no-repeat;
    background-position: left center; }
  .fd_x a { background-image: url(images/forme2.png); background-repeat: no-repeat;
    background-position: left center; }
  .fd_x a:hoverbackground-image: url(images/forme2Surv.png); background-repeat: no-repeat;
    background-position: left center; }
  .fd_y a { background-image: url(images/forme3.png); background-repeat: no-repeat;
    background-position: left center; }
  .fd_y a:hover { background-image: url(images/forme3Surv.png); background-repeat: no-repeat;
    background-position: left center; }
  .fd_z a { background-image: url(images/forme4.png); background-repeat: no-repeat;
    background-position: left center; }
  .fd_z a:hover { background-image: url(images/forme4Surv.png); background-repeat: no-repeat;
    background-position: left center; }
Visionner le menu
Haut de page
Jos Argaud - Mise à jour 05/07/2009  Pour m'écrire  Document made with KompoZer