Menu HTML et CSS, sliding doors et item current en PHP

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Menu HTML et CSS, sliding doors et item current en PHP

Ce mini tutoriel propose une technique simple pour afficher un effet de survol sur un bouton en permutant une image en background associée à un lien et faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Le tout avec une pincée de HTML, une bonne dose de CSS et un soupçon de PHP.

Le code HTML

Le menu est constitué d’une liste non-ordonnée ul où chaque lien a contenu dans l’élément li est transformé en bloc display: block afin de recevoir une image de fond qui contient les deux états du bouton. Cette image possède une largeur de 100px pour une hauteur de 50px. Les vingt-cinq premiers pixels de hauteur sont réservés à l’état « inactif », tandis que les vingt-cinq pixels restants feront le bonheur de la pseudo-classe :hover.

Si vous ne connaissez pas cette technique, n’ayez pas PêUR ! Vous trouverez des exemples d’images en portes coulissantes sur cet excellent blog consacré au HTML et aux CSS ;)

Qu’y a-t-il au menu ?

Il s’agit d’une simple liste qui contient les liens auxquels j’ai associé un id (ici en gras) nécessaire pour l’application des styles CSS abordés plus bas.

<div id="menu">
  <ul>
    <li><a id="accueil" href="index.php">Accueil</a></li>
    <li><a id="page1" href="page1.php">page1</a></li>
    <li><a id="page2" href="page2.php">page2</a></li>
  </ul>
</div>

La feuille de style CSS pour le menu

En ce qui concerne la feuille de style pour le menu, la seule chose à retenir, c’est le décalage de -25px pour l’état :hover qui affiche la partie de l’image réservée pour le survol. C’est ce même décalage qui permettra par la suite de signaler la rubrique en cours lorsque le bouton en question sera cliqué.

/* Style général du menu */
#menu {
     margin: 0;
     padding: 0;
}
#menu ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
#menu ul li {
     float: left;
 }

/* Style global des liens */ a#index, a#page1, a#page2 { display: block; width: 100px; height: 25px; }

/* Style particulier pour le background des liens avec pour chacun : l'état inactif et actif */ a#index { background: url(images/bt_index.png) 0 0 no-repeat; } a#index:hover { background: url(images/bt_index.png) 0 -25px no-repeat; } a#page1 { background: url(images/bt_page1.png) 0 0 no-repeat; } a#page1:hover { background: url(images/bt_page1.png) 0 -25px no-repeat; } a#page2 { background: url(images/bt_page2.png) 0 0 no-repeat; } a#page2:hover { background: url(images/bt_page2 .png) 0 -25px no-repeat; }

La petite fonction php qui va bien

<?php
function currentPage($strPage) {
  if (strstr($_SERVER['PHP_SELF'], $strPage)) {
     echo 'class="current_' . $strPage. '" ';
  } else {
     echo '';
  }
}
?>
Cette fonction recherche la première occurence de la chaîne de caractère $strPage dans l’URL courante grâce à strstr().

Ensuite la fonction echo() affiche une classe CSS composée de la concaténation du terme current_ et de la chaîne $strPage. Si le terme $strPage n’existe pas dans l’URL, la fonction renvoit une chaine vide…

Le menu HTML avec l’appel de la fonction

<div id="menu">
     <ul>
         <li><a <?php currentPage('index') ?>id="accueil" href="index.php" >Accueil</a></li>
         <li><a <?php currentPage('page1') ?>id="page1" href="page1.php" >page1</a></li>
         <li><a <?php currentPage('page2') ?>id="page2" href="page2.php" >page2</a></li>
     </ul>
</div>

Le menu HTML après un clic sur le deuxième lien

<div id="menu">
     <ul>
         <li><a id="accueil" href="index.php">Accueil</a></li>
         <li><a class="current_page1" id="page1" href="page1.php" >page1</a></li>
         <li><a id="page2" href="page2.php">page2</a></li>
     </ul>
</div>

