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 : 887
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 :

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

Voir une démo

Dernière modification par bazooka07 (15/12/2017 16:00:04)

Hors ligne

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

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

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 : 352
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

#5 15/12/2017 13:54:31

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 415
Site Web

Re : Et ton menu, il est pas collant ?

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

Dernière modification par jol5926 (15/12/2017 14:05:49)

Hors ligne

#6 15/12/2017 14:03:08

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

Re : Et ton menu, il est pas collant ?

Fastoche pour ton petit coin big_smile

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

Hors ligne

#7 15/12/2017 14:46:15

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 415
Site Web

Re : Et ton menu, il est pas collant ?

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

Dernière modification par jol5926 (15/12/2017 14:46:32)

Hors ligne

#8 15/12/2017 15:03:23

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

Re : Et ton menu, il est pas collant ?

?????

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 )

Dernière modification par bazooka07 (15/12/2017 15:05:43)

Hors ligne

#9 15/12/2017 15:14:51

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 415
Site Web

Re : Et ton menu, il est pas collant ?

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 ?

Hors ligne

#10 15/12/2017 15:46:03

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

Re : Et ton menu, il est pas collant ?

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

Dernière modification par bazooka07 (15/12/2017 15:46:19)

Hors ligne

#11 15/12/2017 15:53:20

jol5926
Membre
Lieu : Drôme
Inscription : 25/04/2015
Messages : 415
Site Web

Re : Et ton menu, il est pas collant ?

Hello,
Merci beaucoup !
Ca fonctionne
wink

Hors ligne

#12 24/12/2017 12:06:44

Jaguar
Membre
Inscription : 20/12/2017
Messages : 9

Re : Et ton menu, il est pas collant ?

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 )

Hors ligne

#13 24/12/2017 14:01:42

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

Re : Et ton menu, il est pas collant ?

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)

Hors ligne

Pied de page des forums

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