Et ton menu, il est pas collant ?

bazooka07bazooka07 PluXml Lead Developer, Moderator
décembre 2017 modifié dans Modifications
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 :
[== CSS ==]
.nav {
  position: -webkit-sticky; /* Pour ceux qui aiment la Pomme */
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: #444;
  color: #fff;
}
C'est pas très compliqué. Et cela marche avec les versions 5.5 et 5.6 de PluXml.
Pour en savoir plus :
[list=*]
[*]https://developer.mozilla.org/fr/docs/Web/CSS/position[/*]
[*]https://forum.alsacreations.com/topic-4-80151-1-A-propos-de-la-position-sticky.html[/*]
[/list]

Voir une démo

Réponses

  • webassowebasso Member
    Merci Jean Pierre,
    C'est vraiment plus sympa !
  • Super, c'est vraiment ultra utile et simple à mettre en oeuvre :cool:
  • ppmtppmt Member
    Par contre dans mon theme j'ai du enlever le . devant nav pour que ca marche.
  • jol5926jol5926 Member
    décembre 2017 modifié
    Bonjour,
    Voilà le code que j'ai dans mon fichier css.
    Je n'arrive pas à avoir un menu fixe.
    J'ai besoin d'aide.
    [== Indéfini ==]
    /* NAVIGATION ================= */
    
    .nav {
        height: 1.9rem;
        margin-bottom: 10px;
    }
    
    .menu.expanded  li {
    	margin: 0 8px 0 8px;
    	border-radius: 4px;
    }
    .menu.expanded li.active a,
    .menu.expanded li.active a:hover {
    	padding: 0 10px 0 10px;
    	background-color: #90B0CE;
    	color: #fff;
    	border-radius: 4px;
    }
    .menu.expanded a,
    .menu.expanded a:hover {
    	color: #B18D51;   /*color des titres du menu du header*/
    }
    
    @media (max-width: 767px) {
    	.nav {
    		background-color: #fff;
    		border-bottom: 1px solid #bbb;
    		height: auto;
    		left: 0;
    		max-height: 200px;
    		overflow-y: auto;
    		position: fixed;
    		top: 0;
    		width: 100%;
    		z-index: 9999;
    	}
    	.nav .menu.expanded li:hover {
    		background-color: #ddd;
    	}
    	.nav a {
    		color: #258fd6;
    	}
    	.nav a:hover {
    		color: #444;
    	}
    	.responsive-menu label {
    		background-color: #222;
    	}
    	.header {
    		margin-top: 2rem;
    		text-align: center;
    	}
    }
    
    .repertory {
    	margin-top: 2rem;
    }
    
    

    Le thème utilisé est lightblue ==> Thème réalisé par Pluxopolis

    Merci
    Jol
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Fastoche pour ton petit coin :D
    [== CSS ==]
    .nav {
        position: -web-sticky; /* Pour ceux qui aiment la Pomme */
        position: sticky;
        top: 0;
        z-index: 20;
        background-color: lavender;
    }
    

    La couleur est un peu au pif.
  • jol5926jol5926 Member
    décembre 2017 modifié
    Salut Bazooka07,
    J'ai besoin de compléments d'infos car ça ne fonctionne pas.
    Je dois surement mal faire les choses.
    Que dois-je ajouter ou supprimer et à quel endroit ?
    Merci de ton aide

    Jol
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    décembre 2017 modifié
    ?????

    Les modifs sont à faire dans le fichier themes/lightblue/css/theme.css.

    Tu utilises quoi comme navigateur ?
    Si tu un Mac, il faut avoir "position: -web-sticky". J'ai testé cela dans un Apple Store avec un IMac Pro

    Penser à recharger le cache du navigateur ( touche F5 en principe )
  • bazooka07 a écrit:
    ?????

    Les modifs sont à faire dans le fichier themes/lightblue/css/theme.css.

    Tu utilises quoi comme navigateur ?
    Si tu un Mac, il faut avoir "position: -web-sticky". J'ai testé cela dans un Apple Store avec un IMac Pro

    Penser à recharger le cache du navigateur ( touche F5 en principe )

    J'ai un mac. J'ai bien ajouté ce que tu as noté mais cela ne fonctionne pas.
    Est-ce que je dois supprimer du code dans le fichier css pour ajouter le tien ?
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    décembre 2017 modifié
    Autant pour moi, il faut utiliser -webkit-sticky:
    [== CSS ==]
    .nav {
        position: -webkit-sticky; /* Pour ceux qui aiment la Pomme */
        position: sticky;
        top: 0;
        z-index: 20;
        background-color: lavender;
    }
    

    Voici 2 sites qui marchent et que j'ai testé lors de mon dernier passage dans un Apple Store:
    http://kazimentou.fr
    http://echecs-annonay.fr
  • Hello,
    Merci beaucoup !
    Ca fonctionne
    ;)
  • Alors je l'ai mis en place, c'est fonctionne nickel, mais le menu passe dessous les Contenus. (j’utilise ton thème aussi http://www.justeasy.org/visualwizardpro/theme.htm )
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Augmente la valeur de z-index.
    Certains mettent une valeur de 9999, voire plus, pour tout écraser.

    Je n'ai pas ce thème installé sur un site, donc je ne peux pas donné de valeur minimale.
    Si tu as un souci, donne moi un lien vers ton site. Il faut une minute pour régler le problème avec Firefox ( touche F12)
Connectez-vous ou Inscrivez-vous pour répondre.