La touche finale avec les liens current

/* Styles particuliers issus de la fonction PHP pour les liens en cours */
#menu a.current_index {
     background: url(images/bt_accueil.png) 0 -25px no-repeat;
}
#menu a.current_page1 {
     background: url(images/bt_page1.png) 0 -25px no-repeat;
}
#menu a.current_page2 {
     background: url(images/bt_page2.png) 0 -25px no-repeat;
}

Conclusion

Pas de quoi faire le kakou, c’est certain ;) mais cette petite fonction PHP remplit bien son office. J’avoue que cette petite merveille de strstr() y est pour beaucoup. Après quelques recherches sur PHP, je me rends compte que ce langage possède un nombre extraordinaire de fonctions pour traiter les chaines de caractères qu’on dirait du perl !

Si de votre côté vous avez des petites fonctions PHP ou Javascript liées aux CSS qui prennent la poussière au fond d’un dossier, n’hésitez pas à leur donner une seconde vie en en faisant profiter les autres :)

Stay tuned and mind the gap!

Note du 10/11/2007 : Afin d’éviter d’éventuels soucis de cascade CSS dues à la priorité des ID sur les classes, j’ai modifié les styles comme suit : #menu ul li a#index {…} est remplacé par a#index {…} (ce qui est largement suffisant) et je laisse #menu a.current_index {…} de manière à ce que le poids de la classe .current_index {…} soit plus important que a#index {…}.

Voici un exemple très moche mais fonctionnel pour illustrer ce tutoriel. Téléchargez le fichier zip de l’exemple.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



