{"id":5491,"date":"2015-11-12T08:43:22","date_gmt":"2015-11-12T07:43:22","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=5491"},"modified":"2017-01-26T12:55:07","modified_gmt":"2017-01-26T11:55:07","slug":"creer-menu-sticky-avec-javascript-css","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/creer-menu-sticky-avec-javascript-css","title":{"rendered":"Cr\u00e9er un menu sticky avec JavaScript et CSS"},"content":{"rendered":"

J’ai boss\u00e9 r\u00e9cemment sur plusieurs sites web, et la requ\u00eate d’un menu sticky<\/em> \u00e9tait quasiment syst\u00e9matique. Parfois elle \u00e9tait justifi\u00e9e, parfois je me rapprochais du contre-exemple ergonomique st\u00e9r\u00e9otyp\u00e9. (Dois-je utiliser un sticky<\/em> menu ?<\/a>) Mais quand m\u00eame ! Je vous propose de voir ensemble comment on peut faire \u00e7a.<\/p>\n

<\/p>\n

Concept du menu sticky<\/em><\/h2>\n

J’aime bien partir d’une id\u00e9e et poser quelques \u00e9l\u00e9ments par \u00e9crit pour ne pas partir t\u00eate baiss\u00e9e dans le code. Dans un premier temps, nous sommes tous d’accord sur la d\u00e9finition du menu sticky<\/em><\/strong> ? C’est ce truc qui colle au haut (souvent) de la page lorsque l’on scroll<\/em> vers le bas.<\/p>\n

Je veux bien diviser le fond (HTML), la forme (CSS) et les interactions (JS), et dans cet ordre l\u00e0 pr\u00e9cis\u00e9ment. Je vais donc m’interdire toute forme d’animation ou de positionnement en JS, je vais utiliser CSS pour cela.<\/p>\n

Le comportement attendu est celui-ci : J’ai un en-t\u00eate avec un logo et un menu qui sont \u00ab\u00a0classiquement\u00a0\u00bb positionn\u00e9s. Au del\u00e0 d’un certain seuil de scroll<\/em> (descente) dans la page, je veux r\u00e9-afficher le menu \u00e0 l’utilisateur pour lui permettre un acc\u00e8s plus rapide. Dans un premier temps, la valeur de scroll<\/em> sera arbitraire (d\u00e9finie manuellement par nos soins), puis dans un second temps nous ferons en sorte que le menu n’apparaisse que lorsque le scroll<\/em> aura pass\u00e9 un certain \u00e9l\u00e9ment dans la page. Enfin, nous verrons \u00e9galement une variante o\u00f9 le menu ne r\u00e9apparait que si l’utilisateur remonte dans la page.<\/p>\n

Nous aurons \u00e0 la fin quelque chose dans ce go\u00fbt :<\/p>\n

D\u00e9monstration<\/a><\/p>\n

La structure de notre menu sticky<\/em><\/h2>\n

Je vous invite \u00e0 utiliser cette structure de menu, et \u00e9ventuellement \u00e0 copier\/coller le Lorem Ipsum<\/em> de ma page de d\u00e9monstration pour avoir du contenu et pouvoir scroll<\/em>er dans votre page.<\/p>\n

<header id=\"header\" role=\"banner\" class=\"main-header\">\r\n\t<div class=\"header-inner\">\r\n \r\n\t\t<div class=\"header-logo\">\r\n\t\t\t<img src=\"logo.png\" alt=\"Creative Juiz\" width=\"150\" height=\"45\">\r\n\t\t<\/div>\r\n \r\n\t\t<nav class=\"header-nav\">\r\n\t\t\t<ul>\r\n\t\t\t\t<li><a href=\"#\">Home<\/a><\/li>\r\n\t\t\t\t<li><a href=\"#\">Our projects<\/a><\/li>\r\n\t\t\t\t<li><a href=\"#\">About us<\/a><\/li>\r\n\t\t\t\t<li><a href=\"#\">Contact<\/a><\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/nav>\r\n \r\n\t<\/div>\r\n<\/header><\/code><\/pre>\n
J’utilise l’\u00e9l\u00e9ment <header><\/code> avec le role banner<\/code> pour d\u00e9finir l’en-t\u00eate de ma page. Le reste est assez classique. Il est important de noter que l’identifiant (header<\/code>) va me servir ici en JS afin d’acc\u00e9der rapidement \u00e0 l’\u00e9l\u00e9ment.<\/p>\n
Les styles de notre sticky<\/em> menu<\/h2>\n
Ces styles vont \u00eatre assez sommaires et ne traitent pas le cas du responsive<\/em>. Dans l’id\u00e9al, l’aspect sticky ne devrait \u00eatre \u00ab\u00a0activ\u00e9\u00a0\u00bb que sur des \u00e9crans assez larges et hauts pour \u00e9viter de g\u00eaner la visibilit\u00e9 du contenu.<\/p>\n
\"Sticky<\/p>\n
Commen\u00e7ons par faire un mini reset de certains styles :<\/p>\n
\/* micro reset *\/\r\n* {\r\n\tbox-sizing: border-box;\r\n}\r\nhtml, body, ul {\r\n\tpadding: 0; margin: 0;\r\n}<\/code><\/pre>\n
Puis \u00e0 d\u00e9finir nos styles de base. Je vais utiliser les couleurs de mon blog, faites comme vous le souhaitez, bien entendu.<\/p>\n
\/* Quelques styles de base *\/\r\nbody {\r\n\tfont-family: Helvetica Neue, Helvetica, Arial, sans-serif;\r\n\tline-height: 1.75;\r\n\tcolor: #F1EEDD;\r\n\tbackground: #B13C2E;\r\n}\r\n.main-header {\r\n\tcolor: #B13C2E;\r\n\tbackground: #FFF;\r\n}<\/code><\/pre>\n
Vous pouvez actualiser votre page dans votre navigateur si vous suivez le tutoriel au fur et \u00e0 mesure, comme cela vous verrez pr\u00e9cis\u00e9ment les modifications que nous faisons.
\nNous allons maintenant placer nos \u00e9l\u00e9ments sur la m\u00eame ligne. Au lieu d’utiliser le positionnement en flottant, j’ai d\u00e9cid\u00e9 d’utiliser table layout<\/em> pour cette fois. Il serait \u00e9galement possible d’utiliser flexbox, mais il faut bien faire un choix \ud83d\ude42<\/p>\n
\/* Les \u00e9l\u00e9ments sont plac\u00e9s l'un \u00e0 c\u00f4t\u00e9 de l'autre *\/\r\n.header-inner {\r\n\tdisplay: table;\r\n\twidth: 100%;\r\n\tmax-width: 1100px;\r\n\tmargin: 0 auto; \/* on centre l'\u00e9l\u00e9ment *\/\r\n\tpadding: 20px 25px; \/* on ventile un peu *\/\r\n}\r\n.header-inner > * {\r\n\tdisplay: table-cell;\r\n\tvertical-align: middle;\r\n}<\/code><\/pre>\n
En utilisant ce positionnement en tableau sans utiliser table-layout: fixed;<\/code> sur le parent, les cellules vont se dimensionner suivant le contenu de chacune. Profitons-en !<\/p>\n
La propri\u00e9t\u00e9 table-layout: fixed;<\/code> permet de d\u00e9finir pr\u00e9cis\u00e9ment les dimensions de chaque cellule. Si vous l’utilisez sans pr\u00e9cision des valeurs de width<\/code> sur les enfants, ces derniers se r\u00e9partiront la largeur disponible, ici 50% chacun. Un tableau sans table-layout: fixed;<\/code> met th\u00e9oriquement plus de temps \u00e0 \u00eatre affich\u00e9 par le navigateur. (on parle de micro\/milli secondes pour effectuer la r\u00e9partition des dimensions)<\/p>\n
Il va maintenant falloir passer notre liste de liens sur une seule ligne et espacer un peu les items les uns des autres. Il faut \u00e9galement que nous alignions le menu \u00e0 droite. Je vais vous montrer une astuce pour \u00e9viter d’utiliser la propri\u00e9t\u00e9 float<\/code>.<\/p>\n
\/* Alignement du menu *\/\r\n.header-nav {\r\n\ttext-align: right;\r\n}\r\n\/*\r\n   Faire passer le menu en inline (inline-block, inline-table ou inline-flex) pour le rendre sensible \u00e0 l'alignement \u00e0 droite. Ses items aussi sont en inline.\r\n*\/\r\n.header-nav ul,\r\n.header-nav li {\r\n\tdisplay: inline;\r\n\tlist-style: none;\r\n}\r\n.header-nav a {\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n\tpadding: 8px 20px;\r\n\tvertical-align: middle;\r\n\tfont-weight: 300; \/* entre regular et light *\/\r\n\tletter-spacing: 0.025em;\r\n\tcolor: inherit;\r\n\ttext-decoration: none;\r\n}<\/code><\/pre>\n
Sur les liens, j’ai d\u00e9cid\u00e9 de faire une petite animation au survol (et focus) : un trait de la taille du mot va venir s’ajouter en remontant vers le mot en fondu. Pour cela je vais utiliser un pseudo-\u00e9l\u00e9ment :after<\/code> pour g\u00e9n\u00e9rer un trait.<\/p>\n
\/* Animation du lien *\/\r\n.header-nav a:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\tbottom: 0; right: 20px; left: 20px;\r\n\theight: 2px;\r\n\tbackground-color: #B13C2E;\r\n\r\n\t\/* Pr\u00e9paration de notre animation *\/\r\n\topacity: 0;\r\n\ttransform: translateY(5px);\r\n\ttransition: all .4s;\r\n}\r\n\/* Le trait va remonter et apparaitre *\/\r\n.header-nav a:hover:after,\r\n.header-nav a:focus:after {\r\n\topacity: .6;\r\n\ttransform: translateY(0);\r\n}\r\n\/* Je vire outline car juste au-dessus je d\u00e9finis un style :focus *\/\r\n.header-nav a:focus {\r\n\toutline: none;\r\n}<\/code><\/pre>\n
Voil\u00e0, nous avons globalement un header minimaliste au go\u00fbt du jour et l’aspect sticky<\/em> de notre menu va pouvoir \u00eatre travaill\u00e9 gr\u00e2ce \u00e0 du JS. Mais avant cela, petite parenth\u00e8ses.<\/p>\n
Menu sticky<\/em> : la propri\u00e9t\u00e9 CSS position: sticky;<\/code><\/h2>\n
La propri\u00e9t\u00e9 CSS position<\/code> et sa valeur sticky<\/code> ont \u00e9t\u00e9 introduites en CSS Level 3 mais a eu beaucoup de mal \u00e0 \u00eatre impl\u00e9ment\u00e9e dans nos navigateurs, et encore aujourd’hui (\u00e0 l’heure o\u00f9 j’\u00e9cris ces lignes) seuls Firefox 32+ (et 41+ pour Android), Safari 6.1+ (pr\u00e9fixe -webkit-, et Safari iOS 6.1+) le supportent.<\/p>\n
Chrome a fait une tentative entre les versions 23 et 36 sous la forme d’option d’exp\u00e9rimentation \u00e0 activer (flag), mais a retir\u00e9 ce flag en version 37, depuis plus de nouvelle.<\/p>\n
Mise \u00e0 jour janvier 2017<\/strong> : Depuis sa version 56 Google Chrome supporte la position sticky<\/code>.<\/p>\n
Cette valeur de propri\u00e9t\u00e9 est un m\u00e9lange de la valeur fixed<\/code> et de la valeur relative<\/code>.
\nEn effet, lorsque vous utilisez la valeur fixed, vous sortez l’\u00e9l\u00e9ment du flux, c’est \u00e0 dire que l’\u00e9l\u00e9ment que vous positionnez va voir sa \u00ab\u00a0bo\u00eete\u00a0\u00bb sortie du calcul de positionnement g\u00e9n\u00e9ral des \u00e9l\u00e9ments les uns par rapport aux autres. Autrement dit, vous passez cet \u00e9l\u00e9ment sur un nouveau plan, il n’est alors plus compt\u00e9 sur son plan d’origine o\u00f9 les autres \u00e9l\u00e9ments vous faire leur petite vie sans lui.<\/p>\n
Si vous voulez faire un essai dans votre navigateur voici une petite explication (5 min) en vid\u00e9o.<\/p>\n