Résolu [9.2.02] La position fixe du menu placé en dehors du site n’est pas utilisable en l’état

[Gilux 116]

Bug agaçant s’il en est, avec un menu positionné en dehors du site, menu fixe sélectionné, lorsqu’une entrée de menu comporte une dizaine de sous rubriques (pages enfants), celle-ci se déplie dès que l’on entre dans la surface qu’elle occupe, recouvrant ainsi la page en cours et rendant impossible un clic sur un lien placé dans cette zone, il en est bien sur de même pour l’édition des pages qui devient alors vraiment problématique, nécessitant de devoir placer les champs à modifier sous cette zone.

 

Supprimer le z-index : 10 de #navfixedconnected ne résout pas le problème, il en ajoute un autre, le menu passant sous le header ne permet plus de cliquer les 1ers sous menus, l’utilisation du menu est alors rendue impossible.

 

Pour m’assurer qu’il ne s’agit pas d’un nouveau déboire lié à free.fr, j’ai reproduit la configuration sur un site de test hébergé ailleurs, et également en local :

 

Page de test comportant un lien en haut de la page :

 

Tentative de cliquer sur le lien : dès que la souris entre dans la zone du sous menu, celui-ci s’affiche, masquant alors le texte et rendant impossible le clic sur le lien :

 

Même chose pour l’édition des pages :

 

Mais, dès que menu fixe est dé-sélectionné (position: sticky;) le problème disparaît

 

 

Modifié 28 juillet 2019 par Gilux
bug fixé

[Fred 1 144]

Salut @Gilux

Je viens de tester ce que tu décris et tu as parfaitement raison, il y a un problème avec le survol.

 

[Gilux 116]

Salut @Fred

Ce ne doit pas être grand chose, une règle CSS à modifier sans doutes, mais je n'ai pas trouvé laquelle

[Fred 1 144]

il y a 15 minutes, Gilux a dit :

Salut @Fred

Ce ne doit pas être grand chose, une règle CSS à modifier sans doutes, mais je n'ai pas trouvé laquelle

Je penche plutôt pour du jquery, je te tiens au courant.

[Gilux 116]

il y a 1 minute, Fred a dit :

Je penche plutôt pour du jquery, je te tiens au courant.

OK, merci :)

[Fred 1 144]

C'est bien un pb de CSS...

[Fred 1 144]

Bonjour !

Problème réglé avec du css et un peu de jquery, je la publierai cette semaine après les retours.

 

Voici comment procéder :

core.php

On ajoute les classes, l'un ne servira pas finalement, mais bon, j'aime la symétrie.

2144 $items .= '<ul class="navLevel2">';
  
2208 echo '<ul class="navLevel1">' . $items . '</ul>';

 

core.php.js

A la fin du fichier ajoutez :

$(document).ready(function(){
	/**
	 * Affiche le sous-menu quand il est sticky 
	 */
	$("nav").mouseenter(function(){
		$("#navfixedlogout .navLevel2").css({ 'pointer-events' : 'auto' });
		$("#navfixedconnected .navLevel2").css({ 'pointer-events' : 'auto' });
	});
});

common.css

Après le sélecteur #navfixedconnected, ajoutez

#navfixedconnected .navLevel2,
#navfixedlogout .navLevel2 {
	pointer-events: none;
}

Il y avait peut-être plus simple avec uniquement une solution CSS, avis aux amateurs. Ça se passe ici :

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

nav li {
	display: inline-block;
	position: relative;
}

nav li ul {
	display: block;
	position: absolute;
	width: 200px;
	z-index: -1;
	opacity: 0;
	-webkit-transition: .3s ease-out;
	transition: .3s ease-out;
	padding-left: 10px;	
}

nav li ul li {
	display: block;
	text-align: left;
}

nav li:hover ul {
	z-index: 8;
	opacity: 1;
}

 

[Fred 1 144]

il y a 36 minutes, roger a dit :

j'ai eu un mal fou à faire les captures d'écran (W10 et son outil sont pas top)

 

En copiant à la lettre les trois instructions données ( core.php, core.php.js & common.css) et en ayant bien entendu crée suffisamment de pages en sous rubrique pour faire le test voici le résultat:

1° cela décale les sous rubriques et provoque un double affichage de celles ci.

2° au survol de l’édition du titre de la page, cela fait apparaître toujours les sous rubriques (donc impossible d'écrire en dessous sauf en remontant un peu la page )

 

 

 

 

 

Une de tes balises n’est pas fermée ou tu as ajouté les lignes dans core plutôt que d’ajouter les classes. 

core.js.php core.php common.css

[Fred 1 144]

Copie le core.php ce sera plus simple. 

[Gilux 116]

Arf !

J'aurais du venir ici plus tôt...

Il y a 5 heures, Fred a dit :

Il y avait peut-être plus simple avec uniquement une solution CSS, avis aux amateurs. Ça se passe ici :

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

nav li {
	display: inline-block;
	position: relative;
}

nav li ul {
	display: block;
	position: absolute;
	width: 200px;
	z-index: -1;
	opacity: 0;
	-webkit-transition: .3s ease-out;
	transition: .3s ease-out;
	padding-left: 10px;	
}

nav li ul li {
	display: block;
	text-align: left;
}

nav li:hover ul {
	z-index: 8;
	opacity: 1;
}

J'ai passé + de 2 heures cet aprèm à bidouiller les lignes ci dessus dans le CSS, tout ce que j'ai pu obtenir c'est un vague mal de tête 😞

Je di les fichiers, je teste et je reviens dire quoi

[Gilux 116]

@Fred

Sitôt dit sitôt fait, le résultat est probant, les premières lignes sont désormais accessibles, super ! Le menu fixe est à présent utilisable :)

 

Un léger bémol cependant, si on survole le menu, la liste des sous-menus s'affiche, rien que de très normal jusque la, mais si on quitte la souris du menu pour continuer à visiter la page ou l'on est, les premières lignes sont à nouveau masquées par la liste des sous-menus dès que la souris entre dans leur zone, tu me diras que c'est un peu pinailler, quand on vient placer la souris (ou le doigt) sur le menu, c'est pour l'utiliser et donc changer de page.

[Gilux 116]

Il y a 3 heures, Fred a dit :

core.js.php 10 Ko · 1 download core.php 112 Ko · 1 download common.css 19 Ko · 1 download

Après avoir patché la version 9.2.02 avec ces 3 fichiers, voici le résultat en image :

 

Les premières lignes sont désormais accessibles, le clic sur un lien est possible :

 

Si on survole une fois le menu, les premières lignes sont à nouveau masquées par la liste des sous-menus dès que la souris entre dans leur zone

 

[Fred 1 144]

Salut @Gilux

Tu veux dire que le problème réapparait après un survol du menu horizontal ? Quel est ton navigateur pour moi tout est ok avec FF ?

Si oui, dans core.js.php, ajoute un nouvel événement comme ceci :

$(document).ready(function(){
	/**
	 * Affiche le sous-menu quand il est sticky 
	 */
	$("nav").mouseenter(function(){
		$("#navfixedlogout .navLevel2").css({ 'pointer-events' : 'auto' });
		$("#navfixedconnected .navLevel2").css({ 'pointer-events' : 'auto' });
	});
	$("nav").mouseleave(function(){
		$("#navfixedlogout .navLevel2").css({ 'pointer-events' : 'none' });
		$("#navfixedconnected .navLevel2").css({ 'pointer-events' : 'none' });
	});
});

 

[Fred 1 144]

Ok @roger merci pour le test. On va attendre le retour de @Gilux pour la publication du correctif dans la semaine.

[Gilux 116]

Il y a 8 heures, Fred a dit :

$(document).ready(function(){
	/**
	 * Affiche le sous-menu quand il est sticky 
	 */
	$("nav").mouseenter(function(){
		$("#navfixedlogout .navLevel2").css({ 'pointer-events' : 'auto' });
		$("#navfixedconnected .navLevel2").css({ 'pointer-events' : 'auto' });
	});
	$("nav").mouseleave(function(){
		$("#navfixedlogout .navLevel2").css({ 'pointer-events' : 'none' });
		$("#navfixedconnected .navLevel2").css({ 'pointer-events' : 'none' });
	});
});

 

 

Je viens de modifier core.js.php avec le code ci-dessus, et tester avec Firefox et 2 navigateurs basés sur Chromium (en fait les principaux navigateurs car à part Firefox, tous les autres navigateurs sont basés sur Chromium, tq Edge de Microsoft, Opera, Chrome...

J'ai désinstallé IE 11, car trop merdique, donc je n'ai pas testé ce navigateur, mais qui l'utilise encore aujourd'hui ?

 

Le bug est fixé, merci beaucoup @Fred pour l'attention que tu portes aux utilisateurs de ZwiiCMS, et pour tes compétences, car pour moi le JQUERY est encore du sanscrit !

 

Le menu est à présent parfaitement et normalement utilisable lorsqu'il est placé en dehors du site en position fixe, le problème étant résolu, je modifie le titre de ce sujet en conséquence.

 

Merci encore @Fred, c'est vraiment agréable d'avoir un site complètement fonctionnel :)