26 commentaires pour “Menu HTML et CSS, sliding doors et item current en PHP”

  1. Aguillem dit :

    Joli tuto ! Coincidence, c’est exactement ce que j’étais en train de faire hier soir sur un site perso, en regardant les experts. Par contre, là ou je me sens ridicule, c’est que je n’avais pas pensé à faire une fonction, donc a chaque fois j’écrivais un truc du genre : <?php if(test) echo ‘class=active';?> dans chaque lien. Alors merci de me faire gagner de la lisibilité ;) Par contre je n’utilise pas ton : strstr($_SERVER['PHP_SELF'], $strPage) mais simplement un test sur la variable GET["menu"]. En même temps je n’ai pas encore fait mon URL Rewriting, donc je serais peut etre amené à modifier ça plus tard :( En tout cas beau travail… moi je suis sur le point de faire un tuto pour faire une arborescence dépliante ET accessible en CSS/Javascript.

  2. loïc m. dit :

    @Aguillem: "En tout cas beau travail… moi je suis sur le point de faire un tuto pour faire une arborescence dépliante ET accessible en CSS/Javascript."

    Le javascript pour toi est sinonyme d’accessibilité ? A moins que tu ne fasse un menu avec du javascript non intrusif ;)

  3. Aguillem dit :

    @loic : beaucoup ont cette fausse idée que javascript n’est pas accessible. Or c’est l’utilisation que l’on en fait qui peut le rendre non accessible et intrusif. Et j’espère bien te le démontrer dans mon billet ;) Le but est de faire une arborescence qui sera utilisable avec ou sans javascript. Javascript apportera juste des fonctionnalités en plus, il ne sera pas obligatoire.

  4. PêUR dit :

    Brio, je suis fan de css4DesignR depuis un bon moment. Que vois-je?!!? Tu fais référence à un de mes articles!!!

    J’hallucine!! Je suis vraiment très très fier.

    Voici une bien belle adaptation du sliding doors avec PHP, hop hop, en lien dans l’article en question :)

  5. br1o dit :

    PêUR > c’est moi qui suis fan de ton site que je lis régulièrement depuis un bon moment :) Merci pour le lien dans l’article ! a++

    Aguillem > J’ai hâte de lire ton article sur l’arborescence dépliante

    Loïc > du javascript non-intrusif c’est bien pour la séparation des pouvoirs et la maintenabilité du code, mais à la limite, un javascript intrusif n’est pas forcément non accessible… ;)

  6. Laurelle dit :

    Une petite démo vaut mieux qu’un long discours. Pas le temps d’essayer…dommage…

  7. Bruno Bichet dit :

    @Laurelle : Oui, c’est dommage… en fait, à l’origine j’utilisais ce script pour le menu page quand ce blog tournait sous dotclear, et c’est vrai que je ne l’ai pas encore remis en place car la nouvelle charte graphique ne s’y prête plus. Un peu de patience, je tâcherais de le mettre en place quelque part ;)

  8. anna dit :

    Bonjour, J’ai essayé de reproduire ce tutoriel mais je suis bloquée car mes connaissances en php sont très limitées.

    J’ai quelques questions, j’espère que quelqu’un pourra m’aider:

    1) Je ne sais pas où il faut intégrer la function php : · dans le doc html où se trouve le menu ? si oui où exactement ? L’extension du doc où se trouve le menu html devrait alors être modifiée en .php ?

    2) Pour chaque lien de mon menu j’ai intégré les appels à la fonction du type comme indiqué ci-dessus. Mais je ne comprend pas bien ce qui se passe à partir du clic sur le deuxième lien: pourquoi l’appel à la fonction n’apparait plus dans le code une fois qu’on ajoute: class=”current_page1″ ? Merci de votre aide,

  9. Bruno Bichet dit :

    @anna : la fonction php est à placer de préférence le plus haut possible dans la page. bien évidemment comme la fonction doit être analysé par un parseur php, il est nécessaire d’avoir : 1) une extention .php et 2) un hébergement proposant le php.

    Pour ta deuxième question : il ne faut pas mettre class= »current_page1″ dans le code html. J’ai donné un exemple de ce qui apparait dans le code après qu’on a intégré le script et tutti quanti.

    il faut juste identifier le lien avec id= »page1″ (par exemple) et mettre l’appel du script qui ajoutera automatiquement le terme « current_ » (qui sert surtout à rendre le code CSS plus claire que si on se contentait de reprendre juste l’ID du lien)

    N’hésite pas à reposer des questions. Je tâcherais de metttre un exemple fonctionnel pour faciliter les choses :)

  10. anna dit :

    Merci Bruno pour ta réponse et toute l’aide que tu peux m’apporter. J’ai bien suivi tes conseils, j’ai placé la fonction php le plus haut possible dans le document qui contient le menu html qui s’appelait initialement gauche.html et qui est devenu gauche.php. Dans chaque lien, j’ai inséré l’id et l’appel à la fonction comme suit <a id=”pagen” href=”index.php”>Page n. La feuille de style ne comporte pas d’erreurs. Malheureusement mon menu ne s’affiche toujours pas (message: parse error) mais cela est sûrement dû à la structure de mon site et et à mes infimes connaissances en php. Désolée de raconter la vie de mon site mais j’ai vraiment besoin d’aide et j’espère que cet exemple pourra aider d’autres webmasters. En fait mon site se compose de 5 pages : index.php, pres.php, services.php, contact.php, ventes.php Chacune de ces pages appelle le menu html ( initialement gauche.html) grâce à un . Mon problème c’est que je voudrais que les liens de mon menu gardent leur aspect hover une fois cliqué, de manière à signaler la page en cours et à se « raffraichir  » pour chaque page c’est pourquoi ton tutoriel avec la fonction currentPage m’a semblé tout à fait adapté. C’est donc le doc  » gauche.html » qui contient mon menu que j’ai souhaité modifier en suivant ce tutoriel. Il se présente ainsi :

    <a href= »index.php »>Accueil</a> <a href= »pres.php »>Présentation</a> <a href= »services.php »>Services</a> <a href= »ventes.php »>Ventes</a> <a href= »contact.php »>Contact</a>

    Il ne contient ni head ni body pour pouvoir être appelé correctement depuis les pages index.php, pres.php, services.php…qui comportent . C’est depuis ces pages que l’appel à la feuille de style est effectué ( et ça marche à priori). Je me demande donc si l’erreur ne vient pas: 1) de l’appel au menu. Si gauche.html devient gauche.php, est-il correct d’écrire l’appel au menu dans les pages index.php, pres.php, services.php …? 2) Je me demande aussi si placer la fonction current Page tout en haut de mon document gauche.php qui ne contient ni head ni body n’est pas à l’origine de l’erreur. Désolée pour ce roman et merci pour tous les éclaircissements que tu pourrais m’apporter.

  11. anna dit :

    C’est bizarre ce qui vient de se passer: mon menu apparait alors que j’avais copié le code html…

  12. lolo dit :

    Anna, j’ai le meme probleme que toi et il n’est toujours pas résolu.

    Description du site : – 3 fichiers et 3 dossiers a la racine : • index.php, page1.php et page2.php d’une part ; • ƒ css, ƒ includes et ƒ images d’autre part ; – le dossier css contient 1 fichier : style.css – le dossier includes contient 1 fichier : menu.php – le dossier images contient 3 fichiers : bt_index.png, bt_page1.png et bt_page2.png ;

    Voici les codes maintenant :

    ——————– debut du fichier style.css : ——————– /* Style général du menu */

    menu {

     margin: 0;
     padding: 0;
    

    }

    menu ul {

     list-style-type: none;
     margin: 0;
     padding: 0;
    

    }

    menu ul li {

     float: left;
    

    } /* Style global des liens */

    menu ul li a#index,

    menu ul li a#page1,

    menu ul li a#page2 {

     display: block;
     width: 100px;
     height: 25px;
    

    } /* Style particulier pour le background des liens avec pour chacun : l’état inactif et actif */

    menu ul li a#index {

     background: url(images/bt_index.png) 0 0 no-repeat;
    

    }

    menu ul li a#index:hover {

     background: url(images/bt_index.png) 0 -25px no-repeat;
    

    }

    menu ul li a#page1 {

     background: url(images/bt_page1.png) 0 0 no-repeat;
    

    }

    menu ul li a#page1:hover {

     background: url(images/bt_page1.png) 0 -25px no-repeat;
    

    }

    menu ul li a#page2 {

     background: url(images/bt_page2.png) 0 0 no-repeat;
    

    }

    menu ul li a#page2:hover {

     background: url(images/bt_page2.png) 0 -25px no-repeat;
    

    } /* Styles particuliers issus de la fonction PHP pour les liens en cours */

    menu a.current_index {

     background: url(images/bt_accueil.png) 0 -25px no-repeat;
    

    }

    menu a.current_page1 {

     background: url(images/bt_page1.png) 0 -25px no-repeat;
    

    }

    menu a.current_page2 {

     background: url(images/bt_page2.png) 0 -25px no-repeat;
    

    } ——————– fin du fichier style.css : ——————–

    ——————– debut du fichier menu.php : ——————–

         &lt;a id=”accueil” href=”index.php”&gt;Accueil</a>
         &lt;a id=”page1″ href=”page1.php”&gt;page1</a>
         &lt;a id=”page2″ href=”page2.php”&gt;page2</a>
    

    ——————– fin du fichier menu.php : ——————–

    ——————– debut du fichier index.php : ——————–

        Index
    
    
    
    
    
                IndexBla bla bla ...
    

    ——————– fin du fichier index.php : ——————–

    ——————– debut du fichier page1.php : ——————–

        Page 1
    
    
    
    
    
                Page 1Bla bla bla ...
    

    ——————– fin du fichier page1.php : ——————–

    ——————– debut du fichier page2.php : ——————–

        Page 2
    
    
    
    
    
                Page 2Bla bla bla ...
    

    ——————– fin du fichier page2.php : ——————–

    Et enfin le code d’erreur obtenu lors du chargement de index.php dans firefox :

    Parse error: parse error, unexpected $ in /includes/menu.php on line 16

    Or la ligne 16 est la derniere ligne du fichier menu.php ou il est ecrit ; il n’y a pas de $.

    Je ne vois pas ou est l’erreur. J’espere avoir été clair et pas trop long.

    Si quelqu’un peut m’aider, merci d’avance.

  13. Bruno Bichet dit :

    @Anna >

    Tu dis que ton menu se présente ainsi : <a href="index.php">Accueil</a> Si c’est le cas, il manque 1) l’appel de la fonction php pour que le menu fonctionne et 2) l’identifiant id= »index » pour styler le menu en css. Je rapelle que les liens doivent se présenter sous la forme suivante : <li><a <?php currentPage(‘index‘) ?>id=’accueil’ href=’index.php’>Accueil</a></li>.

    En ce qui concerne les fichiers inclus : si rien n’empêche d’inclure en php un fichier se terminant par l’extention .html, dans ce cas, vu qu’il y a une fonction php (qui manquait dans ton cas) il est préférable que tous les fichiers possèdent l’extension .php.

    Concernant l’emplacement de la fonction php, en général, c’est bien de la placer dans un fichier à inclure, sinon, tu peux la placer entre les balises dans la balise head, comme ça tu est sûre qu’elle apparaitra dans toutes les pages de ton site ^^

  14. Bruno Bichet dit :

    @lolo > Dans les exemples que tu donnes je ne vois pas où tu places la fonction currentPage($strPage). Par ailleurs, il manque les appels de fonction dans le menu…

  15. Bruno Bichet dit :

    Je n’ai pas le temps de détailler pourquoi ça ne marchait pas, mais en gros, il y avait un problème de cascade dans les css :

    l’ID a priorité sur la classe. Du coup, pour que la classe « current_index » soit prioritaire sur l’ID « index », il ne faut pas spécifier l’imbrication des sélecteurs pour les identifiants de lien.

    En bref, j’ai mis un exemple en ligne d’après le fichier que j’ai reçu de lolo (je crois) à l’adresse http://www.css4design.com/exemples/menu-current-php/ je ferais quelque chose de mieux à l’occasion.

    Le fichier CSS est disponible à l’adresse http://www.css4design.com/exemples/menu-current-php/style.css

  16. lolo dit :

    Un grand merci à toi Bruno. Effectivement ça fonctionne. Pour info, il y avait un autre probleme : dans ta source publiée plus haut « La petite fonction PHP qui va bien » le code se termine par :

    echo ”;
    

    } } ?>

    Ca ne marche pas sauf si on remplace le guillemet après echo par des guillemets double, ou mieux par deux apostrophes, ce qui donne : echo  »; .

    Encore merci en tout cas.

  17. Bruno Bichet dit :

    En fait il s’agit de deux guillement simples, comme  » mais suivant la typo, il peut y avoir confusion ^^ Sinon, voici dossier zipé de l’exemple provisoire donné plus haut : http://www.css4design.com/exemples/menu-current-php/menu-current-php.zip

    @lolo, si tu n’y vois pas d’inconvéniant, je ferais un peu de ménage dans les tentatives d’exemples laissés en commentaires ^_^

  18. lolo dit :

    Bonne idée le ménage et encore merci.

  19. Bonjour, Je m’occupe du design d’un site internet avec comme hebergeur over-blog, savez-vous si c’est possible de mettre du php sur over-blog ? existe t-il sinon le moyen de faire la même chose que dans cet article avec seulement le css ?

  20. fluminis dit :

    Merci pour ce très bon tuto.

    Juste une question, étant donné que l’on met les li en float left, je n’arrive pas à centrer le menu dans ma page. As-tu une idée de comment on peut faire ?

  21. Bruno Bichet dit :

    @fluminis > le centrage d’élément en float est souvent problématique vu que le float extrait l’élément du flux (un peu comme position:absolute). Si le design possède une largeur fixe, il est possible de décaler l’élément parent (balise ul ou div) de x pixels vers la droite.

    Si tu veux tu peux me faire parvenir un lien avec le code html et css que tu utilise.

  22. alchimiste dit :

    merci pour ce tutorial clair et interessant

    c’est bien moins complique que ca en a l’air finalement :)

  23. elde dit :

    merci pour le zip, qui permet de comprendre le fonctionnement avec un exemple concret.

  24. Vanessa dit :

    Très bonne idée que cette petite fonction ! Un petit ajout, pour ceux qui utilisent une plateforme de type « wordpress » qui fait une réécriture de l’URL et qui affichera donc toujours « index » si on fait un $_SERVER['PHP_SELF'] Petite modification pour avoir la véritable url :

    Testé chez moi, ça a l’air de marcher nickel :)

  25. [...] avec javascript et css — Lu 3 772 foisExercice de style CSS et HTML : table vs div — Lu 3 122 foisMenu HTML et CSS, sliding doors et item current en PHP — Lu 2 815 foisGoogle de A à Z (bêta) — Lu 2 640 foisDesign CSS liquide (ou fluide) encadré [...]

  26. Baudry dit :

    N’y aurait’il pas moyen d’utiliser un array pour faire un menu dans le cadre d’un site franco anglais je m’explique un array pour chacun des éléments chap 1 chap 2 chap 3 et un switch pour afficher le non en langue anglaise [code] "#CCCC99", 1 => "#CCCC99", 2 => "#CCCC99", 3 => "#CCCC99", 4 => "#CCCC99", 5 => "#CCCC99", 6 => "#CCCC99", 7 => "#CCCC99", 8 => "#CCCC99" ); $a_menu= array( 0 => "Home", 1 => "Biographie", 2 => "C.v", 3 => "Randomizer", 4 => "Work in Progress", 5 => "Vidés", 6 => "Photographies", 7 => "Sons", 8 => "Expositions", 9 => "Publications", 10 => "Logiciels", 11 => "Abstractions", 12 => "Machines", 13 => "Artistes", 14 => "Bibliographie", 15 => "Webographie", 16 => "Discographie", 17 => "Citations", 18 => "Lexique", 19 => "Forum", 20 => "Téléchargement", 21 => "Liens", 22 => "Remerciements", 23 => "Rechercher", 24 => "intranet");

    //$dir_image= '/map_images/' ; $dir_image_map= './images/' ; $dir_site= './' ; $dir_intranet= './intranet/' ; //echo $chemin ; /paola/maquette/recherche_theme_axe-v03.php //string basename ( string path ) //int substr_count ( string haystack , string needle /// , int offset , int length ) $fichier= basename ( $chemin ); $mot = explode("_", $fichier); if ( substr_count ( $mot[ 0 ] , '.php' ) ) //si renvoie 0 c'est bon donc else { $mot = explode("-", $fichier) ; }

    switch ( $mot[ 0 ] ) { case 'Home': $a_color[ 0 ]= '#999966' ; $a_menu[ 0 ]= 'Home' ; break;

    case 'Biographie': $a_color[ 1 ]= '#999966' ; $a_menu[ 1 ]= 'Biographie' ; break; case 'C.v':

    $a_color[ 2 ]= '#999966' ;
    $a_menu[ 2 ]= 'CV' ;
    break;
    

    case 'Randomizer': $a_color[ 3 ]= '#999966' ; $a_menu[ 3 ]= 'Randomizer' ; break;

    case 'Work in Progress': $a_color[4]= '#999966' ; $a_menu[ 4 ]= 'Work in Progress' ; break;

    case 'Vidéos': $a_color[ 5 ]= '#999966' ; $a_menu[ 5 ]= 'Vidés' ; break;

    case 'Photographies': $a_color[ 6 ]= '#999966' ; $a_menu[ 6 ]= 'Photographies' ; break;

    case 'Sons': $a_color[ 7 ]= '#999966' ; $a_menu[ 7 ]= 'Sons' ; break;

    case 'Expositions': $a_color[ 8 ]= '#999966' ; $a_menu[ 8 ]= 'Expositions' ; break;

    case 'Publications': $a_color[ 9 ]= '#999966' ; $a_menu[ 9 ]= 'Publications' ; break;

    case 'Logiciels': $a_color[ 10 ]= '#999966' ; $a_menu[ 10 ]= 'Logiciels' ; break;

    case 'Abstractions': $a_color[ 11 ]= '#999966' ; $a_menu[ 11 ]= 'Abstractions' ; break;

    case 'Machines': $a_color[ 12]= '#999966' ; $a_menu[ 12 ]= 'Machines' ; break;

    case 'Artistes': $a_color[ 13]= '#999966' ; $a_menu[ 13 ]= 'Artistes' ; break;

    case 'Bibliographie': $a_color[ 14]= '#999966' ; $a_menu[ 14 ]= 'Bibliographie' ; break;

    case 'Webographie': $a_color[ 15]= '#999966' ; $a_menu[ 15 ]= 'Webographie' ; break;

    case 'Discographie': $a_color[ 16]= '#999966' ; $a_menu[ 16 ]= 'Discographie' ; break;

    case 'Citations': $a_color[ 17]= '#999966' ; $a_menu[ 17 ]= 'Citations' ; break;

    case 'Lexique': $a_color[ 18]= '#999966' ; $a_menu[ 18 ]= 'Lexique' ; break;

    case 'Forum': $a_color[ 19]= '#999966' ; $a_menu[ 19 ]= 'Forum' ; break;

    case 'T&eacuteléchargement': $a_color[ 20]= '#999966' ; $a_menu[ 20 ]= 'T&eacuteléchargement' ; break;

    case 'Liens': $a_color[ 21]= '#999966' ; $a_menu[ 21 ]= 'Liens' ; break;

    case 'Remerciements': $a_color[ 22]= '#999966' ; $a_menu[ 22 ]= 'Remerciements' ; break;

    case 'Rechercher': $a_color[ 23]= '#999966' ; $a_menu[ 23 ]= 'Rechercher' ; break;

    case 'intranet': $a_color[ 24 ]= '#999966' ; $a_menu[ 24 ]= 'intranet' ; //$dir_image= '../images/' ;/map_images $dir_image_map= '../images/' ; $dir_site= '../' ; $dir_intranet='./'; break;

    default: //home 0 $a_color[ 0 ]= '#999966' ; $a_menu[ 0 ]= 'home' ; }

    ?>

    &lt;img src="entete-02.gif" width="881" height="50" border="0" usemap="#Mapentete" /&gt;

    &nbsp; &nbsp; &lt;td align="center" bgcolor=""&gt;&lt;a class="menulink" href="home.php"&gt;</a> &lt;td align="center" bgcolor=""&gt;&lt;a class="menulink" href="randomizer";</a> &lt;td align="center" bgcolor=""&gt;&lt;a class="menulink" href="biographie"&gt;</a> &lt;td align="center" bgcolor=""&gt;&lt;a class="menulink" href="photographies.php"&gt;</a> &lt;td align="center" bgcolor=""&gt;&lt;a class="menulink" href="videos"&gt;</a> &lt;td align="center" bgcolor=""&gt;&lt;a class="menulink" href="publications_documents-v07.php"&gt;</a> &lt;td align="center" bgcolor=""&gt;&lt;a class="menulink" href="cooperations-v04.php"&gt;</a> &lt;td align="center" bgcolor=""&gt;&lt;a class="menulink" href="contact-v04.php"&gt;</a> &lt;td align="center" bgcolor=""&gt;&lt;a class="menulink" href="publications-v07.php"&gt;</a> &nbsp; &nbsp;

    &nbsp;

    [code]

    ayant plusieurs css par page je conte utiliser ce genre de chose pour mon menu est d'y intégrer une feuille de style pour le menu histoire de simplifier tous mes fichiers.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site