menu css vertical avec longue liste

seabird · 16 Juin 2010

Bonjour,

Je dois faire un choix parmi une liste d'environ une centaine de mots (liste de villes) menant à chaque fois vers un lien.
Je voulais utiliser la balise select mais je vais avoir un problème pour le référencement des liens.
Je me suis donc dirigé vers les menus css, mais vu la liste relativement longue, cela ne me parait pas gérable.

Y a t-il possibilité de développer quelque-chose du même style que la balise select ( c'est à dire avec un ascenseur ) et qui soit référençable ?
Je suis ouvert à toutes les suggestions.

Merci

SpeedAirMan · 16 Juin 2010

Il y'a qq semaines / qq mois, je suis tombé sur un menu déroulant qui déchire tout : un menu déroulant... qui défile !

Je vais essayer de remettre la main dessus...

SpeedAirMan · 16 Juin 2010

Bon... j'ai retrouvé une solution, mais ce n'était pas exactement la même que dans mon souvenir. L'exemple était légèrement différent côté design, mais le résultat fonctionnel est le même.

L'article / tutorial : Solution For Very Long Dropdown Menus
L'exemple : Example : Long Dropdowns menus

spout · 16 Juin 2010

@SpeedAirMan: Avant de tester je me suis dit que niveau ergonomie ce ne serait pas top... j'ai testé l'exemple, je suis bluffé!

seabird · 16 Juin 2010

SpeedAirMan a dit:
Bon... j'ai retrouvé une solution, mais ce n'était pas exactement la même que dans mon souvenir. L'exemple était légèrement différent côté design, mais le résultat fonctionnel est le même.

L'article / tutorial : Solution For Very Long Dropdown Menus

L'exemple : Example : Long Dropdowns menus

A excellent ça, je vais l'étudier,

Merci encore

SpeedAirMan · 16 Juin 2010

Héhé...
Si ce n'était pas ergonomique, accessible et SEO friendly, je ne l'aurai pas proposé :-D

Content que ça plaise. Vive Delicious ! (pour retrouver des liens de ce type)

Je regrette simplement que je n'en sois pas l'auteur...

Edit : l'autre exemple que j'avais trouvé en premier (et que je n'ai pas retrouvé, hélas), était mieux que celui ci d'un point de vue ergonomie et accessibilité. Il s'accordait parfaitement quelle que soit la résolution de l'utilisateur (ici ce n'est pas le cas, il faut une hauteur de fenêtre minimum).

spout · 16 Juin 2010

SpeedAirMan a dit:
Content que ça plaise. Vive Delicious ! (pour retrouver des liens de ce type)

Clair, j'ai bookmarké direct sur delicious aussi

seabird · 16 Juin 2010

A la limite j'ai pensé également à faire un truc comme ça:

Code:

<script>
function visibilite()
{
 var targetElement;
  targetElement = document.getElementById("div1" ) ;
  targetElement.style.display = "none" ;
 targetElement = document.getElementById("div1") ;
 targetElement.style.display = "" ;
}

function cacher() {
 var targetElement;
  targetElement = document.getElementById("div1" ) ;
  targetElement.style.display = "none" ;
}


window.onload = cacher;
</script>




<a  href="javascript:void(0);" onclick="javascript:visibilite();" >afficher liste villes</a> ------- <a href="javascript:void(0)" onclick="cacher()">cacher liste villes</a>
 <div id="div1">

<div id="listedeliens" style="height:200px;width:100px; overflow-y:scroll"> 
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br>
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br>  
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br>  
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br>  
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br>
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br>  
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br>  
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br> 
<a href="lien_vers_ville_A">Ville A</a><br>   
</div> 

</div>

SpeedAirMan · 16 Juin 2010

"A la limite j'ai pensé également à faire un truc comme ça:"
A voir... c'est + simple effectivement. A tester.

Je reviens sur ce sujet car, si on reprend mon exemple, je trouve qu'il comporte quelques écueils. Par exemple : on ne voit pas d'un coup d'oeil la liste complète (il faut chercher, dérouler, descendre etc.).

Alors effectivement, pourquoi pas mettre la liste complète accessible (et visible) "on hover" ou "on click" dans le menu ou dans un bouton situé dans une sidebar ?
Exemple illustré ici avec un cas pratique :

Tutorial : Mega Drop Down Menus w/ CSS & jQuery
Exemple : Mega Dropdown Menu by Soh Tanaka

Ensuite, 2 choses :
1. Tu pourrais diviser / compartimenter / catégoriser ces villes par régions (ainsi : + facilement repérable). Dans l'exemple que j'ai présenté + haut, j'aurai plutôt vu les villes triées par ordre alphabétique
2. Tu pourras également choisir de ne pas toutes les afficher. 100 villes, c'est beaucoup ! Il se peut que 25 villes représentent 90% du choix des visiteurs de ton site (il faut regarder les stats pour ça). Tu n'afficherais alors que ces 25 villes et indiquerait un lien "voir toutes les villes" dans le menu.

seabird · 16 Juin 2010

Les villes sont déjà rangées par département et par ordre alphabétique. Maintenant n'afficher que les 25 villes les plus importantes pourquoi pas ...
Je pense que je vais voir dans un premier temps ma méthode qui a l'air de fonctionner ( à voir )

seabird · 18 Juin 2010

Salut,

Bon voila en gros comment je fais, cela à l'air de fonctionner.

Code:

<script type="text/javascript">

function cacher() {
 var targetElement;
  targetElement = document.getElementById("div1" ) ;
  targetElement.style.display = "none" ;
}

function ouvrir_fermer_liste_villes() 
                    { 
                    var targetElement; 
                    targetElement = document.getElementById("div1") ; 
                    if (targetElement.style.display == "none") 
                    { 
                    targetElement.style.display = "" ; 
			document.getElementById("img").src = "theme/fermer-liste.jpg";
                    } else { 
                    targetElement.style.display = "none" ; 
			document.getElementById("img").src = "theme/select-ville.jpg";
                    } 
                    }

window.onload = cacher;
</script>

<a  href="javascript:void(0);"  onclick="javascript:ouvrir_fermer_liste_villes();"   ><img src="theme/select-ville.jpg" id="img"   style="border:0px;" alt="sélection de la ville"  /></a>
					<div id="div1">
						<div  style="height:200px;width:200px; overflow-y:scroll" class="select-ville"> 

				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				<li><a href="#"  >ville</a></li> 
				
				
				</div> 

						</div>

J'aimerais maintenant rajouter dans ma fonction ouvrir_fermer_liste_villes() une image de survol différente suivant que la liste soit développée ou non. Mais j'ai un problème de syntaxe. J'ai un doute.
Au début j'avais ecrit par exemple: document.getElementById("img").onmouseover.src = "theme/liste-ville-survol.jpg"; mais cela n'a pas l'air de fonctionner.
Quelle est la syntaxe exacte ?

Merci

Edit: Je pense avoir trouvé:
J'ai rajouté dans mes 2 conditions:

Code:

document.getElementById("lien").innerHTML = '<img src="theme/select-ville.jpg" id="img"   style="border:0px;" onMouseOver="img.src=\'theme/liste-ville-survol.jpg\' " onMouseOut="img.src=\'theme/fermer-liste.jpg\' " alt="ferme la liste"  />';

et

Code:

document.getElementById("lien").innerHTML = '<img src="theme/select-ville.jpg" id="img"   style="border:0px;" onMouseOver="img.src=\'theme/liste-ville-survol.jpg\' " onMouseOut="img.src=\'theme/select-ville.jpg\' " alt="sélection de la ville"  />';

Ca à l'air d'être bon. Il y a peut être plus simple mais bon ..