IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Menu en bas de la page


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Points : 8
    Points
    8
    Par défaut Menu en bas de la page
    Bonjour tout le monde !!

    Vous vous appercevrez vite que je suis complètement nul en JavaScript (il faut dire que je n'ai pas beaucoup cherché à apprendre ce language).

    J'aimerais mettre un menu (qui est normalement à gauche) en bas de la page ( http://www.web-creation-fr.com/javascript/index.php?id=7 ).

    Ce sont les images de bases :


    Et ca se sont les images que j'aimerais mettre dans mon nouveau menu :


    J'ai fais des screenshots pour vous donner une idée si vous ne comprenez pas :
    * Screenshot 1 (fermé)
    * Screenshot 2 (ouvert)

    Vous pouvez voir le script à son exécution ici : http://www.web-creation-fr.com/javascript/voir.php?id=7

    Je sais que sur ce genre de forum on aime pas trop faire le boulot pour les débutants qui cherchent à avoir un script tout fait. Mais la j'ai fait les 1/3 du boulot en faisant les images et les screenshots pour vous donner une idée précise de ce que je veux.

    Petite précision : j'aimerais que le menu soit ouvert au démarrage de la page contrairement à l'autre.

    Voila tout !
    +++
    pihug12 8)

  2. #2
    Expert confirmé
    Avatar de siddh
    Inscrit en
    Novembre 2005
    Messages
    3 868
    Détails du profil
    Informations personnelles :
    Âge : 48

    Informations forums :
    Inscription : Novembre 2005
    Messages : 3 868
    Points : 5 011
    Points
    5 011
    Par défaut Re: Menu en bas de la page
    Citation Envoyé par pihug12
    Vous vous appercevrez vite que je suis complètement nul en JavaScript (il faut dire que je n'ai pas beaucoup cherché à apprendre ce language).
    il n'est jamais trop tard
    Alunissage : Procédé technique consistant à déposer des imbéciles sur un rêve enfantin.

    Cours | FAQ | Sources Javascript
    Cours | FAQ | Sources PHP
    Mes Articles

  3. #3
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Points : 20 778
    Points
    20 778
    Par défaut
    Pour le mettre en bas de la page ce n'est pas du javascript mais du html/css qui pourrait convenir...

    Tentes avec les définitions de bottom et left dans le code de ton menu

  4. #4
    Futur Membre du Club
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Points : 8
    Points
    8
    Par défaut
    Bonjour tout le monde !!

    Script entre <head> et </head> :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    <style type="text/css">
    <!--
    #master	{position:absolute; width: 200px; top: 10px; left: -120px; z-index:2; visibility:visible;}
    #menu {position:absolute; width: 18px; top: 0px; left: 120px; z-index:5; visibility:visible;}
    #top {position:absolute; width: 120px; top: 0px; left: 0px; z-index:5; visibility:visible;}
    #liens {position:absolute; width: 120px; top: 6px; left: 0px; z-index:5; visibility:visible;}
    .NavJump {font-family: arial; font-size: 10pt; color: #808080; text-decoration: none;}
    a:link.NavJump {color : #808080;}
    a:visited.NavJump {color : #808080;}
    a:active.NavJump {text-decoration: none; color: #C0C0C0;}
    a:hover.NavJump {text-decoration: none; color: #C0C0C0;}
    -->
    </style>
    <script language = "javascript">
    <!--
     
    /*
    Script amélioré, mis à jour pour NS6+ - Mozilla 1+ et commenté par le site WEB Creation.
    Non testé pour NS4 mais devrait fonctionner.
    D'autres scripts ?
    >> http://www.web-creation-fr.com
    Merci de laisser ces commentaires.
    */
     
    // On définit 3 variables, selon les propriétés de calques gérées par le navigateur
    var ie = document . all ? 1 : 0
    var ns = document . layers ? 1 : 0
    var ns6 = document.getElementById && !document.all ? 1 : 0
     
    // Position en hauteur une fois le menu ouvert
    var topOpen = 10;
    // Position en hauteur lorsque le menu est fermé
    var topClosed = 10;
     
    var master = new Object("element")
    master . curLeft = -120; // Position de départ du calque
    master . curTop = 10; // Hauteur de départ du calque
    master . gapLeft = 0;
    master . gapTop = 0;
    master . timer = null;
     
    function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop)
    {
        clearTimeout(eval(layerName) . timer);
     
        if (eval(layerName) . curLeft != fromLeft) {
    	    // Calcul position horizontale
            if ((Math . max(eval(layerName) . curLeft, fromLeft) - Math . min(eval(layerName) . curLeft, fromLeft)) < paceLeft) {
                eval(layerName) . curLeft = fromLeft;
            } else if (eval(layerName) . curLeft < fromLeft) {
                eval(layerName) . curLeft = eval(layerName) . curLeft + paceLeft;
            } else if (eval(layerName) . curLeft > fromLeft) {
                eval(layerName) . curLeft = eval(layerName) . curLeft - paceLeft;
            } 
            // Définition de la position horizontale du menu
            if (ie) {
                document . all[layerName] . style . left = eval(layerName) . curLeft;
            } 
            if (ns) {
                document[layerName] . left = eval(layerName) . curLeft;
            } 
            if (ns6) {
                document . getElementById(layerName) . style . left = eval(layerName) . curLeft;
            } 
        } 
     
        if (eval(layerName) . curTop != fromTop) {
    	    // Calcul position verticale
            if ((Math . max(eval(layerName) . curTop, fromTop) - Math . min(eval(layerName) . curTop, fromTop)) < paceTop) {
                eval(layerName) . curTop = fromTop;
            } else if (eval(layerName) . curTop < fromTop) {
                eval(layerName) . curTop = eval(layerName) . curTop + paceTop;
            } else if (eval(layerName) . curTop > fromTop) {
                eval(layerName) . curTop = eval(layerName) . curTop - paceTop;
            } 
            // Définition position verticale du menu
            if (ie) {
                document . all[layerName] . style . top = eval(layerName) . curTop;
            } 
            if (ns) {
                document[layerName] . top = eval(layerName) . curTop;
            } 
            if (ns6) {
                document . getElementById(layerName) . style . top = eval(layerName) . curTop;
            } 
        } 
        eval(layerName) . timer = setTimeout('moveAlong("' + layerName + '",' + paceLeft + ',' + paceTop + ',' + fromLeft + ',' + fromTop + ')', 30)
     
    } // Fin function MoveAlong
     
    function setPace(layerName, fromLeft, fromTop, motionSpeed)
    {
        eval(layerName) . gapLeft = (Math . max(eval(layerName) . curLeft, fromLeft) - Math . min(eval(layerName) . curLeft, fromLeft)) / motionSpeed;
        eval(layerName) . gapTop = (Math . max(eval(layerName) . curTop, fromTop) - Math . min(eval(layerName) . curTop, fromTop)) / motionSpeed;
        // Ouvre le menu
        moveAlong(layerName, eval(layerName) . gapLeft, eval(layerName) . gapTop, fromLeft, fromTop)
    } 
     
    // Définition du menu à "fermé" lors de l'arrivée sur le site
    var expandState = 0;
     
    // Fonction Expand ()
    function expand()
    {
        if (expandState == 0) { // si le menu est fermé
            // Passe les paramètres d'ouverture à la fonction setPace qui contient la fonction d'ouverture "moveAlong()"
            // setPace ("nom du calque", "position par rapport à la gauche", "position en hauteur", "vitesse d'ouverture")
            setPace("master", 0, topOpen, 10); 
            // Modification de l'image "menu" :
            if (ie) {
                document . menutop . src = "7/menub.gif";
            } else if (ns6) {
                document . getElementById("img_menu") . innerHTML = "<img src=\"7/menub.gif\" border=\"0\" width=\"18\" height=\"70\">";
            } 
            expandState = 1; // définition de l'état à "ouvert"
        } else { // Si le menu est ouvert
            setPace("master", -120, topClosed, 10); // Referme le menu
            // Modification de l'image "menu" :
            if (ie) {
                document . menutop . src = "7/menu.gif";
            } else if (ns6) {
                document . getElementById("img_menu") . innerHTML = "<img src=\"7/menu.gif\" border=\"0\" width=\"18\" height=\"70\">";
            } 
            expandState = 0; // définition de l'état à "fermé"
        } 
    } 
     
     
    //-->
    </script>
    Partie entre <body> et </body> :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    <div id="master">
    	<div id="menu">
    	<table border="0" width="18" cellspacing="0" cellpadding="0">
    		<tr>
    			<td width="100%">
    			<a href="javascript:expand()" onfocus="this.blur()">
    			<div id="img_menu">
    			<img name="menutop" border="0" src="7/menu.gif" width="18" height="70">
    			</div>
    			</a>
    			</td>
    		</tr>
    	</table>
    	</div>
     
    	<div id="top">
    	<table border="0" width="120" cellspacing="0" cellpadding="0">
    		<tr>
    			<td width="100%"><img border="0" src="7/top.gif" width="120" height="6"></td>
    		</tr>
    	</table>
    	</div>
     
    	<div id="liens">
    	<table border="0" width="120" cellspacing="0" cellpadding="5">
    		<tr>
    			<td width="100%">
    			<table border="0" width="100%" bgcolor="#808080" cellspacing="0" cellpadding="0">
    				<tr>
    					<td width="100%">
    					<table border="0" width="100%" cellspacing="1" cellpadding="5">
    						<tr>
    							<td width="100%" bgcolor="#FFFFFF">
    							<a href="#" class="NavJump"><b>Lien 1</b></a><br>
    							<a href="#" class="NavJump"><b>Lien 2</b></a><br>
    							<a href="#" class="NavJump"><b>Lien 3</b></a><br>
    							<a href="#" class="NavJump"><b>Lien 4</b></a><br>
    							</td>
    						</tr>
    					</table>
    					</td>
    				</tr>
    			</table>
    			</td>
    		</tr>
    	</table>
    	</div>
    </div>
     
    <script language = "javascript">
    <!--
    if (ie) { var sidemenu = document . all . master; }
    if (ns) { var sidemenu = document . master; } 
    if (ns6) { var sidemenu = document . getElementById("master"); } 
     
    // Fonction pour que le menu reste toujours visible lors du scroll
    function FixY()
    {
        if (expandState == 0) {
            if (ie || ns6) { sidemenu . style . top = document . body . scrollTop + topClosed; } 
            if (ns) { sidemenu . top = window . pageYOffset + topClosed; } 
        } else {
            if (ie || ns6) { sidemenu . style . top = document . body . scrollTop + topOpen; } 
            if (ns) { sidemenu . top = window . pageYOffset + topOpen; } 
        } 
    } 
    // Fonction setInterval qui appelle toutes les 100 ms la fonction FixY qui détecte la position du menu et le remet en place s'il y a scroll
    setInterval("FixY()", 100);
    //-->
    </script>
    Pour le peu que je comprenne du script, il faut modifié quelques valeurs dans le JavaScript je pense.

    +++
    pihug12 8)

  5. #5
    Futur Membre du Club
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Points : 8
    Points
    8
    Par défaut
    Bonjour tout le monde !!

    J'ai essayé de tout modifier en changeant "Top en Left" et "Left en Bottom" mais c'est la catas trophe je n'obtiens pas du tout ce que je veux.
    S'ils vous plait aidez-moi j'apprend actuellement le XHTML-CSS & le PHP, je ne me sens pas capable de voir le JavaScript en même temps.

    Merci pour se qui vont me répondre et m'aider !
    pihug12 8)

  6. #6
    Futur Membre du Club
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Points : 8
    Points
    8
    Par défaut
    Aidez-moi s'ils vous plait !!

    pihug12 8)

Discussions similaires

  1. Menu en bas de page trop bas
    Par gnova dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 23/02/2011, 21h54
  2. Menu de bas de page centré
    Par Mister Paul dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 07/11/2010, 11h19
  3. menu dynamique en bas de la page
    Par mohammed_amine_wardy dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 20/10/2010, 21h25
  4. [CSS 2] Positionner le menu en Bas de Page
    Par elition dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 21/04/2010, 17h41
  5. Menu en bas de page, superposition de div
    Par Yelloz dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/05/2009, 09h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo