PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 26/05/2017 19:33:06

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 754
Site Web

Et ton menu, il est pas collant ?

Si vous scrollez comme un fou avec la molette de votre souris pour faire défiler les pages de votre site PluXml, vous êtes certainement agacé de voir disparaître rapidement le menu.

Une vieille solution consiste à placer un bouton à cliquer en bas à droite de l'écran pour remonter "à donf" au haut de la page. Un endroit où on ne pose jamais le regard.

Cela oblige à rajouter un bout de code en javascript pour gérer l'affaire.
Et je ne m'étendrais pas sur ceux qui sortent l'artillerie lourde avec JQuery pour cela. A croire que IE6 est encore vivant.

Mais depuis la sortie de CSS3, il existe la règle "position: sticky" (collant) qui permet de régler ce problème en 3 lignes dans votre thème. Voici comment:

Dans le fichier css/theme.css de votre thème préféré (defaut pour les moins courageux) : repérez les règles qui s'appliquent à la class .nav et rajoutez ceci :
.nav {
  position: sticky;
  top: 0;
  z-index: 2;
}
C'est pas très compliqué. Et cela marche avec les versions 5.5 et 5.6 de PluXml.
Pour en savoir plus :

Voir une démo

Dernière modification par bazooka07 (08/06/2017 11:56:20)

Hors ligne

#2 26/05/2017 21:12:23

webasso
Membre
Inscription : 04/10/2013
Messages : 284

Re : Et ton menu, il est pas collant ?

Merci Jean Pierre,
C'est vraiment plus sympa !

Hors ligne

#3 29/05/2017 07:51:49

JacquesD
Membre
Lieu : Hannut - Belgium
Inscription : 14/02/2013
Messages : 19

Re : Et ton menu, il est pas collant ?

Super, c'est vraiment ultra utile et simple à mettre en oeuvre  cool


Soyez indulgent, je suis un pépé qui tente de s'y retrouver en php !

Hors ligne

#4 29/05/2017 12:24:16

ppmt
Membre
Lieu : UK
Inscription : 18/06/2015
Messages : 340
Site Web

Re : Et ton menu, il est pas collant ?

Par contre dans mon theme j'ai du enlever le . devant nav pour que ca marche.

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés