menu css vertical avec longue liste

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par seabird, 16 Juin 2010.

  1. seabird
    seabird WRInaute occasionnel
    Inscrit:
    1 Décembre 2003
    Messages:
    322
    J'aime reçus:
    0
    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
     
  2. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 450
    J'aime reçus:
    0
    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...
     
  3. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 450
    J'aime reçus:
    0
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 696
    J'aime reçus:
    177
    @SpeedAirMan: Avant de tester je me suis dit que niveau ergonomie ce ne serait pas top... j'ai testé l'exemple, je suis bluffé!
     
  5. seabird
    seabird WRInaute occasionnel
    Inscrit:
    1 Décembre 2003
    Messages:
    322
    J'aime reçus:
    0

    A excellent ça, je vais l'étudier, :D
    Merci encore
     
  6. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 450
    J'aime reçus:
    0
    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... :p


    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).
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 696
    J'aime reçus:
    177
    Clair, j'ai bookmarké direct sur delicious aussi ;)
     
  8. seabird
    seabird WRInaute occasionnel
    Inscrit:
    1 Décembre 2003
    Messages:
    322
    J'aime reçus:
    0
    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>
    
    
     
  9. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 450
    J'aime reçus:
    0
    "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 :
    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.
     
  10. seabird
    seabird WRInaute occasionnel
    Inscrit:
    1 Décembre 2003
    Messages:
    322
    J'aime reçus:
    0
    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 )
     
  11. seabird
    seabird WRInaute occasionnel
    Inscrit:
    1 Décembre 2003
    Messages:
    322
    J'aime reçus:
    0
    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 ..
     
Chargement...
Similar Threads - menu css vertical Forum Date
MENU VERTICAL CSS (3 minis questions) Développement d'un site Web ou d'une appli mobile 4 Décembre 2014
Mieux vaut-il un select ou un menu déroulant CSS Développement d'un site Web ou d'une appli mobile 15 Mars 2017
MON MENU CSS ne centre pas Développement d'un site Web ou d'une appli mobile 1 Décembre 2014
[résolu] Elargir un menu en CSS à 100% du contenant Développement d'un site Web ou d'une appli mobile 6 Octobre 2014
Menus déroulants (html + css) et Référencement Débuter en référencement 11 Septembre 2013
Indexation avec fil d'ariane composé de menus déroulants css Référencement Google 27 Avril 2013
(CSS) diffréntes couleur pour liens menu Développement d'un site Web ou d'une appli mobile 18 Janvier 2012
Menu déroulant sur image css Développement d'un site Web ou d'une appli mobile 5 Janvier 2012
Probleme Menu JS + CSS Développement d'un site Web ou d'une appli mobile 24 Février 2011
menu horizontal défilant en css...un problème d'alignement Développement d'un site Web ou d'une appli mobile 1 Novembre 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice