menu css vertical avec longue liste

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

 

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

 

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>

 

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 )

 

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 ..