Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Javascript : aide pour un menu

alex.hitman

Par alex.hitman
dans Programmation

 Partager

Messages recommandés

alex.hitman Extrem Member

alex.hitman

Posté(e)
  • Auteur
Posté(e)

Sinon, voila ceci (grace à Ghislain de l'EditeurJavascript) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<script language="javascript">
var focus_menu,deuxieme,setattente,delai_disparition_menu=500;
function attente()
{
if (deuxieme)
{ 
if (!focus_menu)
{ 
masquer(masque);
}
clearTimeout(setattente); 
return;
} 
setattente= setTimeout("attente()",delai_disparition_menu);
deuxieme = true;
}
function focus_over()
{ 
focus_menu = true;
clearTimeout(setattente); 
}
function focus_out()
{
focus_menu = false;
deuxieme = false;
attente();
}
</script>
<script language="JavaScript" type="text/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);
</script>

<script language="javascript">
menus = new Array("","menu1","menu2","menu3","menu4","menu5");

function affichemasque(i,j,k,l,m) {
document.getElementById(menus[i]).style.visibility="visible";
document.getElementById(menus[j]).style.visibility="hidden";
document.getElementById(menus[k]).style.visibility="hidden";
document.getElementById(menus[l]).style.visibility="hidden";
document.getElementById(menus[m]).style.visibility="hidden";
}

function masquer(n)
{
document.getElementById("menu"+n).style.visibility="hidden";
}

</script>


<style type="text/css">
<!--
.Style1 {font-size: 14px}
.Style2 {color: #66FFFF}
.Style3 {color: #000000;width:150px;}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>


</head>


<body>

<div id="Layer1" onmouseover="focus_over();" onmouseout="focus_out()" style="position:relative; width:772px; height:29px; z-index:1; left: 74px; top: 88px;">

<div id="Info" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 0px; top: 0px;"
onMouseOut="masque = 1" onMouseOver="affichemasque(1,2,3,4,5)">
<div align="center" class="Style1">Informatique</div>
</div>

<div id="Web" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 155px; top: 0px;"
onMouseOut="masque = 2" onMouseOver="affichemasque(2,1,3,4,5)">
<div align="center" class="Style1">Webmasters et internet</div>
</div>

<div id="Prog" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 310px; top: 0px;"
onMouseOut="masque = 3" onMouseOver="affichemasque(3,1,2,4,5)">
<div align="center" class="Style1">Programmation</div>
</div>

<div id="Down" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 465px; top: 0px;"
onMouseOut="masque = 4" onMouseOver="affichemasque(4,1,2,3,5)">
<div align="center" class="Style1">Téléchargements</div>
</div>

<div id="Forum" style="border:black 1px inset; position:absolute; width:150px; height:16px; z-index:1; left: 620px; top: 0px;"
onMouseOut="masque = 5" onMouseOver="affichemasque(5,1,2,3,4)">
<div align="center" class="Style1">Forums et Livre d'Or</div>
</div>

<div id="menu1" style="border:black 1px inset; position:absolute; width:150px; z-index:2; left: 0px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;">
<table width="100%" border="0">
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><div align="left" class="Style2"><a href="http://www.informatique-web.net/windows.php" class="Style3">Windows</a></div></td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><div align="left" class="Style2"><a href="http://www.informatique-web.net/linux.php" class="Style3">Linux</a></div></td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><div align="left" class="Style2"><a href="http://www.informatique-web.net/overclocking.php" class="Style3">Overclocking</a></div></td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><div align="left" class="Style2"><a href="http://www.informatique-web.net/dossiers.php" class="Style3">Tous les dossiers</a> </div></td>
</tr>
</table>
</div>

<div id="menu2" style="border:black 1px inset; position:absolute; width:150px;z-index:2; left: 155px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;">
<table width="100%" border="0">
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/webmasters.php" class="Style3">Aides et dossiers</a> </td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/outils.php" class="Style3">Outils</a></td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/bons_plans.php" class="Style3">Bons Plans</a></td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/divers.php" class="Style3">Divers</a></td>
</tr>
</table>
</div>

<div id="menu3" style="border:black 1px inset; position:absolute; width:150px; z-index:2; left: 310px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;">
<table width="100%" border="0">
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/html.php" class="Style3">HTML</a></td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/javascript.php" class="Style3">Javascript</a></td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/php.htm" class="Style3">PHP</a></td>
</tr>
</table>
</div>

<div id="menu4" style="border:black 1px inset; position:absolute; width:150px; z-index:2; left: 465px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;">
<table width="100%" border="0">
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/logiciels.php" class="Style3">Logiciels</a></td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/annuaire_scripts.htm" class="Style3">Scripts</a></td>
</tr>
</table>
</div>

<div id="menu5" style="border:black 1px inset; position:absolute; width:150px; z-index:2; left: 620px; top: 25px; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;">
<table width="100%" border="0">
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://www.informatique-web.net/phpBB-208-french/index.php" class="Style3">Forums</a></td>
</tr>
<tr>
<td onMouseOver="javascript:this.style.background='#D9ECFF'" onMouseOut="javascript:this.style.background=''"><a href="http://bonsplansdunet.agora-system.com/livre/index.php" class="Style3">Livre d'Or </a></td>
</tr>
</table>
</div>
</div>

</body>
</html>

C'est pile poil ce qu'il me faut (il y a seulement un petit problème sur la taille des menus qui s'affichent, pour l'instant).

Qu'en dites-vous ?

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

Ce que j'en dis ?

 

1) Des tableaux ? Baaaaahhh :-P

2) Tu fais l'effort de donner des ID à tes <div> alors au lieu de mettre les attributs de style inline, va plutôt les mettre dans la section <style type="text/css"></style> : ton code sera beaucoup plus clair.

3) A l'utilisation, niveau design / fonctionnalité, rien à redire. C'est propre et classe. J'adore ce menu :-)

tangui Godlike Member

tangui

Posté(e)
Posté(e)

1/Pour le navigateur: c'est lourd

2/Pour la lisibilité du code: c'est lourd

3/Pour le poid de la page: c'est lourd (ca alourdi)

4/Les tableaux ont été crée pour mettre en forme des données, pas pour faire de la mise en page

 

Tient, une explication: http://mammouthland.free.fr/cours/css/index.php

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

5) Historiquement, les mises en page par tableaux imbriqués faisaient très facilement planter Netscape

6) Historiquement, les mises en page par tableaux faisaient déconner IE, ou au pire nécessitaient que celui-ci atteigne le dernier </table> pour commencer à afficher le contenu de la page, donc le gros bazar s'il y avait des messages à afficher dans une page contenant un tableau...

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...