Partage

Menu qui bouge avec le scrool

10 août 2017 à 12:00:47

Bonjour,

J'ai un menu vertical que je souhaite bougé à chaque fois que je descend la page avec le scrool. J'ai mis une postition : fixed comme j'ai vu sur de nombreux sites, le seul problème est que mon menu est vertical, aligné à gauche de la page, je souhaite qu'il descend ..

Pouvez vous m'aidez s'il vous plait ?

Merci ;)

10 août 2017 à 12:11:01

Salut,

Essaye les termes "créer un menu sticky" sur ton moteur de recherche préféré, tu devrais facilement trouver ton bonheur.

Bonne journée,

10 août 2017 à 12:47:35

Malheureusement, je n'arrive pas à trouver le bon code qui fonctionne sur mon menu, même avec changement et adaptation du code pour mon site, je pense que c'est le fait que ça soit un menu vertical, je ne sais absolument pas, je m'y connais que très peu en code pour l'instant..

10 août 2017 à 13:50:20

Peux tu nous montrer ton code html et css afin de t'aider à résoudre ton problème ?
10 août 2017 à 15:09:30

<div class="element">

<nav id="wrapper" style="width: 200px; border:1px solid #754F7D">
	<ul id="table" class="menulist css_menu">

	<li><a href="index.html">Home</a></li>
	<li><div class="arrow buttonbg"><a>Truc de Filles</a></div>
		<ul>
	<li><a href="shopping.html">Shopping</a></li>
	<li><a href="do_it_yourself.html">Do It Yourself</a></li>
	<li><a href="cuisine.html">Cuisine</a></li>
	<li><a href="Voyage.html">Voyage</a></li>
		</ul>
		</li>

	<li><a href="coups_de_coeur.html">Mes coups de coeur</a></li>

	<li><a href="portfolio.html">Portfolio</a></li>

	<li><a href="contact.html">Contact</a></li>
		</ul>
			</nav></div>
En css j'ai supprimé tous ce que j'ai fais sur le menu pour le scrool puisque rien marché..
10 août 2017 à 16:30:18

Bonjour,

Là nous avons le code du menu vertical de gauche, <div class="element" est inutile et les "style="..." doivent être placés dans la CSS
Que veux tu exactement avec ce menu ? qu'il reste  en haut à gauche de l'écran quand on scrolle et qu'on descend dans la page ? Alors il doit être en position:fixed avec une marge gauche pour le contenu du site qui va défiler.

10 août 2017 à 16:57:00

le <div class="element= me sert au differente zone, gauche = menu, centre = texte et droit = pub ect.. Ce menu est celui d'un site, j'ai modifié a ma manière mais c'est le code html que l'on m'a donné, j'ai un autre fichiers css pour tout le menu mais c'est vrai que maintenant je trouve cela assez bizarre...

Donc je fais un

.wrapper {
 position : fixed
 margin : left

c'est ça ?

10 août 2017 à 18:10:45

iid="wrapper" ne sert à rien et il est déconseillé d'utiliser des ID pour les css,
margin:left n'existe pas et n'a aucun effet.
Quand un élément est "display:fixed", on le positionne avec top, bottom, left ou right, par rapport aux bords de la fenêtre car l'élément sort du flux. Par défaut il est positionné avec les valeurs top:0px et left:0px
C'est le contenu qui doit avoir une marge gauche, pour ne pas se trouver sous le menu.
il y a une solution élégante avec flex et trois colonnes dont une à gauche avec une largeur exprimée en rem, on verra plus tard
10 août 2017 à 23:05:37

J'ai changé mon code css et ça fonctionne à peux pres, sauf que je voudrais pas qu'il bouge sur toute la page, je veux dire, j'aimerais qu'il soit fixé a un endroit et tant qu'on ne descend pas avec la souris, le menu ne change pas de place, et quand on remonte la page, qu'il se fixe à un endroit ou je le demande :

voila mon ajout :

position: fixed;
  top : 10%;
  left : 20px;

Je ne veux pas que mon menu dépasse sur mon header, je sais pas comment bien vous expliquer..

EDIT :

J'ai trouvé comment on fait pour ne pas dépasser sur le header, j'ai joué sur les %, l'autre problème est le footer, quelle balises utilisé pour pouvoir stopper le menu à 10px a pres du footer, sans qu'il touche ?



-
Edité par Kaiwy 10 août 2017 à 23:43:01

Menu qui bouge avec le scrool

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown