Et ton menu, il est pas collant ?

bazooka07

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

webasso

Merci Jean Pierre,
C'est vraiment plus sympa !

JacquesD

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

ppmt

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

jol5926

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

bazooka07

Fastoche pour ton petit coin

[== 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.

jol5926

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

bazooka07

?????

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 )

jol5926

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 ?

bazooka07

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

jol5926

Hello,
Merci beaucoup !
Ca fonctionne

Jaguar

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 )

bazooka07

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)