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 hor. déroulant et s/s menu hor.


Sujet :

JavaScript

  1. #1
    Membre éprouvé
    Avatar de jlb59
    Homme Profil pro
    Retraité
    Inscrit en
    Août 2004
    Messages
    1 024
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2004
    Messages : 1 024
    Par défaut Menu hor. déroulant et s/s menu hor.
    Bonjour à tous,

    J'ai un menu hor. sur mon site qui marche impec !

    Comme j'ai dû rajouter plusieurs pages dont certaines contiennent d'autres pages, je voudrais changer l'aspect du menu hor déroulant.

    Comme maintenant, j'ai plus de liens à mettre, le mieux serait d'avoir un menu hor déroulant qui afficherait un sous-menu hor.

    Je ne sais pas si vous comprenez bien !!!

    Par exemple comme ceci :
    Menu1 Menu2 Menu3
    Sous-menu1 Sous-menu2 Sous-menu3

    Comment faire d'abord le menu, car je suppose qu'il faut du JS, et ensuite, je voudrais qu'il soit habillé et c'est là aussi que j'ai le prb ! Mais là, ça doit être avec du Css non ?

    Merci d'avance de votre aide.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    menu hor ?

    ça mange quoi ces bêtes là ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éprouvé
    Avatar de jlb59
    Homme Profil pro
    Retraité
    Inscrit en
    Août 2004
    Messages
    1 024
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2004
    Messages : 1 024
    Par défaut
    menu hor = menu horizontal

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    desolé je ne comprends pas le sms ...
    ça va mieux en l'ecrivant en toutes lettres.

    Ensuite sans voir ton code c'est un peut difficile de se prononcer.
    je dirais qu'avec un peu de css display inline ou float left sur les elements du sous menu tu devrais arriver à tes fins
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre éprouvé
    Avatar de jlb59
    Homme Profil pro
    Retraité
    Inscrit en
    Août 2004
    Messages
    1 024
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2004
    Messages : 1 024
    Par défaut
    Html :
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    	<title>Menu horizontal</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<meta http-equiv="Content-Language" content="fr" />
    	<script type="text/javascript" src="functions.js"></script>
    <!--	<link rel="stylesheet" href="styles.css" type="text/css" />-->
    <style>
    BODY{background:#2b004b;font-family:verdana;font-size:12px;}
    .item{
      display: none;
    }
    .lienItem{
     text-decoration: none;
     color: #ffffff;
    }
    .lienItem:hover, .styleOverMenu{
     background-color: #FF6600;
     color: #000000;
    }
    .styleOutMenu{
     background-color: #CC0033;
     color: #ffffff;
    }
    </style>
     
    </head>
    <body>
    <div id="menu" onmouseout="mouseOut()">
    <span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu1')">&nbsp;Menu1&nbsp;</span>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu2')">&nbsp;Menu2&nbsp;</span>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu3')">&nbsp;Menu3&nbsp;</span>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <span class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu4')">&nbsp;Menu4&nbsp;</span>
    </div>
     
    <!-- ce div doit posseder au moins le caractère &nbsp; -->
    <!-- on peut y ajouter un message qui sera masque lors du passage de la souris sur le menu -->
    <div id="itemVide">
    &nbsp;
    </div>
     
    <div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu1" class="item">
    <a href="#" class="lienItem">sous menu 11</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 12</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 13</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 14</a>
    </div>
     
    <div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu2" class="item">
    <a href="#" class="lienItem">sous menu 21</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 22</a>
    </div>
     
    <div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu3" class="item">
    <a href="#" class="lienItem">sous menu 31</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 32</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 33</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 34</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 35</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 36</a>
    </div>
     
    <div onmouseout="mouseOut()" onmouseover="mouseOverItem()" id="itemMenu4" class="item">
    <a href="#" class="lienItem">sous menu 41</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 42</a>&nbsp;<span style="font-weight:bold;">|</span>&nbsp;
    <a href="#" class="lienItem">sous menu 43</a>
    </div>
     
    <hr /> 
    </body>
    </html>

    Javascript :
    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
    var oldItem = null;
    var oldMenu = null;
    var timer = null;
     
    /* Fonction appelee lors du mouseover sur le menu */
    function mouseOverMenu(menu, idItem)
    {
     /* on arrete le timer declenche lors d un onmouseout */
     if (timer!=null)
     {
        clearTimeout(timer);
        timer = null;
     }
     
     /* on masque le div vide */
     document.getElementById("itemVide").style.display = "none";
     
     /* si necessaire, on masque le sous-menu precedemmment affiche */
     if (oldItem!=null && oldItem!=idItem)
     {
        document.getElementById(oldItem).style.display = "none";
        oldItem = null;
     }
     
     /* on affiche le sous-menu idItem */
     document.getElementById(idItem).style.display = "block";
     
     /* on redonne le style par defaut de l ancien menu selectionne */
     if (oldMenu!=null && oldMenu!=menu)
     {
        oldMenu.className = "styleOutMenu";
        oldMenu = null;
     }
     
     /* style du menu selectionne */
     menu.className = "styleOverMenu";
     
     
     /* memorisation du choix de l utilisateur */
     oldItem = idItem;
     oldMenu = menu;
    }
     
    /* Fonction appelée lors du mouseover sur un element du sous-menu */
    /* On arrete le chrono */
    function mouseOverItem()
    {
     if (timer!=null)
     {
        clearTimeout(timer);
        timer = null;
     }
    }
     
    /* Fonction appelee a la fin du delai indique dans la methode setTimeout */
    /* On masque les sous-menu et on redonne aux elements leur parametres par defaut */
    function mouseOutT()
    {
     if (oldItem!=null)
     {
        document.getElementById(oldItem).style.display = "none";
        oldItem = null;
     }
     
     if (oldMenu!=null)
     {
        oldMenu.className = "styleOutMenu";
        oldMenu = null;
     }
     
     document.getElementById("itemVide").style.display = "block";
     
     timer = null;
    }
     
    /* declenchement d un timer lors du mouseout sur les elements du menu ou des sous-menus */
    /* le timer est arrete si un evenement onmouseover a lieu */
    function mouseOut()
    {
      if (timer==null)
      {
        timer = setTimeout("mouseOutT()","100");
      }
    }
    C'est un peu comme je voulais le faire mais je ne sais pas comment habiller les menus et s/s-menus !

    Vois un peu ce que ça donne en cliquant ici

  6. #6
    Membre chevronné
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    207
    Détails du profil
    Informations personnelles :
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Novembre 2010
    Messages : 207
    Par défaut
    Ton exemple semble fonctionnel, qu'est-ce qu'il te manque ? A part revoir les couleurs avec le CSS via les propriétés color, background-color et background-image je ne vois pas ce qu'on peut te dire de mieux.

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Membre éprouvé
    Avatar de jlb59
    Homme Profil pro
    Retraité
    Inscrit en
    Août 2004
    Messages
    1 024
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2004
    Messages : 1 024
    Par défaut
    Merci à vous 2.

    Concernant ce que tu m'as écrit SpaceFrog, c'est super, mais le hic est que je suis un peu perdu dans tout ça.
    Tu peux m'expliquer ?

    scourjean, oui je sais que c'est fonctionnel, bon les couleurs c'est pas ça ! Mais ce que je voudrais, c'est mettre par exemple un cadre pour la barre du menu et des autres pour les menus et sous-menus. C'est ça que je n'arrive pas à faire !

    Si tu as une idées assez explicative, je suis preneur !

  9. #9
    Membre chevronné
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    207
    Détails du profil
    Informations personnelles :
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Novembre 2010
    Messages : 207
    Par défaut
    Pour un cadre sur ton menu :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #menu{
    background-color:#.....;
    border: ....;
    }
    Pour un cadre pour tes sous-menus :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .item{
    background-color:#.....;
    border: ....;
    }
    Après à toi de spécifier les couleurs et les bordures si tu veux en mettre (pas obligé)

  10. #10
    Membre éprouvé
    Avatar de jlb59
    Homme Profil pro
    Retraité
    Inscrit en
    Août 2004
    Messages
    1 024
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2004
    Messages : 1 024
    Par défaut
    Merci scourjean

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Menu 'effet' déroulant
    Par Link45 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 25/06/2008, 15h08
  2. Menu vertical déroulant 3
    Par nico3141 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 10/12/2007, 00h21
  3. [CSS]Menu vertical déroulant
    Par bitardo dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 09/07/2007, 15h24
  4. Menu vertical déroulant
    Par Maria1505 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 19/06/2007, 16h33
  5. [PHP-JS] Javascript | Menu php déroulant
    Par bayzil dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 23/01/2007, 11h13

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