Page HTML

Résolu
LeY2A Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   -  
samgunsjovirow Messages postés 40919 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour tous le monde, j'aimerais savoir comment faire pour mettre dans un site internet un menu qui apparait dès que l'on met la souris sur une catégorie . Je sais que c'est un peu flou mais c'est comme sur ce site là : http://www.entreprise-dauville.com .
Merci.
A voir également:

11 réponses

Réponse 1 / 11
samgunsjovirow Messages postés 40919 Date d'inscription   Statut Modérateur Dernière intervention   3 040
 
Il faut utilser des calques et des comportements. Ca te dit quelquechose ou tu veux plus d'explications?

Si oui, dis nous déjà sur quoi tu travailles: un logiciel ou simplement notepad?
0
Réponse 2 / 11
LeY2A Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   2
 
Oui j'aimerais un peu plus d'explication. En fait je travaille avec Dreamweaver et le bloc note .
0
samgunsjovirow Messages postés 40919 Date d'inscription   Statut Modérateur Dernière intervention   3 040
 
Bon alors pour t'expliquer la procédure, tu dois d'abord créér tes calques (les menus qui apparaissent quand tu passes la souris quelquepart), ensuite tu ajouteras les comportements.


Dans dreamweaver, tu vas dans Insertion> Calque. Là ça te mettra un calque que tu peux paramétrer: lui donner un nom, changer la couleur de fond, le déplacer, etc... Mets le calque sous le mot ou l'image que la souris doit survoler et insère ton sous-menu à l'intérieur. Répète cette opération pour chaque calque de sous menu.

Une fois que tous tes claques sont prets, va sur la première image qui doit faire apparaitre le premier sous menu. Si tu n'as pas l'onglet "comportements" deja ouvert, tu peux le faire apparaitre en faisant maj + F3, ou en allant dans le menu "Fenetre".

Séléctionne ta première image, et dans l'onglet comportements, clique sur le + et choisis "afficher ou masquer les calques". Là tu devrais avoir la liste de tous tes calques. Tu mets "afficher" pour le sous-menu concerné et masquer pour les autres. Il faut aussi que dans évènements, tu sélectionne "onMouseOver". Si tu as autre chose d'ecrit sous evenements, fais un clique de droit dessus et tu pourras en changer.
0
Réponse 3 / 11
LeY2A Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   2
 
Ok . Merci beaucoup !
0
Réponse 4 / 11
LeY2A Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   2
 
Euh en fait quand je le fait, les sous-menu ne s'affichent pas quand je survol le mot : les sous-menu sont affichés comme des mots normaux enfin je ne sais pas si tu vois ce que je veux dire...
0
samgunsjovirow Messages postés 40919 Date d'inscription   Statut Modérateur Dernière intervention   3 040
 
Tu pourrais copier et coller le code HTML de ta page? Par contre je ne pourrais peut etre te donner une explication que demain car je vais bientot déconnecter.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
LeY2A Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   2
 
Voila le code :

<html>
<head>
<title>Ma page HTML</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 10px;
top: 39px;
background-color: #FF0000;
}
.Style1 {color: #FFFFFF}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body>
mon titre
<div id="Layer1" onMouseOver="MM_showHideLayers('Layer1','','show')">
<p class="Style1">sous menu 1 </p>
<p class="Style1">sous menu 2 </p>
</div>
</body>
</html>
0
Réponse 6 / 11
samgunsjovirow Messages postés 40919 Date d'inscription   Statut Modérateur Dernière intervention   3 040
 
Merci pour le code. Déjà j'ai remarqué qu'il tu as mal fait la partie sur les comportements.Cela . C'est bien sur le titre que tu dois placer le comportement, pas sur le calque (ce qui est le cas dans le code que tu as envoyé). Je jeteraois un coup d'oeil au code pour voir si il y a autre chose à faire et je te tiens au courant
0
Réponse 7 / 11
LeY2A Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   2
 
Ok merci.
0
samgunsjovirow Messages postés 40919 Date d'inscription   Statut Modérateur Dernière intervention   3 040
 
Coucou me revoilà (1000 excuses pour le retard, j'étais occupée).

Enfin bref...Ma méthode ma.rche mieux avec une image.

Donc j'ai remplacé le texte "mon titre" par un bouton. Sur ce bouton, j'ai appliqué un comportement afficher -masquer les calques, et sur le calque, j'ai appliqué un comportement "masquer le calque" (comme ça quand la sousis sort du sous-menu, il disparait.


Voici ce que ça donne en code 

<html> 
<head>
<title>Ma page HTML</title>
<style type="text/css"> 
<!-- 
#Layer1 { 
position:absolute; 
width:200px; 
height:115px; 
z-index:1; 
left: 10px; 
top: 39px; 
background-color: #FF0000; 
} 
.Style1 {color: #FFFFFF} 
--> 
</style>
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head> 

<body>
<img src="bouton.jpg" width="100" height="50" onMouseOut="MM_showHideLayers('Layer1','','hide')" onMouseOver="MM_showHideLayers('Layer1','','show')"> 
<div id="Layer1" style="visibility: hidden; left: 19px; top: 59px" onMouseOut="MM_showHideLayers('Layer1','','hide')"> 
  <p class="Style1">sous menu 1 </p> 
<p class="Style1">sous menu 2 </p> 
</div> 
</body> 
</html>
0
Réponse 8 / 11
LeY2A Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   2
 
Vraiment merci beaucoup mais il reste un problème : quand je veux cliquer sur un sous menu, le calque disparait...
0
Réponse 9 / 11
CTPC
 
Coucou,

Ce que tu aurais pu faire aussi, c'est une recherche de scripts de menus sous google. Pas mal de sites te proposent des codes de sources, et entre autres des codes sources de menus... Des verticaux, horizontaux, en roue etc ...

Après si tu cherches à te former, ok c'est bien de faire par toi-même, mais à rien ne sert de réinventer la roue !! ;)


Voilà, bonne continuation,

CTPC
0
Réponse 10 / 11
LeY2A Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   2
 
Merci pour ton conseil.
0
Réponse 11 / 11
LeY2A Messages postés 39 Date d'inscription   Statut Membre Dernière intervention   2
 
Ah, enfin j'ai réussi, il suffisait simplement de mettre le comportement masquer le calque et mettre "onMouseOut" sur le calque.
Vraiment merci pour vos conseils car ils m'on vraiment bien aidé.

LeY2A
0
samgunsjovirow Messages postés 40919 Date d'inscription   Statut Modérateur Dernière intervention   3 040
 
Ah oui en effet j'avais oublié celui ci...désolée si je t'ai embrouillé mais ça faisait longtemps que j'en avais pas utilisé donc j'ai essayé de tout faire de mémoire, LOL. Contente que ça marche en tous cas!
0

Discussions similaires

<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
connection ok mais aucune page ne s'affiche
gandounet -
fabiennetitou -

10 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse