Accueil Boite à Outils Scripts PHP Menu de navigation sans JavaScript

Publié le : 23 décembre 2004
Imprimer Imprimer cet article

Auteur :
Alain Sichel

Alain Sichel
Menu de navigation sans JavaScript

J’utilise pour le site du CYES un menu de navigation inspiré de l’article Faire un menu dynamique ouvert et accessible sur OpenWeb. J’en suis satisfait, mais son affichage est peu esthétique sur les vieux navigateurs (non compatibles CSS 2) de même que si JavaScript est désactivé. J’ai donc mis au point le menu de navigation décrit ci-dessous, compatible avec tout type de navigateur et sans Javascript.

Détection du navigateur

Cette navigation sans JavaScript par menus déroulants s’affiche d’emblée si un ancien navigateur est détecté (comme Microsoft Internet Explorer 4 ou Netscape 4). Pour cela, au chaque page du site contient :

if(!isset($_COOKIE["navigateur"])) { include("/navigateurs.php"); }

Explication : si on ne retrouve pas la variable "navigateur" inscrite dans un cookie, on charge le script "navigateurs.php". Ce script contient :

<?php
function inAgent($agent) {
        global $HTTP_USER_AGENT;
        $notAgent = strpos($HTTP_USER_AGENT,$agent) === false;
        return !$notAgent;
        }

if (inAgent('iCab')) { $browser = 'iCab';
} elseif (inAgent('Opera')) { if (inAgent('Opera 7')) { $browser = 'Opera7';
} else $browser = "Opera";
} elseif (inAgent('MSIE 5') || inAgent('MSIE 6')) {
 $browser = 'ie5';
} elseif (inAgent('MSIE 4')) { $browser = 'ie4';
} elseif (!inAgent('MSIE')) {
if (inAgent('Mozilla/5') || inAgent('Mozilla/6')) {
 $browser = 'ns6';
} elseif (inAgent('Mozilla/4') || inAgent('Mozilla/3')) {
 $navigateur = 'ns4';
} else $browser = "autre";
}

if (($browser == 'Opera') || ($browser == 'iCab') || ($browser == 'ie4')) {
$navigateur = 'vieux';
} elseif (($browser == 'Opera7') || ($browser == 'ie5') || ($browser == 'ns6') || ($browser == 'autre')) {
$navigateur = 'recent';
}

setcookie('navigateur', $navigateur, time()+31536000,'/','www.cyes.info','0');
?>

Les informations sur le navigateur utilisé sont récupérées par $HTTP_USER_AGENT [1]. Ce script repère le navigateur utilisé et le classe en "vieux" ou "ns4" [2] (anciens navigateurs non conformes CSS 2) ou "recent". Ce classement est mémorisé dans un cookie ce qui évide de recommencer à chaque chargement de page [3].

Pour afficher le menu de navigation adapté au navigateur, chaque page du site contient le script :

<?php if ($navigateur == 'recent') { include("menu.php"); }
if (($navigateur == 'vieux') || ($navigateur == 'ns4') { include("menu2.php"); }
?>

Evidemment, "menu.php" contient le menu de navigation nécessitant CSS 2 et JavaScript, "menu2.php" permet d’afficher les menus déroulants fonctionnant sans JavaScript.

Déclenchement manuel du menu

J’ai également voulu faire un déclenchement manuel de ce menu de navigation destiné aux visiteurs qui ont désactivé Javascript. Pour cela, j’ai ajouté au menu normal :

<noscript>Ce menu de navigation s'affiche en bas de page parce que JavaScript a été désactivé. Il suffit de le réactiver pour avoir un affichage normal, vous pouvez aussi choisir un autre menu de navigation sur la page <a href="/aide/javascript.php">Aide JavaScript</a>.</noscript>

Cet avertissement qui n’est visible que si on désactive Javascript, propose l’autre menu de navigation qui peut être mis en place à partir de la page Aide JavaScript :

Menu par défaut utilisant Javascript
Menu fonctionnant sans Javascript

Voici son code [4] :

<table width="50%" cellpadding="6" border="1">
         <tr>
           <td><form action="/choix_menu.php" method="post" id="choix"><? if ($navigateur == "recent") { $re = 'checked="checked"';}
        elseif (($navigateur == "vieux") || ($navigateur == "ns4")) { $vi = 'checked="checked"';} ?>
       <input type="radio" name="choix" value="recent" <?=$re ?> /> Menu par défaut utilisant Javascript<br />
       <input type="radio" name="choix" value="vieux" <?=$vi ?> /> Menu fonctionnant sans Javascript<br />
       <br />

       <center><input type="submit" value="Envoi" />
       </center></form></td>
       </tr>
       </table></center>

Explications : Ce code lit la variable $navigateur et sélectionne le bouton radio correspondant (a priori "recent"). <?=$re ?> est une écriture simplifiée pour <?php echo $re; ?> c’est-à-dire : imprimer la valeur de la variable $re. Le formulaire permet le changement de cette variable en "vieux" afin d’utiliser le menu de navigation sans JavaScript. Voici le code du fichier "choix_menu.php" situé à la racine du site qui permet l’enregistrement dans un cookie de la variable $navigateur :

<?php
setcookie('navigateur', $choix, time()+31536000,'/','www.cyes.info','0');
header("Location: $HTTP_REFERER");
?>

Présentation du menu

Voyons maintenant à quoi ressemble ce menu de navigation sans JavaScript :

  

Le premier menu déroulant permet de sélectionner une partie du site dont les différents éléments sont indiqués par le deuxième menu déroulant. La sélection d’un élément dans le menu déroulant ne suffit pas, il faut faire "Retour" ou cliquer sur le bouton "Afficher" (pour afficher le menu correspondant à la partie choisie) ou "Envoi" (pour se rendre à la rubrique sélectionnée), ceci afin de faciliter la navigation des personnes n’utilisant pas de souris [5].

Fonctionnement du premier menu

Voici son code :

<form action="<?=$PHP_SELF ?>" method="post" name="choix">
     <div align="right">
 <select name="choix">
   <option>Les différentes parties du site</option>
   <option>-------------------------------------</option>
   <option>Voir les rubriques de la partie :</option>
   <option value="cyes">&nbsp;- Le CYES</option>
   <option value="actualite">&nbsp;- Actualit&eacute;</option>
   <option value="cirdd">&nbsp;- Le CIRDD 78</option>
   <option value="themes">&nbsp;- Approche thématique</option>
   <option value="partenaires">&nbsp;- Partenaires</option>
   <option value="liens">&nbsp;- Liens</option>
   <option value="professsionnels">&nbsp;- Professionnels</option>
   <option value="aide">&nbsp;- Aide</option>
 </select>
 <input type="submit" value="Afficher" alt="Afficher" />
     </div>
   </form>

<?=$PHP_SELF ?> indique l’adresse de la page en cours. Pour afficher les rubrique d’une partie du site, on sélectionne cette partie et on clique sur "Afficher". Cette valeur est transmise et récupérée par le deuxième menu.

Fonctionnement du deuxième menu

Voici son code :

<form action="" method="post" name="page">
<select name="page"><?php
$aide = <<<AID
<option>Rubriques de la partie Aide</option>
<option>---------------------------------</option>
<option>Aller &agrave; la rubrique :</option>
<option value="http://www.cyes.info/aide/aide_sommaire.php">&nbsp;- Sommaire de la partie Aide</option>
<option value="http://www.cyes.info/aide/aide_sommaire.php#site">&nbsp;- Aide à l'utilisation du site</option>
<option value="http://www.cyes.info/aide/services.php">&nbsp;- Pages de Services</option>
<option value="http://www.cyes.info/aide/utiliser-internet.php">&nbsp;- Utiliser Internet</option>
<option value="http://www.cyes.info/aide/webmestres-presentation.php">&nbsp;- Pages pour webmestres</option>
AID;

if(!isset($_POST["choix"])) {
        $choix = dirname($PHP_SELF);
        $choix = substr($choix,1);
        if (ereg("actualite", $choix)) { $choix = "actualite"; }
        elseif (ereg("cirdd", $choix)) { $choix = "cirdd"; }
        elseif (ereg("themes", $choix)) { $choix = "themes"; }
        elseif (ereg("partenaires", $choix)) { $choix = "partenaires"; }
        elseif (ereg("professionnels", $choix)) { $choix = "professionnels"; }
        elseif (ereg("aide", $choix)) { $choix = "aide"; }
        else { $choix = "cyes"; }
} else {
        $choix = $_POST["choix"];
        }
if (($choix=="actualite") || ($choix=="cirdd") || ($choix=="themes") || ($choix=="partenaires") || ($choix=="professionnels") || ($choix=="aide")) {
echo $$choix;
} else {
echo $cyes;
} ?></select>
<input value="Envoi" alt="Envoi" type="submit" /></form>

Comme tout menu déroulant, celui-ci est dans un formulaire :

<form action="" method="post" name="page">
<select name="page">

Immédiatement commence un script PHP qui contient les lignes de codes à afficher selon la partie du site sélectionnée. Il y a donc une variable pour chaque partie du site, mais pour simplifier la présentation je n’ai écrit que la partie "Aide". [6] Les pages et rubriques sont indiqués avec des liens absolus.

Voyons maintenant comment choisir la partie du site à afficher pour le deuxième menu :

if(!isset($_POST["choix"])) {
        $choix = dirname($PHP_SELF);
        $choix = substr($choix,1);
        if (ereg("actualite", $choix)) { $choix = "actualite"; }
        elseif (ereg("cirdd", $choix)) { $choix = "cirdd"; }
        (...)
        elseif (ereg("aide", $choix)) { $choix = "aide"; }
        else { $choix = "cyes"; }
}

S’il n’y a pas de valeur pour $choix transmis en "POST", le script découpe l’URL : dirname($PHP_SELF); pour reconnaître dans quel répertoire du site se trouve la page courante et permettre d’afficher le menu correspondant. Par défaut la partie "CYES" est proposée, cela permet d’afficher une partie même si on ne retrouve pas de répertoire (cas d’une page à la racine du site).

else {
        $choix = $_POST["choix"];
        }

Par contre si une valeur $choix a été transmise en "POST" (suite à l’envoi du premier menu déroulant), on récupère la valeur.

if (($choix=="actualite") || ($choix=="cirdd") || ($choix=="themes") || ($choix=="partenaires") || ($choix=="professsionnels") || ($choix=="aide")) {
echo $$choix;
} else {
echo $cyes;
}

On vérifie que la valeur $choix est bien une des valeurs autorisées et on affiche le menu déroulant de la partie choisie. Par défaut c’est le menu de la partie "CYES" qui sera présenté.

Affichage de la page choisie

Après sélection d’une page, le deuxième menu déroulant envoie l’URL de la page choisie. Cette valeur est transmise et récupérée grâce au code suivant en haut de chaque page :

- Pour fonctionner ce script PHP doit être en haut de la page, avant toute balise HTML.

- La première ligne : if(isset($_POST["page"])) { $rubrique = ($_POST["page"]); vérifie l’existence de la variable $rubrique transmise en "POST".

- La deuxième ligne vérifie la syntaxe de $rubrique : cette URL doit commencer par http:// et finir par .php

- if ($navigateur == 'ns4') { echo "<meta http-equiv=\"refresh\" content=\"0; URL=$ret[0]\">"; } Si le nagigateur est Netscape 4 on utilise une redirection en HTML, en effet la fonction header() ne fonctionne pas avec Netscape ; $ret[0] indique la valeur de l’URL choisie après le contrôle par la fonction preg_match()

- Pour tous les autres navigateurs, on utilise la fonction header() :

else { header("Location:$ret[0]");
exit(); }

- Si quelque chose n’a pas fonctionné, on sort du script : else {exit(); }

- La dernière ligne : if(!isset($_COOKIE["navigateur"])) { include('/navigateurs.php'); } correspond à la détection du navigateur, vue au début de l’article.

Avertissement

Si vous utilisez Dreamweaver et des modèles de pages, vous risquez de rencontrer des diffficultés avec ce script : quand vous mettez à jour un modèle, les pages dérivées de ce modèle sont mises à jour, mais Dreamweaver modifie le code en haut des pages (avant les balises HTML).

Pour éviter cet ennui, utilisez plutôt la fonction "rechercher/remplacer dans toutes les pages du site" pour mettre à jour vos pages.

 

[1] Et par $_SERVER["HTTP_USER_AGENT"] depuis PHP 4. Pour plus d’information, voir la page Les variables prédéfinies.

[2] Le script distingue Netscape 4 des autres anciens navigateurs en raison de son comportement différent comme nous le verrons plus loin dans l’article.

[3] On peut aller plus loin dans la reconnaissance du navigateur et du système utilisé, c’est ce que j’ai fait pour la page Navigateurs modernes conformes aux standards.

[4] Pour simplifier la lecture du code, les éléments de style uniquement esthétiques ne sont pas indiqués (bordure dorée, couleur de fond, effets de couleur sur le bouton "Envoi").

[5] Voir à ce sujet l’article Pan sur les doigts sur OpenWeb.

[6] Pour faciliter l’écriture, j’ai utilisé la forme :

$variable = <<<ABC
toutes les lignes nécessaires
ABC;

Cette forme facilite l’écriture quand une variable contient plusieurs lignes de code, la délimitation se fait comme indiqué avec 3 lettres capitales, les mêmes au début et à la fin (ne pas oublier le " ;" à la fin), et il n’y a pas à s’inquiéter des quotes simples ou doubles (’ ").




Cliquez ici pour réagir à cet article

 Imprimer Imprimer cet article


Réactions à l'article :