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 :

emplacement des sous menu par rapport aux menus principaux


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Débutant
    Inscrit en
    Septembre 2007
    Messages
    372
    Détails du profil
    Informations forums :
    Inscription : Septembre 2007
    Messages : 372
    Points : 86
    Points
    86
    Par défaut emplacement des sous menu par rapport aux menus principaux
    Bonjour,
    j'ai trouvé un menu en javascript, http://demo.raibledesigns.com/struts...mlDropdown.jsp, dans mon site je met un tableau au centre Dans le quel je met toute mes page, lorsque j'ai inséré le menu, il s"insère trés bien dan la position ou je veux sauf lorsque je clique sur l'une des rubriques, il m'affiche les sous menu dans leur emplacement initial cad celui que j'ai montré plus haut, voilà le code :

    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
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    /*
     
    var currentMenu = null;
    var currentSub = null;
     
    if (!document.getElementById) {
        document.getElementById = function() { return null; }
    }
     
    function initializeMenu(menuId, actuatorId) {
        var menu = document.getElementById(menuId);
        var actuator = document.getElementById(actuatorId);
     
        if (menu == null || actuator == null) return;
            
        if (menu.className == "submenu") {
            initializeSubMenu(menuId, actuatorId);
            return;
        }
        
        actuator.onmouseover = function() {
            if (currentMenu) {
                currentMenu.style.visibility = "hidden";
                this.showMenu();
                
          	    if (currentSub != null) {
                    currentSub.style.visibility = "hidden";
          	    }
    	      }
        }
      
        actuator.onclick = function() {
            if (currentMenu == null) {
                this.showMenu();
            }
            else {
                currentMenu.style.visibility = "hidden";
                currentMenu = null;
            }
     
            return false;
        }
     
        actuator.showMenu = function() {
            menu.style.left = this.offsetLeft + "px";
            menu.style.top = this.offsetTop + this.offsetHeight + "px";
            currentMenu = menu;
            menu.style.visibility = "visible";
     
        }
    }
     
    function initializeSubMenu(menuId, actuatorId) {
        var menu = document.getElementById(menuId);
        var actuator = document.getElementById(actuatorId);
        if (menu == null || actuator == null) return;
        
        actuator.className += " subactuator";
        
        actuator.onmouseover = function() {
            if (currentSub) {
                currentSub.style.visibility = "hidden";
                this.showMenu();
            }
        }
        
        actuator.onclick = function() {
            if (currentSub == null) {
                this.showMenu();
            } else {
                currentSub.style.visibility = "hidden";
                currentSub = null;
            }
    	      return false;
        }
        
        actuator.showMenu = function() {
            menu.style.left = 140 + "px";
            menu.style.top = this.offsetTop - 1 + "px";
            menu.style.visibility = "visible";
            currentSub = menu;
        }
    }
     
    function expandMenus() {
        // empty method - this is here b/c the ListDisplayer
        // calls this method for expanding menus and the list
        // type is determined by JavaScript, rather than Java
    }
     
    // This function loops through all the <ul>'s in the document and
    // initializes the menus for them if they have menu classes
    function initializeMenus() {
        var uls = document.getElementsByTagName("ul");
        for (i = 0; i < uls.length; i++) {
            if (uls[i].className == "menuList") {
                decorateMenu(uls[i]);
            }
        }
    }
     
    function decorateMenu(menu) {
        var links = menu.getElementsByTagName("a");
        var lists = document.getElementsByTagName("ul");
     
        var actuators = new Array();
        var nonActuators = new Array();
        // build an array of actuators
        for (i=0; i < links.length; i++) {
            if (links[i].className == "actuator") {
                actuators[actuators.length] = links[i];
            } else {
                nonActuators[nonActuators.length] = links[i];
            }
        }
     
        var menus = new Array();
        // build an array of menus
        for (i=0; i < lists.length; i++) {
            if (lists[i].className == "menu" || lists[i].className == "submenu") {
                menus[menus.length] = lists[i];
            }
        }
     
        // initialize actuators and menus (number should be the same)
        for (i=0; i < actuators.length; i++) {
            initializeMenu(menus[i].id, actuators[i].id);
        }
        
        // Begin custom code to remember last item clicked (with cookies)
        // add an onclick event to set a cookie on the non-actuators
        for (i=0; i < nonActuators.length; i++) {
            nonActuators[i].onclick=function() {
                setCookie(itemCookie,this.href);
            }
        }
    }
     
    /* You can call initializeMenus() manually from your JSP if this doesn't work.
     * Just put the following code after the last menu tag.
     * <script type="text/javascript">
     *     initializeMenus();
     * </script>
     */
    window.onload = initializeMenus;

    Merci pour votre aide !

  2. #2
    Membre averti Avatar de htr999
    Profil pro
    Étudiant
    Inscrit en
    Février 2008
    Messages
    331
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2008
    Messages : 331
    Points : 394
    Points
    394
    Par défaut
    salut
    on arrive à retrouver le code source JS du site ici,
    mais sans le code de ta page ça va être dur !.!

  3. #3
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 649
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 649
    Points : 11 138
    Points
    11 138
    Par défaut
    bonjour,


    le problème doit venir de cette fonction :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
        actuator.showMenu = function() {
            menu.style.left = this.offsetLeft + "px";
            menu.style.top = this.offsetTop + this.offsetHeight + "px";
            currentMenu = menu;
            menu.style.visibility = "visible";
     
        }
    les positions du menu (left et top) ne tiennent pas compte des coordonnées du nœud parent (dans ton cas la balise TD où se trouve le menu).

  4. #4
    Débutant
    Inscrit en
    Septembre 2007
    Messages
    372
    Détails du profil
    Informations forums :
    Inscription : Septembre 2007
    Messages : 372
    Points : 86
    Points
    86
    Par défaut
    Merci pour ton aide,Comment puis je le faire alors ?

  5. #5
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 649
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 649
    Points : 11 138
    Points
    11 138
    Par défaut
    euh...

    En fait c'est vraiment galère

    Il faut remonter jusqu'au nœud parent le plus haut (BODY).
    Comme ton menu est dans un TD :
    1- tu dois prendre les coordonnées du TD
    2- puis les ajouter aux coordonnées du TR (parent du TD)
    3- puis les ajouter aux coordonnées de TABLE (parent du TR)
    4- puis tant que le nœud parent n'est pas BODY faire une boucle, qui prend et ajoute les coordonnées du parent, du parent, etc....

    et encore là c'est le plus simple : il faut que tu ajoutes à ça les padding et margin ainsi que l'épaisseur des bordures des différents composants.

    Et pour corser le tout : les valeurs retournées dépendent des navigateurs et du DOCTYPE utilisés



    Tu ne peux pas sortir ce menu du tableau ?

  6. #6
    Débutant
    Inscrit en
    Septembre 2007
    Messages
    372
    Détails du profil
    Informations forums :
    Inscription : Septembre 2007
    Messages : 372
    Points : 86
    Points
    86
    Par défaut
    malheureusement non, et vu que je suis null en javascript la solution la plus optimale c'est de changé le menu

  7. #7
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 649
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 649
    Points : 11 138
    Points
    11 138
    Par défaut
    malheureusement non, et vu que je suis null en javascript la solution la plus optimale c'est de changé le menu
    pas forcément....
    Je vais voir si je ne peux pas y faire quelque chose. Mais il te faudra être patient, j'ai pas mal de choses à faire cette semaine.


    Je dois bien avoir un menu dans mes archives

Discussions similaires

  1. ordonner les parents par rapport aux dates des children
    Par fphenix dans le forum Requêtes
    Réponses: 4
    Dernier message: 11/03/2011, 13h29
  2. Placer des table les unes par rapport aux autres.
    Par IyF33 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 13
    Dernier message: 03/07/2008, 09h29
  3. Avantage des EJB par rapport aux POJO
    Par Baptiste Wicht dans le forum JPA
    Réponses: 6
    Dernier message: 13/03/2008, 10h58
  4. Gestion des pages par rapport aux menus
    Par darontankian dans le forum Langage
    Réponses: 3
    Dernier message: 31/01/2008, 21h59
  5. Sous-titres en retrait par rapport aux titres ?
    Par ElGreco2055 dans le forum Mise en forme
    Réponses: 0
    Dernier message: 27/08/2007, 20h57

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