Aller au contenu
Support de Zwii
  • 0
Gilux

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

Question

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 :

bug-menu-1.jpg.3673c84ce803790f467d5c9ce33c1593.jpg

 

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 :
bug-menu-2.jpg.4c229cbed326f4f8374c5a028ea826f3.jpg

 

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

bug-menu-3.jpg.10ca285f40340c1de0f19df3ec3bd068.jpg

 

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

 

 

Modifié par Gilux
bug fixé

Partager ce message


Lien à poster
Partager sur d’autres sites

14 réponses à cette question

Messages recommandés

  • 0

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.

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
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.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0

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;
}

 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
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 )

1793640673_Annotation2019-07-27182928.png.a0c0a7e2f44d8c5c415d2496e5a5e03c.png  

 

836521463_Annotation2019-07-27183111.png.40ca3a624efcce6b68eb5654e8df1df1.png  

 

742694167_Annotation2019-07-27183247.png.50f9fa2acd2994d651ce997b1c34c8d4.png

 

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

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0

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

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0

@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.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
Il y a 3 heures, Fred a dit :

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 :

01.jpg.89acc5071331a9b5cdaf9d85742c38bf.jpg

 

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

02.jpg.b9fca88aee492f612607f646445ab815.jpg

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0

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' });
	});
});

 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
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 :)

 

  • J'aime 1
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.

  • Contenu similaire

    • Par jasongouzien
      Bonjour, désolé me revoilà cette fois pour trouver une solution pour mettre mon menu en position fixe. 😏
      J'ai réussi à le mettre, mais voyez-vous par la pièce jointe, il y à une chose qui ne colle pas ! 😕
       
      Merci de l'attention que vous aviez pris à mon message, Cordialement Jason GOUZIEN.

    • Par pduchemin
      est  il   possible de  créer un  menu sur  2 sous niveaux  ?
       
      Menu                                   niv 1
      SousMenu                           niv 2
      L sousSousMenu                niv 3
      L sousSousMenu                  niv 3
      SousMenu                          niv 2
       
       
       
       
       
       
    • Par CroqueWeb
      Si les icônes de votre menu sont trop grandes, ou si elles ne sont pas à la même taille les unes par rapport aux autres, voici quelques lignes de CSS qui pourront vous aider à obtenir un meilleur affichage :
       
      /* Items du menu */ nav a > img { max-width: 30px; height: auto; margin: -4px 0; vertical-align: bottom; } Résultat
       
      Avant :
       

       
      Après :
       

×
×
  • Créer...