3246 sujets

Critiques de vos sites: code et design

Stratégie de menu

Bonjour,

- Je souhaite mettre un menu horizontal déroulant en haut de page, pour toutes les pages du site (graphiquement simple: type rollover texte en css).
- Mes pages sont en html (statique).
- Je souhaite que ce menu soit accessible.
- Je souhaite maintenir le menu depuis un seul fichier.
- Je souhaite afficher des images juste sous mes menus (ce qui pose parfois des problèmes suivant les navigateurs -gestion baroque du z-index- )
- Le menu est là pour présenter des exemples d'articles récents dans différentes parties du site, il doit évoluer regulièrement. ( La navigation principale se fait avec des liens texte. toutes les pages sont accessibles depuis la navigation principale.)

Je ne pense pas pouvoir satisfaire toutes les contrainte Smiley bawling

les solutions que j'envisage : Smiley biggrin
1) utiliser un menus alsa (en exportant tout ce que je peux (style et js) pour alléger la page) mais bonjour la mise à jour !
2) utiliser un menu javascript tout externe

Qu'en pensez vous ?
petite précision, un menu 100% Javascript n'est pas du tout accessible. Le mieux serait le menu à base de listes ( UL ) et avec une petite partie de Javascript ( pour fonctionnement sous IE ).
Modérateur
En effet, l'idée d'une liste UL en utilisant du CSS pour faire apparaître et disparaître les sous-menus est une solution, ainsi qu'un Javascript pour que ca fonctionne aussi dans IE.

Je voulais cependant montrer la réserve que j'ai avec cette affirmation :

anthony a écrit :

petite précision, un menu 100% Javascript n'est pas du tout accessible


Je n'en suis pas convaincu. J'utilise, dans l'un des sites que j'ai développé, un menu principal déroulant 100% en Javascript. Dans une balise <noscript></noscript>, j'ai ajouté les éléments principaux du menu, et ces liens pointent vers des pages intermédiaires qui font office de sous-menu. J'ai aussi écris en dur, en bas de page, les liens principaux du menu et un lien vers un plan du site écrit aussi en dur. Je crois donc que c'est un peu faux de dire qu'un menu 100% Javascript est innaccessible. Tout dépend si les mesures pour ceux n'ayant pas Javascript ont été mise en place ou non.
Merkel a écrit :
Je n'en suis pas convaincu. J'utilise, dans l'un des sites que j'ai développé, un menu principal déroulant 100% en Javascript. Dans une balise <noscript></noscript>, j'ai ajouté les éléments principaux du menu, et ces liens pointent vers des pages intermédiaires qui font office de sous-menu. J'ai aussi écris en dur, en bas de page, les liens principaux du menu et un lien vers un plan du site écrit aussi en dur. Je crois donc que c'est un peu faux de dire qu'un menu 100% Javascript est innaccessible. Tout dépend si les mesures pour ceux n'ayant pas Javascript ont été mise en place ou non.

je ne suis pas contre, mais le seul problème dans ce cas là est :

La duplication du menu
Modérateur
Est-ce réellement un problème qu'il soit dupliqué ? J'en doute. Smiley smile C'est quand même juste les liens des zones principales qui sont dupliquées.
Modérateur
laurent2a, pour combler le critère que tu veux que tout soit facilement modifiable via un seul fichier, sans langage côté serveur, sans utiliser un menu 100% JS, tu peux toujours utiliser des logiciels de Trouver/Remplacer dans le dossier contenant les pages de ton site. Tu écris en dur ton menu et sous-menu, dans chaque page, et le jour que tu dois faire une modification, tu recherche le code de ton menu, et tu le remplace automatiquement par le nouveau code, dans tous les fichiers.

Sinon, si t'as Dreamweaver (MX), tu peux utiliser le système de template ou librairie. J'ignore si ca l'existe dans les autres versions.
Merkel a écrit :
Je n'en suis pas convaincu. J'utilise, dans l'un des sites que j'ai développé, un menu principal déroulant 100% en Javascript. Dans une balise <noscript></noscript>, j'ai ajouté les éléments principaux du menu, et ces liens pointent vers des pages intermédiaires qui font office de sous-menu. J'ai aussi écris en dur, en bas de page, les liens principaux du menu et un lien vers un plan du site écrit aussi en dur. Je crois donc que c'est un peu faux de dire qu'un menu 100% Javascript est innaccessible. Tout dépend si les mesures pour ceux n'ayant pas Javascript ont été mise en place ou non.


Pour moi tu viens juste de fournir une preuve supplémentaire qu'un menu 100% js n'est pas accessible puisque tu as du cloner les fonctions de ton menu en utilisant des méthodes standards/classiques afin de rendre la navigation accessible.

Ce n'est pas ton menu JS qui est accessible dans l'exemple que tu donne mais bien les alternatives proposées a côté.
Modifié par jb_gfx (24 Feb 2005 - 00:32)
Modérateur
Je ne disais pas non plus que le menu Javascript lui-même était accessible, mais que ca ne nuisait pas à l'accessibilité du site. Mon intervention était surtout pour enlever cette hantise que les gens ont souvent en entendant parler de menu 100% Javascript, comme si le fait d'utiliser ce genre de menu rendait le site innacessible.

J'ai aussi précisé ceci à la fin :

unhommemusclé a écrit :

Je crois donc que c'est un peu faux de dire qu'un menu 100% Javascript est innaccessible. Tout dépend si les mesures pour ceux n'ayant pas Javascript ont été mise en place ou non.


J'aurais dut préciser que je parlais de l'accessibilité globale du site, et non que du menu, mon erreur. Smiley smile

D'un autre côté, juste l'utilisation de menus en cascade est un sujet controversé au niveau de l'accessibilité. Aussi bien essayer d'éviter ce genre de menu dans la mesure du possible, qu'il soit fait en JS ou en (x)html/CSS. Smiley smile Mais ça, c'est une autre histoire...
Tout d'abord merci pour vos réponses et pour leur qualité Smiley biggrin

Effectivement l'article sur pompage.net est très intéressant : solution simple, complète (menu extansible), compatible, légère et expliquée pas à pas(donc facilement adaptable). Smiley cligne

Pour ce qui est de la mise à jour, la solution chercher/remplacer me parait très satifasante. Smiley cligne

Je pense que c'est cette solution que je vais retenir. Smiley lol

Pourtant une question me tarabuste : Smiley sweatdrop

Stéphan n'aime pas les schtroumpfs déroulants et Stéphan n'a pas l'air d'être bête... et Merkel à l'air d'être plutôt d'accord... Smiley rolleyes

Ce qui me plait avec les menus déroulant : Smiley smile
- C'est un moyen de navigation auquel les utilisateurs sont habitués
- C'est un moyen disponible sur chaque page
- C'est un moyen qui permet de présenter rapidement (sans changer de page) de nombreux aspects de la diversité d'un site.

Alors qu'est ce qui pose pose problème ?
Modifié par laurent2a (24 Feb 2005 - 09:12)
Bonjour à toutes et tous Smiley smile

Ben ! on en voit des choses avec les menus déroulants... et même que des fois on voit rien du tout Smiley decu Il y en a beaucoup qui sont illisibles avec Firefox...

Ce que je n'aime pas dans les menus déroulants :

- Souvent ils ne se replient pas lorsqu'on les a survolés.
- Souvent ils cachent une partie des infos de la pages.
- Je trouve que ça complique la navigation, souvent trop de choix.
- Qu'on utilise javascript ou css, lorsque l'option est désactivée, on se retrouve avec une tripotée énorme de liens.

En gros, lorsqu'un site offre une alternative au menu déroulant, je prend l'alternative Smiley cligne
Modérateur
laurent2a a écrit :

