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 roger
      Ce thème sombre avec une touche de transparence vous offrira, en étant totalement responsif*... placement en dehors du site pour le header, menu et footer.
       
      👉 Vous trouverez aussi son thème administration totalement adapté au désigne du thème principal ici:
      http://forum.zwiicms.com/files/file/157-thème-spacial-administration/
       
      - Une bannière 100% adaptée à votre largeur de site
      - Son menu lui aussi 100% adapté selon vos goûts
      - Le bas de votre site 100% à l'identique que ci dessus, que du bonheur non?
       
      * Tout ceci placé en dehors du site s'adaptera automatiquement à la largeur de votre site (750/960 ou 1170px) pour ceux qui adorent placer ces trois espaces là en dehors de l'intérieur du site.
       
      Installation:
      1° Dézipper l'archive nommée "Theme Spacial.zip" sur votre pc.
      2° Dans le dossier "Theme Spacial" vous trouverez 3 archives zippée.
          -  750px.zip
          -  960px.zip
          -  1170px.zip
      3° Ouvrir le gestionnaire de fichier du ZwiiCMS (icône dossier en haut à droite de votre barre administrative) vérifiez s'il existe ou créez un dossier nommé theme?
      4° Envoyez toutes ces archives (ou uniquement celle qui vous intéresse suivant la largeur de site que vous préférez) dans le dossier theme
       
      Activation du thème:
      1° Vous rendre dans la personnalisation du site (icône pinceau en haut à droite de votre barre administrative) et cliquez sur l'option Gestion
      2° Sur la gauche choisir "Installer un thème archivé" naviguer dans votre dossier theme et sélectionner le thème à installer.
      3° Il ne vous reste plus qu'à cliquer sur le bouton "Appliquer" pour voir votre thème choisi installé dans votre site.
      IMPORTANT: Pensez à sauvegarder votre thème original si vous désirez revenir en arrière au cas ou....
       
      En images voici ce qui vous attend...

       

       

       

       

       
      Enjoy les amis.
       
      *** N'oubliez pas aussi de revenir sur cette page laisser un petit commentaire si vous avez apprécié le travail réalisé pour ce module, c'est encourageant, gratifiant aussi pour celui qui l'a mis à disposition pour votre plus grand plaisir..
       
      # IMPORTANT A LIRE #
      Vous reconnaissez qu'en utilisant ce thème sur votre site être entièrement responsable en cas de problème quel qu'il soit après sa mise en œuvre, je ne pourrais donc être considéré en aucun cas comme responsable de cet état de fait.
      💡 Pensez alors à faire une sauvegarde intégrale de votre site, ceci vous permettrait alors de revenir en arrière en réinjectant celle ci et retrouver votre site web tel que vous l'aviez conçu avant utilisation du script ci dessus.
    • Par roger
      Ce thème sombre avec une touche de transparence vous offrira, en étant totalement responsif*... placement en dehors du site pour le header, menu et footer.
       
      👉 Vous trouverez aussi son thème administration totalement adapté au désigne du thème principal ici:
      http://forum.zwiicms.com/files/file/157-thème-spacial-administration/
       
      - Une bannière 100% adaptée à votre largeur de site
      - Son menu lui aussi 100% adapté selon vos goûts
      - Le bas de votre site 100% à l'identique que ci dessus, que du bonheur non?
       
      * Tout ceci placé en dehors du site s'adaptera automatiquement à la largeur de votre site (750/960 ou 1170px) pour ceux qui adorent placer ces trois espaces là en dehors de l'intérieur du site.
       
      Installation:
      1° Dézipper l'archive nommée "Theme Spacial.zip" sur votre pc.
      2° Dans le dossier "Theme Spacial" vous trouverez 3 archives zippée.
          -  750px.zip
          -  960px.zip
          -  1170px.zip
      3° Ouvrir le gestionnaire de fichier du ZwiiCMS (icône dossier en haut à droite de votre barre administrative) vérifiez s'il existe ou créez un dossier nommé theme?
      4° Envoyez toutes ces archives (ou uniquement celle qui vous intéresse suivant la largeur de site que vous préférez) dans le dossier theme
       
      Activation du thème:
      1° Vous rendre dans la personnalisation du site (icône pinceau en haut à droite de votre barre administrative) et cliquez sur l'option Gestion
      2° Sur la gauche choisir "Installer un thème archivé" naviguer dans votre dossier theme et sélectionner le thème à installer.
      3° Il ne vous reste plus qu'à cliquer sur le bouton "Appliquer" pour voir votre thème choisi installé dans votre site.
      IMPORTANT: Pensez à sauvegarder votre thème original si vous désirez revenir en arrière au cas ou....
       
      En images voici ce qui vous attend...

       

       

       

       

       
      Enjoy les amis.
       
      *** N'oubliez pas aussi de revenir sur cette page laisser un petit commentaire si vous avez apprécié le travail réalisé pour ce module, c'est encourageant, gratifiant aussi pour celui qui l'a mis à disposition pour votre plus grand plaisir..
       
      # IMPORTANT A LIRE #
      Vous reconnaissez qu'en utilisant ce thème sur votre site être entièrement responsable en cas de problème quel qu'il soit après sa mise en œuvre, je ne pourrais donc être considéré en aucun cas comme responsable de cet état de fait.
      💡 Pensez alors à faire une sauvegarde intégrale de votre site, ceci vous permettrait alors de revenir en arrière en réinjectant celle ci et retrouver votre site web tel que vous l'aviez conçu avant utilisation du script ci dessus.
    • 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.

×
×
  • Créer...