Annonce

**-Nicolas-** · 22 janvier 2009, 20h34

Il existe des générateurs sur le net, fait une rechercher sur css menu generator par exemple : http://www.highdots.com/css-tab-designer/ ça te donne la base, après c'est à toi de l'adapter à ton site.

**Bogdan** · 23 janvier 2009, 02h18

Merci Nicolas, j'avais déjà regardé ce genre de logiciel, mais mon problème, c'est que j'ai déjà un menu (que je souhaite conserver), fait avec mes moyens, un code différent, et des images. Donc, ce que je souhaiterais, c'est ajouter les sous-sections au survol de la souris.

Je sais pas si je me fais comprendre, mais c'est assez chiant, je suis blasé avec ce truc, moi...

**Kobras** · 23 janvier 2009, 09h29

J'ai un truc qui je pense devrait convenir.
Je regarde ca demain.

**ShinSH** · 23 janvier 2009, 09h51

La méthode est simple.

Tu construis tes sous menus tous visibles dans un premier temps (à regrouper dans un <div>), puis tu leur donne la propriété CSS visibility à false.

Tu n'as plus qu'a modifier cette propriété CSS en javascript lors de l'évènement onMouseOver() (quand la souris passe sur l'element) et onMouseOut() (quand la souris part) de l'élément de ton menu principal.

Plus dans le code ca donne que tu fais une fonction "afficherMenu(telMenu)" et "cacherMenu(telMenu)", qui n'aura qu'une seule ligne, telMenu.visibility = true ou false.

Tes différentes fonctions onMouseOver et onMouseOut (une par sous menu) n'auront qu'a appeler les fonctions afficherMenu et cacherMenu avec comme parametre ce que tu veux afficher ou cacher.

**MatLab** · 23 janvier 2009, 18h28

Salute !

J'essaye avec Bog de faire les sous menus.
J'arrive pas bien à comprendre comment mettre en oeuvre ta technique ShinSH.

J'ai fais une page "TEST.html", et une feuille de tyle "TEST.css", contenant respectivement :

<html>
<head>
<link href="TEST.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="TRUC">BLABLA</div>

</body>
</html>

&

.TRUC {
visibility: hidden;
}

Et je ne comprend pas la suite de la procédure.

Imaginons que je veux faire apparaitre un sous menu, qui apparait quand on passe le curseur sur BLABLA, à droite de BLABLA, sous forme d'une liste verticale, de cette forme :

BLIBLI
BLOLBO
BLUBLU

Comment faire avec ta technique stp ?

Merci

**Bogdan** · 23 janvier 2009, 22h32

Ouais, c'est le gros bémol... Comment faire en sorte que les différentes sections d'un onglet du menu (je sais pas si je suis très clair...) s'affichent juste à côté de cet onglet ?

**ShinSH** · 24 janvier 2009, 01h12

En utilisant la méthode magique de la position absolue.

Enfin y'a plein de moyens, le mieux étant de fouiller dans le site référence http://w3schools.com/

Perso c'est comme ca que je me suis démerdé.

**Bogdan** · 24 janvier 2009, 20h51

Bah, sincèrement, merci les gars, mais j'y arrive pas...

Ça s'affiche pas où je veux, et ça s'active pas non plus quand je veux, bref, je galère un max.

Kobras, c'était quoi ta possibilité ?

**Catw** · 24 janvier 2009, 23h38

Je ne vais pas t'apporter de réponses à ta question, du moins pas immédiatement... Je suis allé voir ton site, j'aime le design de la chose, je trouve tout ça plus que sympathique mais...

Quand on clique-droite -> afficher la source, on s'aperçoit de quelques petits trucs qui me titillent du html/css...

La première chose qui me fait hausser un sourcil, c'est la présence de css à l'intérieur de la page, j'aurais tendance à préférer mettre en place un fichier css à coté (que j'appellerais, dans un élan d'originalité hors du commun, style.css), en ajoutant entre <head> et </head> :

Code:

<link rel="stylesheet" type="text/css" href="style.css" />

Ceci te permettra d'ajouter des classes plus facilement et t'évitera de surcharger ta page principale.

Ensuite, le menu en pur javascript, je dois avouer que je suis pas fan. Surtout qu'on peut faire le même en utilisant css, y a des tutos partout sur le net, je vais pas surcharger mon post en te disant comment faire. Ce qui nous amène au menu déroulant. En utilisant javascript et css, tu pourras le réaliser (c'est une des raisons pour lesquelles je suggère une refonte de ton menu).

