Menu et ouverture div.

Version imprimable

Bonjour,

Je suis complètement perdu dans un menu.

Son rôle est l'ouverture d'un div en z-index, celui-ci comporte deux parties, un logo en partie haute, et pour la partie basse, le rapport détaillé en lien avec l'appel du menu.

La partie du script est relativement fonctionnelle, le scroll du menu est ok, les div s'ouvrent correctement. Avec pour effet non désiré, que lorsque je vais sur un div de détail, c'est celui du dernier menu qui vient remplacer celui demandé.

Code:

1
2
3
<div id="utilsCat" class="utilitiesNavCall" onmouseover="navMain(utilsCat,CatS,utilsCatD)"><div id="CatS" class="utilitiesNavCallIn"><span>Catégorie</span></div></div>
<div id="utilsMark" class="utilitiesNavCall" onmouseover="navMain(utilsMark,MarkS,utilsMarkD)"><div id="MarkS" class="utilitiesNavCallIn"><span>Enseigne</span></div></div>
<div id="utilsFinance" class="utilitiesNavCall" onmouseover="navMain(utilsFinance,FinanceS,utilsFinanceD, )"><div id="FinanceS" class="utilitiesNavCallIn"><span>Finance</span></div></div>

Code:

1
2
3
4
5
6
7
8
9
<div id="utilsCalled">
    <div id="utilsCalledLogo"></div>
    <div id="utilsCalledContent">
        <!-- Utilities | Content | Nav -->
        <div id="utilsCatD">include category</div>
        <div id="utilsMarkD">include enseigne</div>
        <div id="utilsFinanceD">include finance</div>
    </div>
<!-- Utilities | Content | End -> For Utilies Nav Main & Nav Rescue | Called --></div>

Code:

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
// Define Visibility for utilsCalled.
const utilsCalled = document.getElementById('utilsCalled');
    function utilsCalledV() { utilsCalled.style.display = 'flex'; }
    function utilsCalledH() { utilsCalled.style.display = 'none';}
 
function navMain(c, d, x) { // c = call // d = div title // x = called
 
  c.onmouseover = function () {
    utilsCalledV();
    x.style.display = 'flex';
    d.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    d.style.textShadow = '2px 2px 2px #231a164D'; };
  c.onmouseout = function () {
    utilsCalledH();
    x.style.display = 'none';
    d.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    d.style.textShadow = 'none'; };
  utilsCalled.onmouseover = function () {
    utilsCalledV();
    x.style.display = 'flex';
    d.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    d.style.textShadow = '2px 2px 2px #231a164D'; };
  utilsCalled.onmouseout = function () {
    utilsCalledH();
    x.style.display = 'none';
    d.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    d.style.textShadow = 'none'; };
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#utilsCalled {
    z-index:25;
    position: fixed; top: 0; left:0;
    width: calc(100% - var(--widthUtilities));
    height: calc(100% - var(--heightFooter));
    flex-direction: column;
    background-color: #ffffff;
    padding: 0 0 26px 0;
    display: none;}
    #utilsCalledLogo {
        width: 100%;
        height: var(--heightCommunication); min-height: var(--heightCommunication);
        border-bottom: 1px solid #231a16;
        padding: 6px 0;
        justify-content: center; align-items: center; }
    #utilsCalledContent {
        flex-grow: 1;
        padding: 10px 20px 0 20px;
        overflow-y: auto; }
 
    /* Page Called | Main Menu */
    #utilsCatD { width: 100%; display: none; }
    #utilsMarkD { width: 100%; display: none; }
    #utilsFinanceD { width: 100%; display: none; }

semble résolu par imbrication

Code:

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
var utilsCalled = document.getElementById('utilsCalled');
 
var utilsCat = document.getElementById('utilsCat');
var CatS = document.getElementById('CatS');
var utilsCatD = document.getElementById('utilsCatD');
 
utilsCat.onmouseover = function () {
  utilsCalled.style.display = 'flex';
  utilsCatD.style.display = 'flex';
  CatS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
  CatS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    utilsCatD.style.display = 'flex';
    CatS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    CatS.style.textShadow = '2px 2px 2px #231a164D';
  }
}
utilsCat.onmouseout = function () {
  utilsCalled.style.display = 'none';
  utilsCatD.style.display = 'none';
  CatS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
  CatS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    utilsCatD.style.display = 'none';
    CatS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    CatS.style.textShadow = '2px 2px 2px #231a164D';
  }
}

