28172 sujets

CSS et mise en forme, CSS3

Menu qui s'affiche en survol d'un texte et d'une image

Pages :
Bonjour,

Je croyais ce sujet élémentaire mais après pas mal de recherche, je ne trouve pas de solution :

Je souhaite donc qu'un me petit menu (2 ou 3 items) s'affiche au survol d'un texte.

Ce menu doit également apparaître en survol d'une image (ailleurs dans ma mise en page).

Ce menu doit par exemple fonctionner comme une infobulle à la différence qu'il doit resté apparent le temps de cliquer sur un item.

On peut imaginer aussi un menu avec display: none; mais comment l'afficher depuis le texte et/ou l'image ?

Bref, quelle serait la solution la plus simple ? Smiley ohwell
Ton menu utilisera display:none, mais par contre vu que tu veux le faire apparaitre en cliquant sur un texte ou une image "en dehors", je crains qu'il ne faille utiliser javascript.

<script type="text/javascript">
 function show(){
  document.getElementById("menu").style.display="";
 }
</script>




<ul id="menu" style="display:none;">
 <li><a href="">Item 1</a></li>
 ...
</ul>

<a onclick="show()">Afficher le menu</a>


Après faut voir comment gérer la disparition du menu si on ne clique pas sur un item.
Voici où j'en suis, je ne sais pas si j'ai raté une étape mais le menu n'apparaît même pas une fois... Smiley decu 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans titre</title>

<script type="text/javascript"> 
 function show(){ 
  document.getElementById("menu").style.display=""; 
 } 
</script> 

<style type="text/css">
<!--
#menu {
	font-family: Verdana, Geneva, sans-serif;
	background-color: #0F9;
	width: 100px;
	display: none;
}
-->
</style>
</head>

<body>
<div id="conteneur"><a href="#" onclick="show()">Afficher le menu</a> 
<div id="menu"><li><a href="">Item 1</a></li> 
 <li><a href="">Item 2</a></li> 
 <li><a href="">Item 3</a></li>
</ul> 
</div>
</div>
</body>
</html>
Pour commencer indent ton code HTML pour faire ressortir les erreure : 
<div id="conteneur">
  <a href="#" onclick="show()">Afficher le menu</a> 
  <div id="menu">
     ??? 
      <li><a href="">Item 1</a></li> 
      <li><a href="">Item 2</a></li> 
      <li><a href="">Item 3</a></li>
     </ul> 
  </div>
</div>

il te manque un <ul>.

Si ca n'arrange rien essais de debuger ton code en ajoutant un alert("show !!"); au debut de ta fonction show(){}, ca pourrait te mettre sur la voie...
Parce que ton display:none doit être écrit inline c'est-à-dire: <ul id="menu" style="display:none;">.
Si tu tiens à éviter ça, tu créé des classes css du genre : .show{ display:block; } et .hide{ display:none; }, dans le html tu mets <ul id="menu" class="hide"> et en javascript : document.getElementById("menu").className="show"; .
Keyraw

Si j'ai bien suivi tes indications :

Pour le JS :
<script type="text/javascript"> 

 function show(){ 

  document.getElementById("menu").className="show"; 

 } 

</script>


Pour le css de mon menu popup :
#menu {
	font-family: Verdana, Geneva, sans-serif;
	background-color: #0F9;
	width: 100px;
	display: none;
}


Pour mon html :
<div id="conteneur"><a href="#" onclick="show()">Afficher le menu</a> 

<div id="menu">
  <ul id="menu" class="hide">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
  </ul> 
  </div>

</div>


Désolé, ça ne marche toujours pas... Smiley biggol
Il ne faut pas conserver le display:none au niveau du menu, d'une part, et ensuite tu utilise deux fois le même id d'autre part.

Voilà le code correct :


<div id="conteneur">
  <a href="#" onclick="show()">Afficher le menu</a>

  <ul id="menu" class="hide">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
  </ul> 
</div>




#menu{
	font-family: Verdana, Geneva, sans-serif;
	background-color: #0F9;
	width: 100px;
}

.hide{ display:none; }
.show{ display:block; }

Modifié par keyraw (01 Sep 2010 - 11:42)
Super, cette base fonctionne !

Pour adapter/compléter mon effet, j'ai remplacé onClick par onMouseOver afin que le menu s'affiche en survol.

Maintenant, ça se complique un peu (vu mes compétences bien entendu), il faudrait que le menu :
- n'apparaisse pas à l'affichage de la page : a priori, c'est le cas
- apparaissent au survol onmouseover="show()" : ça fonctionne
- disparaisse en quittant le survol onMouseOut="hide()" : ça ne fonctionne pas Smiley decu

Mais comme ce n'est pas une infobulle, il faut que le menu soit présent pour cliquer sur les items. Il faudrait donc que le menu :
- reste affiché après survol : rapprocher le menu du texte pour éviter l'effet onMouseOut ?
- disparaissent en sortie du menu lui-même

Bref, comme un menu "classique" rien de plus

