Menu HTML et CSS, sliding doors et item current en PHP
Cet article est composé de plusieurs chapitres. Cliquez sur chap. pour accéder à la suite.
chap. 1 chap. 2 chap. 3 chap. 4
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 »
chap. 1 chap. 2 chap. 3 chap. 4
Cet article est composé de plusieurs chapitres. Cliquez sur chap. pour accéder à la suite.
24 participations à l'article
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.
@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 ;)
@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.
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 :)
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… ;)
Une petite démo vaut mieux qu’un long discours. Pas le temps d’essayer…dommage…
@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 ;)
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,
@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 :)
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.
C’est bizarre ce qui vient de se passer: mon menu apparait alors que j’avais copié le code html…
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 {
}
menu ul {
}
menu ul li {
} /* Style global des liens */
menu ul li a#index,
menu ul li a#page1,
menu ul li a#page2 {
} /* Style particulier pour le background des liens avec pour chacun : l’état inactif et actif */
menu ul li a#index {
}
menu ul li a#index:hover {
}
menu ul li a#page1 {
}
menu ul li a#page1:hover {
}
menu ul li a#page2 {
}
menu ul li a#page2:hover {
} /* Styles particuliers issus de la fonction PHP pour les liens en cours */
menu a.current_index {
}
menu a.current_page1 {
}
menu a.current_page2 {
} ——————– fin du fichier style.css : ——————–
——————– debut du fichier menu.php : ——————–
——————– fin du fichier menu.php : ——————–
——————– debut du fichier index.php : ——————–
——————– fin du fichier index.php : ——————–
——————– debut du fichier page1.php : ——————–
——————– fin du fichier page1.php : ——————–
——————– debut du fichier page2.php : ——————–
——————– 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.
@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 ^^
@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…
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/exem.....rrent-php/ je ferais quelque chose de mieux à l’occasion.
Le fichier CSS est disponible à l’adresse http://www.css4design.com/exem...../style.css
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 :
} } ?>
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.
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/exem.....nt-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 ^_^
Bonne idée le ménage et encore merci.
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 ?
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 ?
@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.
merci pour ce tutorial clair et interessant
c’est bien moins complique que ca en a l’air finalement :)
merci pour le zip, qui permet de comprendre le fonctionnement avec un exemple concret.
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 :)
Un Trackback
[...] 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é [...]