Petit détail, pour alléger ton code, plutôt que d'avoir

Code:

<p align="justify" class="Style6"><span class="Style3">

avant chaque titre, pourquoi ne pas te servir des balises de titres HTML (h1,h2,etc) et définir leurs styles en css ? Genre comme ça :

Code:

h1 {
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	color:#005FA9;
}

p {
	font-family:Arial;
	font-size:14px;
}

Voire même donner la font-family dans la balise body, pour alléger un peu les choses...

Dis-moi si je me trompe, mais n'utiliserais-tu pas un éditeur wysiwyg pour faire ton site ?

**Bogdan** · 25 janvier 2009, 00h08

D'abord, merci pour ton avis sur le site, c'est sympa !

Ensuite, je suis bien d'accord avec tout ce que tu viens de dire, il faudrait qu'on rafraîchisse tout ça. Faut dire que le site a été pas mal modifié depuis sa création, donc la base n'est pas terrible, terrible. Elle date, quand même...

Et puis, je vais te répondre non ! On utilise essentiellement Dreamweaver pour la conception du site. D'ailleurs, jamais entendu parler de cet éditeur au nom "qu'on dirait que t'as tapé n'importe quoi sur ton clavier".

**tfoth** · 25 janvier 2009, 02h03

L'éditeur "wysiwyg", c'est un éditeur qui t'affiches ce que tu es censé voir sur ton site. What You See Is What You Get. Comme iWeb, NVU, ou Dreamweaver

. Le souci étant qu'ils font "souvent" du code crade ^^"

**-Nicolas-** · 25 janvier 2009, 11h30

Je n'ai pas encore eu l'utilité de ce genre de menu donc je n'en ai pas sous la main mais puisqu'il t'en faut un tout fait, si tu n'es pas pressé j'en ferais un quand j'aurais le temps de m'y mettre.

**Catw** · 25 janvier 2009, 14h52

Envoyé par tfoth Voir le message

L'éditeur "wysiwyg", c'est un éditeur qui t'affiches ce que tu es censé voir sur ton site. What You See Is What You Get. Comme iWeb, NVU, ou Dreamweaver

. Le souci étant qu'ils font "souvent" du code crade ^^"

... tout en déclarant les pages en XHTML...

**Kobras** · 25 janvier 2009, 16h42

Dans le fichier js :

Code:

var blnOk=true;


function Chargement()
{  
  CacherMenus();
}

function MontrerMenu(strMenu)
{  
  if(blnOk)
  {
    CacherMenus();
  	if (window.innerWidth)
    {
  		largeur = window.innerWidth;
  	}
  	else if (document.body && document.body.offsetWidth)
    {
  		largeur = document.body.offsetWidth;
  	}
   	else
     {
  		largeur = 1024;
  	}
  	if (largeur<1024)
    {
  		largeur = 1024;
  	}
  	for(i=1;i<=1;i++)
    {
      with(document.getElementById("ssmenu"+i).style)
      {
        position="absolute";
        top=30.4+(1.88*(i-2))+"em";
        left=((largeur-1024)/32)+1+"em";
        width="1em";
        margin="0";
        padding="0";
        zIndex="3";
      }
    }
    document.getElementById("ssmenu1").style.top="2.8em";
    
    document.getElementById(strMenu).style.display="inline";
  }
}

function CacherMenus()
{
  if(blnOk)
  {
    for(i=1;i<=1;i++)
    {
      with(document.getElementById("ssmenu"+i).style)
      {
        display="none";
      }
    }
  }
}

Dans la page elle même :

Code:

<html>
<head>
<title>Menu</title>
<script type="text/javascript" src="menu-test.js"></script>
</head>
<body>
<table>
  <tr>
    <td>
      <p id="menu1" class="menu"><a href="#" onmouseover="MontrerMenu('ssmenu1');" onfocus="MontrerMenu('ssmenu1');" onmouseout="CacherMenus();" style="cursor:default;">Menu principale</a></td>
  </tr>
  <tr>
    <td>
      <div id="ssmenu1" style="display:none;">
       sous menu
      </div>
    </td>
  </tr>
</table>
</body>
</html>

Après à toi de modifier le contenu du Div pour y présenter comme tu le souhaite et à toi de modifier les valeurs dans le js pour le positionnement. des sous menus

Annonce

Créer un sous-menu...

Créer un sous-menu...

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire