Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MENU VERTICAL DYNAMIQUE


Information sur la source

Catégorie :Menu & Co Classé sous : menu, dynamique, tableau Niveau : Débutant Date de création : 19/12/2007 Vu / téléchargé: 21 398 / 1 386

Note :
5,5 / 10 - par 2 personnes
5,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
Ce menu se deplace sur l'axe des ordonnées selon la position du curseur sur ce meme axe. Le menu est en réalité un tableau dont la hauteur de la premiére ligne change en fonction de la position du curseur.
changement de couleur de la ligne lorsque la souris passe dessus.


 

Source

  • <!--
  • But: menu dynamique vertical: le tableau qui represente le menu, se deplace verticalement selon
  • la position du curseur sur l'axe des ordonnées.
  • Ajout également d'un effet sur la ligne du tableau lors du passage de la souris.
  • -->
  • <html>
  • <head>
  • <title>Menu dynamique vertical</title>
  • <SCRIPT LANGUAGE=JavaScript>
  • //permet de deplacer sur la hauteur un tableau par le biais d'un changment de taille de la premiere ligne du tableau
  • function TableauDynamique(e)
  • {
  • //recupére le deplacement du curseur sur l'axe des y
  • y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
  • // petit calcul pour pouvoir accéder à tout les champ du menu quelques soit la position du menu
  • //remarque: si ajout de ligne dans le menu, penser à modifier le calcul si nécessaire
  • var taille="";
  • if (y<250)
  • {
  • taille =Math.floor(y/110)*100;
  • }
  • else if (y<750)
  • {
  • taille =Math.floor(y/110)*100+50;
  • }
  • else if (y<850)
  • {
  • taille =Math.floor(y/110)*100+75;
  • }
  • else
  • {
  • taille =Math.floor(y/110)*100+100;
  • }
  • document.getElementById("cellule").style.height=taille;
  • }
  • if (navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);
  • document.onmousemove = TableauDynamique;
  • </SCRIPT>
  • </head>
  • <body >
  • <table align="left">
  • <TR>
  • <TABLE align="left">
  • <TR >
  • <TD id="cellule">
  • &nbsp;
  • </TD>
  • <TD >
  • &nbsp;
  • </TD>
  • </tr>
  • <!-- ceci c'est pour permettre le changement de couleur de la ligne du tableau quand la souris passe dessus -->
  • <TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
  • <TD >
  • &nbsp;1.
  • </TD>
  • <!--j'ai laisser les lien qui bien sur ne fonctionne pas vu que c'est juste un morceau du code original -->
  • <a href="#nb"> <TD style="cursor: pointer">
  • <p><font color="#3333cc"><SPAN TITLE="Choix du nombre de facteur(s)">Nombre de Facteur(s)</span></font></p>
  • </TD></a>
  • </TR>
  • <TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
  • <TD>
  • &nbsp;2.
  • </TD>
  • <a href="#param"> <TD style="cursor: pointer">
  • <p><font color="#3333cc"><SPAN TITLE="Paramétrage de l'analyse: le(s) facteur(s), mesure repeté ou non, post-Hoc, avec ou sans interaction">Paramétrage de l'analyse</span></font></p>
  • </TD></a>
  • </TR>
  • <TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
  • <TD>
  • &nbsp;3.
  • </TD>
  • <a href="#option"><TD style="cursor: pointer">
  • <p><font color="#3333cc"><SPAN TITLE="Option du post-Hoc"> Options </span></font></p>
  • </TD></a>
  • </TR>
  • <TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
  • <TD>
  • &nbsp;4.
  • </TD>
  • <a href="#resultat"> <TD style="cursor: pointer">
  • <p><font color="#3333cc"><SPAN TITLE="Affichage des resultats au format HTML ou RTF (Word)">Résultats</span></font></p>
  • </TD></a>
  • </TR>
  • </TABLE>
  • </table>
  • </body>
  • </html>
<!--
But: menu dynamique vertical: le tableau qui represente le menu, se deplace verticalement selon
la position du curseur sur l'axe des ordonnées.
Ajout également d'un effet sur la ligne du tableau lors du passage de la souris.
-->
<html>
<head>
	<title>Menu dynamique vertical</title>

<SCRIPT LANGUAGE=JavaScript>
//permet de deplacer sur la hauteur un tableau par le biais d'un changment de taille de la premiere ligne du tableau
function TableauDynamique(e)
{
    //recupére le deplacement du curseur sur l'axe des y
    y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
       // petit calcul pour pouvoir accéder à tout les champ du menu quelques soit la position du menu
    //remarque: si ajout de ligne dans le menu, penser à modifier le calcul si nécessaire
    var taille="";
    if (y<250)
   {
        taille =Math.floor(y/110)*100;
    }
    else if (y<750)
   {
        taille =Math.floor(y/110)*100+50;
    }
   else if (y<850)
   {
        taille =Math.floor(y/110)*100+75;
    }
    else
    {
        taille =Math.floor(y/110)*100+100;
    }
    document.getElementById("cellule").style.height=taille;
}
if (navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);
document.onmousemove =  TableauDynamique;

</SCRIPT>

</head>

<body >


<table  align="left">
<TR>

<TABLE align="left">	
	<TR > 

		<TD id="cellule">
      &nbsp;
		</TD>
			<TD >
			&nbsp;
		</TD>
		</tr>		
		<!-- ceci c'est pour permettre le changement de couleur de la ligne du tableau quand la souris passe dessus -->
	<TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4"> 
		<TD >
			&nbsp;1.
		</TD>
<!--j'ai laisser les lien qui bien sur ne fonctionne pas vu que c'est juste un morceau du code original -->
		<a href="#nb"> 	<TD style="cursor: pointer">
		<p><font color="#3333cc"><SPAN TITLE="Choix du nombre de facteur(s)">Nombre de Facteur(s)</span></font></p>
		</TD></a>
	</TR>
	<TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
		<TD>
			&nbsp;2.
		</TD>
	<a href="#param">	<TD style="cursor: pointer">	
		<p><font color="#3333cc"><SPAN TITLE="Paramétrage de l'analyse: le(s) facteur(s), mesure repeté ou non, post-Hoc, avec ou sans interaction">Paramétrage de l'analyse</span></font></p>
		</TD></a>
	</TR>
	<TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
		<TD>
			&nbsp;3.
		</TD>
		<a href="#option"><TD style="cursor: pointer">
      <p><font color="#3333cc"><SPAN TITLE="Option du post-Hoc">	Options </span></font></p>
		</TD></a>
	</TR>
	<TR onmouseover="this.bgColor='#7f8aed';" onmouseout="this.bgColor='#e6e8fa';" BGCOLOR="#e6e8fa" border="2" BORDERCOLOR="#7f8aed" cellspacing="4">
		<TD>
			&nbsp;4.
		</TD>
	<a href="#resultat">	<TD style="cursor: pointer">		
				<p><font color="#3333cc"><SPAN TITLE="Affichage des resultats au format HTML ou RTF (Word)">Résultats</span></font></p>
		</TD></a>
	</TR>

</TABLE>
</table>
</body>
</html>

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de noobiz le 03/01/2008 13:40:29 7/10

Pas mal mais je le trouve un peu trop "simplet". Essaie de l'amélorer un peu.

signaler à un administrateur
Commentaire de kazma le 20/05/2008 21:47:50 4/10

le menu suit bien mais quand on veut avoir acc?s a un des onglet du menu il se d?place.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

menu dynamique dans cellule tableau ? [ par seb_divweb ] bonjour je debute et je cherche a faire la chose suivante : j'ai un tableau avec 3 colones. dans la colonne de gauche j'ai une image, qui change au s gros problème menu dynamique [ par lilyvirus ] Bonjour, j'ai un gros problèeme. Je ne suis pas très doué en javascript (je prefère 100* le flash) et la je suis en stage, ma seconde partie de stage Problème menu dynamique [ par iutval ] Bonjour, depuis plusieurs heures je suis bloqu&#233; sur un probl&#232;me de menu dynamique. Voici ce que j'ai r&#233;cup&#233;r&#233; et modifi&#233; Menu dynamique a gauche avec images [ par YouTzeEN ] Salut &#224; tous Bon, voila je suis un tres gros newbie ...Je cherche a faire un menu dynamique a gauche avec des images ...Voila en fait, j'aurai be creation de menu dynamique avec une servlet? [ par youra2005 ] Petit problème avec un menu dynamique ! [ par vernoff ] Salut, je suis en train de cr&#233;er un site comprenant au total trois menus dynamiques sur la meme page. J'ai mis le premier qui marche tr&#232;s bi menu vertical dynamique [ par seabird ] Bonjour, J'ai du mal &#224; trouver ce script.Je recherche un menu vertical en arborescence , dynamique (permettant de derouler et enrouler:je souhait Menu déroulant dynamique avec BDD [ par sebalex ] Bonjour &#224; tous,J'ai un menu d&#233;roulant affichant une liste d'article stock&#233; dans une base de donn&#233;es (MYSQL). Je souhaite que lorqu Affichage dynamique [ par Ma2004 ] Bonjour &#224; tous,J'ai une liste d&#233;roulante ins&#233;r&#233;e dans une page htm (qui contient des logos,&nbsp; la date et l'heure, . . .). J'ai Metre un menu dynamique haut dessus d'une frame [ par comtention ] Bonjour,J'ai un menu dynamique&nbsp;et le probleme c'est que quand je le&nbsp;d&#233;roule on ne vois pas tout car la fram a coter passe par dessus. V


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,281 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.