11/04/2023, 00h39
PrincessLoiseau

Par contre,

En ouvrant la page et en passant entre les choix du menu.

Menu Un
Menu Deux
Menu Trois

Il y a micro temps d'adaptation qui flash le fond, ce qui donne un scintillement.
Cela n’apparaît qu'au premier passage.

Qu'y a t'il à utiliser pour supprimer ce temps de latence ?
11/04/2023, 10h40
mathieu

avez-vous essayé de faire les changements de couleur dans le code css ?
et ensuite le code javascript s'occupe juste de modifier la classe css des éléments.

Bonjour mathieu,

Oui, cela a été testé, cela n'a aucune incidence.
Si ce n'est que je dois garder du changement de couleur en script lorsque je quitte le menu pour me diriger sur la div affichée. (utilsCalled englobant les pages d'appels utilsCatD, utilsMarkD et utilsFinanceD)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Utilities | Main */
        #utilitiesMainMenu { 
            width: 100%; height: 100%; flex-direction: column; flex-wrap: wrap; justify-content: flex-end;
            padding: 10px 0 10px 0;
            border-left: 1px solid #ffffff; }
            .utilitiesNavCall { width: 100%; height: 50px; justify-content: center; align-items: center; cursor: pointer;}
            .utilitiesNavCallIn { 
                width: 94%; height: 90%; 
                justify-content: center; align-items: center;
                background: linear-gradient(45deg, #42f5c2 0%, #1da881 96%);
                color: #090e0d; } /*  090e0d */
 
            /*.utilitiesNavCallIn:hover { 
                    background: linear-gradient(45deg, #42f5c2 85%, #1da881 100%);
                    text-shadow: 2px 2px 2px #231a164D; }
            .utilitiesNavVoid { width: 100%; flex-grow: 1;}*/

Pour les problèmes de scintillements, c'est parce que le script passe par un appel, exemple : onmouseover="navMain(utilsCat,CatS,utilsCatD)" et du coup, c'est le temps de mise en place qui provoque cet inconvénient.

J'ai fait un test direct via le script. Cela ne provoque plus le scintillement et répond directement.

Code:

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
var utilsCalled = document.getElementById('utilsCalled');
 
const utilsCat = document.getElementById('utilsCat');
const CatS = document.getElementById('CatS');
const utilsCatD = document.getElementById('utilsCatD');
 
utilsCat.onmouseover = function () {
  utilsCalled.style.display = 'flex';
  utilsCatD.style.display = 'flex';
  CatS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
  CatS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    utilsCatD.style.display = 'flex';
    CatS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    CatS.style.textShadow = '2px 2px 2px #231a164D';
  }
}
utilsCat.onmouseout = function () {
  utilsCalled.style.display = 'none';
  utilsCatD.style.display = 'none';
  CatS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
  CatS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    utilsCatD.style.display = 'none';
    CatS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    CatS.style.textShadow = '2px 2px 2px #231a164D';
  }
}
 
var utilsMark = document.getElementById('utilsMark');
var MarkS = document.getElementById('MarkS');
var utilsMarkD = document.getElementById('utilsMarkD');
 
utilsMark.onmouseover = function () {
  utilsCalled.style.display = 'flex';
  utilsMarkD.style.display = 'flex';
  MarkS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
  MarkS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    utilsMarkD.style.display = 'flex';
    MarkS.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    MarkS.style.textShadow = '2px 2px 2px #231a164D';
  }
}
utilsMark.onmouseout = function () {
  utilsCalled.style.display = 'none';
  utilsMarkD.style.display = 'none';
  MarkS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
  MarkS.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    utilsMarkD.style.display = 'none';
    MarkS.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    MarkS.style.textShadow = '2px 2px 2px #231a164D';
  }
}

Alors c'est très fonctionnel, mais je me vois écrire pour chaque appel du menu (ici deux : utilsCat et utilsMark) un bout de code. Vu qu'il y a +- 18 appels.
Je réfléchi a fonction réutilisable pour chaque lien du menu.

En partant sur quelques chose comme ceci, mais y'a truc qui m'écharpe ? Puisque c'est (utilsMark.onmouseover=true) qui est gardé fonctionnel.

Code:

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
var utilsCalled = document.getElementById('utilsCalled');
 
const utilsCat = document.getElementById('utilsCat');
const CatS = document.getElementById('CatS');
const utilsCatD = document.getElementById('utilsCatD');
 
const utilsMark = document.getElementById('utilsMark');
const MarkS = document.getElementById('MarkS');
const utilsMarkD = document.getElementById('utilsMarkD');
 
if (utilsCat.onmouseover=true) { var call = utilsCat; var title = CatS; var called = utilsCatD; }
if (utilsMark.onmouseover=true) { var call = utilsMark; var title = MarkS; var called = utilsMarkD; }
 
call.onmouseover = function navOver() {
  utilsCalled.style.display = 'flex';
  called.style.display = 'flex';
  title.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
  title.style.textShadow = '2px 2px 2px #231a164D';
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    called.style.display = 'flex';
    title.style.background = 'linear-gradient(45deg, #42f5c2 85%, #1da881 100%)';
    title.style.textShadow = '2px 2px 2px #231a164D';
  };
};
 
call.onmouseout = function navOut() {
  utilsCalled.style.display = 'none';
  called.style.display = 'none';
  title.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
  title.style.textShadow = 'none';
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    called.style.display = 'none';
    title.style.background = 'linear-gradient(45deg, #42f5c2 0%, #1da881 96%)';
    title.style.textShadow = 'none'; };
};

Le html devenant ainsi :

Code:

1
2
<div id="utilsCat" class="utilitiesNavCall"><div id="CatS" class="utilitiesNavCallIn"><span>Catégorie</span></div></div>
<div id="utilsMark" class="utilitiesNavCall"><div id="MarkS" class="utilitiesNavCallIn"><span>Enseigne</span></div></div>

Bonjour,
il y a des choses surprenantes dans ce que tu fais comme

Code:

if (utilsCat.onmouseover=true) { var call = utilsCat; var title = CatS; var called = utilsCatD; }

tu affectes la valeur true à un événement ... !!!!

Si j'ai bien compris ce que tu cherches à faire, afficher/masquer un élément particulier fonction du survol d'un autre, il y a des façons simple de résoudre ce mécanisme.

Sur base de ce code HTML :
Code:

1 2 3 4 5 6 7 <div class="title" data-ref="text-1">Un</div> <div class="title" data-ref="text-2">Deux</div> <div class="title" data-ref="text-3">Trois</div> <hr> <div id="text-1" class="title-text">Texte pour Un</div> <div id="text-2" class="title-text">Texte pour Deux</div> <div id="text-3" class="title-text">Texte pour Trois</div>
la relation entre les éléments « title » et « title-text » se fait grâce à l'attribut « data-ref ».
Le code JavaScript pour faire fonctionner cela se résume à :
Code:

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 // récup. des éléments à traiter const elementsTitle = document.querySelectorAll(".title"); const elementsText = document.querySelectorAll(".title-text"); // function communes pour enter or leave function handleEvent(e) { const el = e.target ; // masque tous les elementsText elementsText.forEach((el) => { el.style.display = "none"; }); switch (e.type) { case "pointerenter": // récup. élément lié const idElementText = el.dataset.ref; const elText = document.getElementById(idElementText); elText.style.display = ""; break; case "pointerleave": break; } } // affectation des événements elementsTitle.forEach((el) => { el.addEventListener("pointerenter", handleEvent); el.addEventListener("pointerleave", handleEvent); }) // masque les éléments Texte par défaut handleEvent({ target: null });
le CSS fait le reste pour la mise en forme et tu peux ajouter autant de liaison que tu le souhaites sans modifier le code.

Ici on modifie uniquement le display des éléments mais on pourrait tout aussi bien ajouter/supprimer une class CSS si besoin.

Résolu

