18041 sujets

Questions générales et questions de débutants

Menu flottant

Bonjour à toutes et à tous.
Sur mon site responsive (en création) je souhaiterai pouvoir installer un menu flottant horizontal (je crois que cela se nomme comme ça). Sur la page d'accueil je souhaiterai que ma barre de menu soit en bas de page dans toute sa largeur, puis lorsque on scroll sur la page suivante et ainsi de suite, que ma barre de menu soit et reste en haut de page dans toute sa largeur... puis lorsqu'on revient sur la page d'accueil que la barre de menu soit à nouveau en bas de page...
Je suis amateur et je crée mon site depuis peu. Je n'ai pas d'expérience dans ce domaine, mais je veux absolument apprendre.
Est-ce que quelqu'un ou quelqu'une pourrait me donner un coup de main, et m'éclairer de ses lumières ?
Merci à vous.
Alex
Bonjour alexgh,

Je suis débutant aussi mais je vais essayer de t'aider.

Est-ce que c'est ça que tu recherches: https://jsfiddle.net/Lctwtqq1/1/ ?

Je détail le code jquery ici:
//on attache à la fenêtre un gestionnaire d'évènement 'sroll'
//on stocke dans une variable la position verticale de la page 'portfolio'
//on stocke dans une variable la position verticale de la barre de défilement qui est divisée par .50
//lorsque le défilement vertical (en px) sera plus grand que la position verticale de la page 'portfolio'
//le menu s'affiche en haut en rajoutant la classe 'top' à la balise 'nav'
//lorsque l'on défile vers le haut, le menu se replace en bas, en retirant la classe 'top'

Tu peux changer la valeur .50 par ce que tu veux. Elle permet d'afficher un bout de la page 'portfolio' avant de positionner le menu en haut.

Essaie le code dans un navigateur parce que les fenêtres de jsfiddle sont trop petites.
allan00958 a écrit :
Bonjour alexgh,

Je suis débutant aussi mais je vais essayer de t'aider.

Est-ce que c'est ça que tu recherches: https://jsfiddle.net/Lctwtqq1/1/ ?

Je détail le code jquery ici:
//on attache à la fenêtre un gestionnaire d'évènement 'sroll'
//on stocke dans une variable la position verticale de la page 'portfolio'
//on stocke dans une variable la position verticale de la barre de défilement qui est divisée par .50
//lorsque le défilement vertical (en px) sera plus grand que la position verticale de la page 'portfolio'
//le menu s'affiche en haut en rajoutant la classe 'top' à la balise 'nav'
//lorsque l'on défile vers le haut, le menu se replace en bas, en retirant la classe 'top'

Tu peux changer la valeur .50 par ce que tu veux. Elle permet d'afficher un bout de la page 'portfolio' avant de positionner le menu en haut.

Essaie le code dans un navigateur parce que les fenêtres de jsfiddle sont trop petites.

Oui c'est exactement ça que je recherche, ou sinon pas de barre de menu du tout sur la home page. La barre de menu vient se fixer en haut de page dès la seconde page ...
Mais c'est aussi bien celle là.. Smiley smile
Maintenant comment je fais pour insérer tous ces codes ? Les uns après les autres, où ça ?
code visuel ? code source ? dans quelle page au juste ?
Merci à toi de bien vouloir m'aider, c'est sympa.. Entre débutant... Smiley cligne
Modifié par alexgh (08 Aug 2016 - 13:41)
Une chose que je comprends pas.

Ton site, c'est une page avec plusieurs "rubriques" donc 1 fichier html/php? ou plusieurs pages, donc plusieurs fichiers html/php?
allan00958 a écrit :
Une chose que je comprends pas.

Ton site, c'est une page avec plusieurs "rubriques" donc 1 fichier html/php? ou plusieurs pages, donc plusieurs fichiers html/php?

Oui, le site est en responsive donc avec des sections: Section1, Section2, etc. Pour l'instant j'ai un menu en calque donc il s'affiche en haut de page toujours. Ce que je voudrais c'est que sur la home page la barre de menu soit en bas de page...
Un peu comme ce site là :
http://bluepaioun.fr/
Smiley cligne
Tu comprends ? Une fois que l'on passe sur la deuxième page, le menu se met automatiquement en haut de page... Ton exemple ci dessus est juste, mais je ne sais pas comment l'intégrer. Dois-je d'abord créer un calque menu et dans ce cas où faut-il intégrer les différents codes ?
Modifié par alexgh (09 Aug 2016 - 00:38)
Pour intégrer, tu créé ton menu en html, tu lui ajoutes du style en css, et tu adaptes le code jquery en fonction. C'est quoi un calque menu? Essaie de poster du code dans tes réponses.
allan00958 a écrit :
Pour intégrer, tu créé ton menu en html, tu lui ajoutes du style en css, et tu adaptes le code jquery en fonction. C'est quoi un calque menu? Essaie de poster du code dans tes réponses.

Bonjour allan, donc je crée une page htm (ou calque ou Template) et j'y intègre ma barre et mes boutons ? Ensuite j'y ajoute du style en css et adapte le code jQuery ? C'est ça ?
Je posterai le code plus tard, il faut que je change de pc...
Le calque (Template) est une page que tu peux associer aux pages de ton site. Lorsque tu crée une nouvelle page htm pour ton site tu peux l'associer au calque (Template) pour avoir le contenu de ce calque sur ta nouvelle page htm, ainsi de suite... Tu vois ?
Je travaille sur openelement, et toi ?
Smiley cligne
Modifié par alexgh (09 Aug 2016 - 15:58)
Ah je vois. Je code tout à la main pour le moment. Je n'utilise pas de logiciels de création de sites comme openElement, Wix, etc....c'est pour ça que je ne comprenais pas cette affaire de calque.

J'aurais besoin de voir du code pour mieux comprendre et peut-être t'aider.
allan00958 a écrit :
Ah je vois. Je code tout à la main pour le moment. Je n'utilise pas de logiciels de création de sites comme openElement, Wix, etc....c'est pour ça que je ne comprenais pas cette affaire de calque.

J'aurais besoin de voir du code pour mieux comprendre et peut-être t'aider.

De quel code as tu besoin ?
Je te poste ici l'url du site actuel avec le menu actuel : http://www.alexdarcy.fr/site4/
Pour en revenir au calque (Templates), les calques servent à faire une page qui sert à toutes les autres pages, sans besoin de la refaire à chaque fois. Les pages sont donc associées au calque. Les Templates sont générés en html...
Avec openElement (je ne connais que celui là)... tu crée un calque et tu y intègre un code source ou visuel, puis du code css, JQuery, etc.
Est-ce que ces explications t'on aidé ?
Dis moi quel code as tu besoin ? Il faut que tu saches que je suis complètement débutant en la matière, je te conseille d'utiliser également openElement, surtout si tu t'y connais en divers codages...
Mon site est un modèle responsive openElement. Connais tu le Responsive ?
Quelle est la fréquence de ta présence sur ce forum ?
Je fréquente le forum de temps en temps, surtout pour apprendre.

Les logiciels de création de sites sont bien mais lorsque tu veux changer quelque chose, ca devient compliqué surtout si tu connais pas le code un minimum.

Il faudra trouver comment insérer du code jquery dans ton template, regarde la documentation de openElement et ajouter ce code:


$(function(){

  $(window).on('scroll', function(){                       

    var espaceGaleriePosition = $('#WEae03da7a47').offset().top;     
    var windowPos = $(window).scrollTop() / .50;         

    if(windowPos > espaceGaleriePosition)                          
    {
      $('#WEa0646352e2').addClass('top');                       
    }
    else
    {
      $('#WEa0646352e2').removeClass('top');                    
    }
  });
});


Il faudra aussi trouver la feuille de style et y ajouter :


.top{
  top: 0;
}

#WEa0646352e2{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 50;
}
allan00958 a écrit :
Je fréquente le forum de temps en temps, surtout pour apprendre.

Les logiciels de création de sites sont bien mais lorsque tu veux changer quelque chose, ca devient compliqué surtout si tu connais pas le code un minimum.

Il faudra trouver comment insérer du code jquery dans ton template, regarde la documentation de openElement et ajouter ce code:


$(function(){

  $(window).on('scroll', function(){                       

    var espaceGaleriePosition = $('#WEae03da7a47').offset().top;     
    var windowPos = $(window).scrollTop() / .50;         

    if(windowPos > espaceGaleriePosition)                          
    {
      $('#WEa0646352e2').addClass('top');                       
    }
    else
    {
      $('#WEa0646352e2').removeClass('top');                    
    }
  });
});


Il faudra aussi trouver la feuille de style et y ajouter :


.top{
  top: 0;
}

#WEa0646352e2{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 50;
}

Merci allan. Je vais voir et te tiens au courant. Smiley cligne
Sujet clos
Aller à