J'en demande peut-être beaucoup mais je ne pourrai me servir de ce travail qu'à la condition que l'effet soit complet... Smiley ohwell
Si tu dis onmouseout="hide()", cela suppose que tu as créé une fonction javascript appelée hide...


function hide(){
  document.getElementById("menu").className="hide";
}


Après le point délicat c'est effectivement de gérer la disparition du menu. Il y aurait des façons de faire mais tout dépend de ce que tu veux exactement car là c'est qu'une question de logique.
et dans ce cas mon js devrait se rédiger comme ça :

<script type="text/javascript">
function show(){ 

  document.getElementById("menu").className="show"; 
  document.getElementById("menu").className="hide"; 
 }
</script>


Sinon pour les fonctionnalités, comme je te l'ai détaillé dans mon post précédent, rien de plus qu'un petit menu qui s'affiche et qui se masque en survol.

Bien entendu, j'aurais pu récupérer de nombreux menus dispos en ligne mais ils sont en général très complets (multi-niveaux, effets...) et j'aurais du mal à en extraire la petite partie qui m'est nécessaire...
Euh non, je t'explique un peu la base =>

- onmouseover correspond à l'évènement de survol ça tu l'as compris
- la valeur que tu mets à onmouseover (par ex. "show()") correspond à une fonction javascript qui s'appelle "show"
- document.getElementById("menu") permet de faire référence à la balise html qui porte l'id "menu"
- className est la propriété d'un élément dont la valeur est le ou les nom(s) de classe spécifié(s) dans ton CSS

Donc le code que je t'ai donné attribue la classe CSS "show" à la balise dont l'id est "menu" lors du survol du lien avec la souris.

Je te laisse donc deviner ce que va faire la fonction javascript que tu as mise dans ton dernier post.
Tout à fait, en fait tu dis à ton menu d'apparaitre et de disparaitre tout de suite après.

La bonne fonction serait:


function showhide(value){
  document.getElementById("menu").className=value;
}


Que tu appellerais ainsi:


<a onmouseover="showhide('show');" onmouseout="showhide('hide');">...</a>
Et pour rédiger mes deux fonctions

<script type="text/javascript">
function show(){ 

  document.getElementById("menu").className="show"; 
 }
 function showhide(value){ 
  document.getElementById("menu").className=value; 
} 
</script>


et pour mon texte qui affiche le menu

<div id="conteneur"> 
  <a href="#" onmouseover="show()" onmouseout="hide()">Afficher le menu</a> 
  <a onmouseover="showhide('show');" onmouseout="showhide('hide');">...</a>
 
  <ul id="menu" class="hide"> 
    <li><a href="">Item 1</a></li> 
    <li><a href="">Item 2</a></li> 
    <li><a href="">Item 3</a></li> 
  </ul>  
</div>


Sur ce dernier point, ce n'est pas correct...

<script type="text/javascript">
 function showhide(value){ 
  document.getElementById("menu").className=value; 
} 
</script> 




<div id="conteneur"> 
  <a onmouseover="showhide('show');" onmouseout="showhide('hide');">Afficher le menu</a> 

  <ul id="menu" class="hide"> 
    <li><a href="">Item 1</a></li> 
    <li><a href="">Item 2</a></li> 
    <li><a href="">Item 3</a></li> 
  </ul>  
</div>


Tout ça c'est assez basique, je te conseille de lire des tutos et des cours sur le javascript, tu peux pas juste te contenter de copier/coller du code sans comprendre ce que tu fais et réfléchir un peu ! Smiley smile
Même si ça ne ressort pas, je ne me contente pas de simplement copier-coller, je regarde aussi la structure. Je te confirme donc que je m'intéresse particulièrement au code en lui-même et que ta démarche de soutien n'est pas inutile.

Dans l'immédiat, je me forme pas mal au css et ça progresse pas mal, je réserve le JS pour un peu plus tard et dans tous les cas, je suis d'accord, il faudra que j'écume les tutos.

Bon, l'air de rien, cette fonction js devrait me servir pas mal. Bien entendu il faut que je permette au menu de rester présent le temps de sélectionner un item mais ça me paraît possible en respectant la logique de ce code.

Précision technique : même si ça fonctionne, est-ce qu'il est possible d'intégrer tout le code js dans un jeu de balise ou faut-il répéter à chaque fois les balises pour chaque fonctionnalité ?

Ce que j'ai actuellement :
<script type="text/javascript">
function show(){

document.getElementById("menu").className="show";
}
</script>
<script type="text/javascript">
function showhide(value){
document.getElementById("menu").className=value;
}
</script>
Pas de problème, je préférais préciser quand même.

Tu n'as plus besoin de la fonction show. La fonction showhide sait faire apparaitre et disparaitre en fonction du paramètre que tu lui donne entre parenthèses, elle suffit.

Et pour répondre à ta question, tu n'as pas besoin de réutiliser les balises script à chaque fonction ou directive javascript.
Pages :
Sujet clos
Aller à