Code:

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
var utilsCalled = document.getElementById('utilsCalled');
const utilsCat = document.getElementById('utilsCat');
const CatS = document.getElementById('CatS');
const utilsCatD = document.getElementById('utilsCatD');
 
// etc...
 
utilsCat.addEventListener("mouseover", navMain(utilsCat, CatS, utilsCatD));
// etc..
 
function navMain(call, title, called) {
 
call.onmouseover = function navOver() {
  utilsCalled.style.display = 'flex';
  // etc ..
  utilsCalled.onmouseover = function () {
    utilsCalled.style.display = 'flex';
    // etc .. }; };
 
call.onmouseout = function navOut() {
  utilsCalled.style.display = 'none';
  // etc ...
  utilsCalled.onmouseout = function () {
    utilsCalled.style.display = 'none';
    // etc ... }; };
}

Code:

1
2
3
4
5
6
7
<div id="utilsCalled">
    <div id="utilsCalledLogo"></div>
    <div id="utilsCalledContent">
        <div id="utilsCatD">include category</div>
        <!-- etc ... -->
    </div>
</div>

11/04/2023, 18h16
PrincessLoiseau

#6

Merci pour cette interprétation. Pour laquelle je n'y serait point arrivé.
Cela laisse de la marche.

Je vais me lancer dans sa compréhension technique. Histoire de déchiffrer tout cela.

Pour ce que je cherchais à exécuter :

Il y a un menu sur un coté de l'écran. Celui-ci sert à l'appel display couvrant l'autre partie de l'écran, par dessus le contenu général.
Je devais donc afficher le display, quitter de la souris le menu pour interagir avec le display. Garder le menu actif (il y en plusieurs en couches), ainsi que son lien de correspondance, également actif.

Ce display; a la partie haute égale et contenu identique pour tous les appels; donc je devais également, en appelant ce display, appeler un page correspondante au lien. Je dis page, puisque ce sera à terme du include.

1) liens dans un menu à droite.

2) display à afficher à gauche
2.1) partie haute identique.
2.2) partie basse unique à chaque lien du menu droite.

Citation:
Envoyé par NoSmoking
Bonjour,
Code:

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 // récup. des éléments à traiter const elementsTitle = document.querySelectorAll(".title"); const elementsText = document.querySelectorAll(".title-text"); // function communes pour enter or leave function handleEvent(e) { const el = e.target ; // masque tous les elementsText elementsText.forEach((el) => { el.style.display = "none"; }); switch (e.type) { case "pointerenter": // récup. élément lié const idElementText = el.dataset.ref; const elText = document.getElementById(idElementText); elText.style.display = ""; break; case "pointerleave": break; } } // affectation des événements elementsTitle.forEach((el) => { el.addEventListener("pointerenter", handleEvent); el.addEventListener("pointerleave", handleEvent); }) // masque les éléments Texte par défaut handleEvent({ target: null });
Bien, j'ai pris le temps de la compréhension.
Cela est intéressant pour la partie data-ref="".

J'ai su faire l'appel du display général et de son contenu en fonction du lien.

Par contre cela devient bien contraignant, à partir du moment ou il faut :
- récupérer l'ld du <div class="title" data-ref="text-1">Un</div> par un .class ?
- récupérer l'Id du sous-parent du div <div class="title" data-ref="text-1"> puisque il y a dans celui-ci un autre div de taille inférieur, à modifier par survol.

Résultat, trop de terme techniques. Dont par les mots, la documentation est difficile.

Dans le style :
Vous appeler, const el = e.target ;,
Pour obtenir l'Id :
Code:

1 2 const idElementText = el.dataset.ref; const elText = document.getElementById(idElementText);
Quid de l’appelant ? elementsTitle = document.querySelectorAll(".title"); est-ce un .parent ? .parentNode ou autre chose ?
le dataset.ref est compréhensible puisque à identifiant unique. Mais comment récupérer l'Id par un .class ? du <div id="uniqueUn" class="title" data-ref="text-1">Un</div>.

Bref, entre l'ancien jeu auquel j'ai abouti, peut-être avec quelques lignes de plus et une chipote minime si rajout d'un lien; et la méthode moderne incompréhensive sauf à y être perpétuellement investi dans une multiplication de terme.

Vous remerciant