Stéphan n'aime pas les schtroumpfs déroulants et Stéphan n'a pas l'air d'être bête... et Merkel à l'air d'être plutôt d'accord...


En fait, je suis d'accord à condition qu'il n'y a pas d'autres choix. Par exemple, lorsque tu as peu d'espace pour mettre ton menu et que tu as vraiment beaucoup de sections et sous-sections dans le site. Je n'ai pas lu beaucoup de débats sur les problèmes d'accessibilité avec l'utilisation d'un menu déroulant (JS ou pure CSS). Quelqu'un a des liens, je suis un peu paresseux ce matin...

Les points cités par Dominique résume bien, sauf le premier point que cela dépend évidemment de la conception du menu. Celui que j'utilise ne souffre pas de ce problème. Pour ce qui est de cacher une partie des infos, eh bien, est-ce bien grave lorsqu'on sait que le menu se déroulera lorsque l'utilisateur voudra quitter le document en cours, donc qu'il n'a plus besoin de voir le contenu. Peut-être que je dis une connerie ici, mais ca me semble logique.

Bref, je ne suis ni pour ni contre pour le moment. J'attends d'en lire plus là-dessus.
Salut !

Je propose une "alternative" au menu déroulant (hover), le menu déroulant au clic. Il nécessite du PHP (génération dynamique du menu (classes)), mais est en CSS pur. Non-invasif.

Je vous laisse juger. (Privé propose un déroulement)

@+, HoPHP

P.S. si c'est une énorme ânerie, désolé Smiley murf
Modifié par HoPHP (24 Feb 2005 - 14:23)
Merkel a écrit :

En fait, je suis d'accord à condition qu'il n'y a pas d'autres choix. Par exemple, lorsque tu as peu d'espace pour mettre ton menu et que tu as vraiment beaucoup de sections et sous-sections dans le site. Je n'ai pas lu beaucoup de débats sur les problèmes d'accessibilité avec l'utilisation d'un menu déroulant (JS ou pure CSS). Quelqu'un a des liens, je suis un peu paresseux ce matin...

............

Bref, je ne suis ni pour ni contre pour le moment. J'attends d'en lire plus là-dessus.


Ben ! on en parle un peu dans cet échange sur la navigation :
http://forum.alsacreations.com/topic.php?fid=14&tid=1467 Smiley cligne
Modifié par dominique (24 Feb 2005 - 14:29)
a écrit :
laurent2a a écrit:
Ce qui me plait avec les menus déroulant :
- C'est un moyen de navigation auquel les utilisateurs sont habitués
- C'est un moyen disponible sur chaque page
- C'est un moyen qui permet de présenter rapidement (sans changer de page) de nombreux aspects de la diversité d'un site.

Alors qu'est ce qui pose pose problème ?

1° Les menus logiciels sont fortement standardisés: les listes de commandes communes à tous les logiciels sont aux extémités du menu, tandis que les commandes spécifiques à un logiciel sont au entre de celui-ci. Un menu commence toujhours par les intitulés "Fichier", "Edition", et se termine par l'intitulé "Aide" ou "?". Les menus de sites web n'ont pas cette standardisation.

2° Les menus de page web n'ont pas le même comportement que les menus de logiciels: si le pointeur en sort, notamment en suivant une trajectoire en oblique pour atteindre une option de sous-menu, le menu disparait, et il faut le redérouler, ce qui n'est pas le cas des menus de logiciels. L'utilisation des menus de pages web est en fait très contraignante pour les utilisateurs, car ceux-ci imposent des déplacements exclusivement verticaux et horizontaux du pointeur, ce qui va à l'encontre des tant des réactions spontanées des utilisateurs que des habitudes acquises avec les menus de logiciels.

3° S'il n'y a pas une forte concordance logique entre le titre des menus et les options de ceux-ci, l'utilisateur devra dérouler plusieurs menus pour accéder à ce qu'il cherche (exemples logiciels classiques: dans Word, l'option "Mise en page" qui se trouve dans le menu "Fichier" et non dans le menu "Format"; dans Photoshop, les "Préférences" qui se trouvent dans le menu "Edition").

4° Le visiteur n'a jamais sous les yeux l'ensemble des intitulés des menus du site ou relatifs à une page, sauf dans le second cas, pendant le bref moment où le menu est affiché, ce qui freine la mémorisation de ces intitulés par le visiteur et ralentit son accès à l'information qu'il recherche, puisqu'il doit à chaque fois dérouler des menus.

5° Les menus peuvent présenter un trop grand nombre d'options, ce qui ralentit l'accès à l'information recherchée par le visiteur.

Il est possible de résoudre le problème du trop grand nombre d'options en réalisant des menus avec des menus secondaires ou des menus à sections variables/contextuelle selon la page.

Exemple sur zdnet.fr/builder : http://www.zdnet.fr/builder/index.htm
Modifié par thierry (27 Feb 2005 - 15:46)
thierry a écrit :
Il est possible de résoudre le problème du trop grand nombre d'options en réalisant des menus avec des menus secondaires ou des menus à sections variables/contextuelle selon la page.

Exemple sur zdnet.fr/builder : http://www.zdnet.fr/builder/index.htm


J'aime cette dernière solution car elle permet d'une pierre 2 coups :

1/Une lisibilité optimale du contenu du site : savoir où on peut aller (sans les mains !)
2/Le repérage permanent : savoir où on est
dominique a écrit :


Ben ! on en parle un peu dans cet échange sur la navigation :
http://forum.alsacreations.com/topic.php?fid=14&tid=1467 Smiley cligne


Après avoir lu ce sujet, il ressort qu'un plan de site est une bonne solution.
Comme c'est fastidieux j'ai essayé de voir s'il n'y avait pas moyen de le générer automatiquement.
J'ai fini par trouver le script suivant :

<?php
/* Sitemap version 2.1 (C) copyright Metalhead 2004
Sitemap home:  http://www.metalhead.ws/phpbin/
 
This script is released under the terms of the GNU General Public License. A copy of the GPL is included with this script. */

/* User configuration */
$showsize = 1; /* Show size of each file, 1 for yes, 0 for no. */

/* Array with file types to display and the pictures to use.
Syntax: $display['filetype'] = "picture"; */
$display['php'] = "php.gif";
$display['html'] = "html.gif";
$display['htm'] = "html.gif";
$display['shtml'] = "html.gif";
$sflies="";

/* Array with directories to exclude.
Syntax: $excludedir[] = "directory"; */
$excludedir[] = "temp";
$excludedir[] = "tmp";

/* Array with files to exclude. */
$excludefile[] = "index.php";

?>

<html>
<head>
<title>Sitemap</title>
</head>

<body>

<b>Sitemap</b><p>

<?php

$stime = gettimeofday();

/* some preliminaries... */
$root = getcwd();

$pre = explode("/", $_SERVER['REQUEST_URI']);
array_pop($pre);
$prefix = join("/", $pre);

/* Uncomment the 2 lines below to create a tree of all files and directories on your webserver if the script
 * is in a subdirectory */
//$root = str_replace($prefix, "", $root);
//$prefix = "";

$root .= "/";

/* Display server name and directory */
echo "<table cellspacing=0 cellpadding=0 border=0>\n";
echo "<tr><td><img align=absmiddle src=server.gif>  http://".$_SERVER['SERVER_NAME'];
 
echo "$prefix/";
echo "</td></tr><tr><td><img align=absmiddle src=vertical.gif></td></tr>\n";

function get_extension($name) {
	$array = explode(".", $name);
	$retval = strtolower(array_pop($array));
	return $retval;
}

/* Recursion, here we go.. */
function list_dir($chdir) {
	/* some globals, some cleaning */
	global $root, $prefix, $showsize, $display, $excludedir, $excludefile;
	unset($sdirs);
	unset($sfiles);
	chdir($chdir);
	$sfiles=""; /* initialisation ajoutée au script originale pour éviter un message d'erreur */
	$sdirs=""; /* initialisation ajoutée au script originale pour éviter un message d'erreur */

	$self = basename($_SERVER['PHP_SELF']);

	/* open current directory */
	$handle = opendir('.');
	/* read directory. If the item is a directory, place it in $sdirs, if it's a filetype we want
	 * and not this file, put it in $sfiles */
	while ($file = readdir($handle))
	{
		if(is_dir($file) && $file != "." && $file != ".." && !in_array($file, $excludedir))
		{ $sdirs[] = $file; }
		elseif(is_file($file) && $file != "$self" && array_key_exists(get_extension($file), $display)
			&& !in_array($file, $excludefile))
		{ $sfiles[] = $file; }
	}
		  
	/* count the slashes to determine how deep we're in the directory tree and how many
	 * nice bars we need to add */
	$dir = getcwd();
	$dir1 = str_replace($root, "", $dir."/");
	$count = substr_count($dir1, "/") + substr_count($dir1, "\\");
		  	  
	/* display directory names and recursively list all of them */
	if(is_array($sdirs)) {
		sort($sdirs);
		reset($sdirs);
			 
		for($y=0; $y<sizeof($sdirs); $y++) {
			echo "<tr><td>";
			for($z=1; $z<=$count; $z++)
		  	{ echo "<img align=absmiddle src=vertical.gif>   "; }
			if(is_array($sfiles))
			{ echo "<img align=absmiddle src=verhor.gif>"; }
			else
			{ echo "<img align=absmiddle src=verhor1.gif>"; }
			echo "<img align=absmiddle src=folder.gif> <a
				href=\"http://".$_SERVER['SERVER_NAME']."$prefix/$dir1$sdirs[$y]\">$sdirs[$y]</a>";
			list_dir($dir."/".$sdirs[$y]);
		}
	}
		 		  
	chdir($chdir);
		  
	/* iterate through the array of files and display them */
	if(is_array($sfiles)) {
		sort($sfiles);
		reset($sfiles);
				 
		$sizeof = sizeof($sfiles);
			 
		/* what file types shall be displayed? */
		for($y=0; $y<$sizeof; $y++) {
			echo "<tr><td>";
			for($z=1; $z<=$count; $z++)
			{ echo "<img align=absmiddle src=vertical.gif>   "; }
			if($y == ($sizeof -1))
			{ echo "<img align=absmiddle src=verhor1.gif>"; }
			else
			{ echo "<img align=absmiddle src=verhor.gif>"; }
			echo "<img align=absmiddle src=\"";
			echo $display[get_extension($sfiles[$y])];
			echo "\"> ";
			echo "<a href=\"http://".$_SERVER['SERVER_NAME']."$prefix/$dir1$sfiles[$y]\">$sfiles[$y]</a>";
			if($showsize) {
				$fsize = @filesize($sfiles[$y])/1024;
				printf(" (%.2f kB)", $fsize);
			}
			echo "</td></tr>";

			echo "<tr><td>";
			
		}
		echo "<tr><td>";
		for($z=1; $z<=$count; $z++)
		{ echo "<img align=absmiddle src=vertical.gif>   "; }
		echo "</td></tr>\n"; 
	}
}

list_dir($root);

echo "</table>\n";

/* How long did that need..? */
$ftime = gettimeofday();
$time = round(($ftime[sec] + $ftime[usec] / 1000000) - ($stime[sec] + $stime[usec] / 1000000), 5);
echo "<center>This page was generated in $time seconds.</center>\n";

?>

</body>
</html>


Ce script génère un magnifique plan de site, le seul problème est que le résultat est sous forme tabulaire... est ce que quelqu'un connait un pendant en css ?
Modifié par laurent2a (01 Mar 2005 - 08:53)
Sujet clos
Aller à