{"id":1530,"date":"2018-11-19T13:08:29","date_gmt":"2018-11-19T13:08:29","guid":{"rendered":"https:\/\/www.templatemonster.com\/fr\/blog\/?p=1530"},"modified":"2020-05-14T09:23:58","modified_gmt":"2020-05-14T09:23:58","slug":"comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/","title":{"rendered":"Comment construire un menu de navigation coulissant avec CSS & jQuery"},"content":{"rendered":"
    \n
  1. Introduction<\/a><\/li>\n
  2. Bouton Hamburger<\/a><\/li>\n
  3. Menu de navigation coulissant<\/a><\/li>\n
  4. Sous-menu et liens<\/a><\/li>\n<\/ol>\n

    Introduction<\/h2>\n

    Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er un menu de navigation coulissant. Le menu de navigation coulissant est une tendance courante dans la conception Web moderne, et vous pouvez voir que de nombreux sites Web pr\u00e9f\u00e8rent ce type de menu. Il supprime le fouillis de la page et le rend plus lisible, ce qui vous permet de mettre l\u2019accent sur le contenu.<\/p>\n

    C'est un excellent moyen de r\u00e9aliser une mise en page minimaliste pour votre site, sans distractions. Aujourd\u2019hui, je vais vous montrer comment cr\u00e9er vous-m\u00eame un tel menu.<\/p>\n

    D\u00e9mo<\/a> | T\u00e9l\u00e9charger Source<\/a><\/p>\n

    Pour construire le menu de navigation, jetons un coup d\u2019\u0153il \u00e0 la configuration du document. Tout d\u2019abord, nous chargeons Normalize.css afin de modifier les styles de navigateur par d\u00e9faut et de nous assurer que notre menu est identique dans tous les navigateurs. Nous utiliserons\u00a0FontAwesome<\/a> pour afficher une fl\u00e8che devant l\u2019\u00e9l\u00e9ment de menu avec des sous-\u00e9l\u00e9ments. Nous chargeons \u00e9galement jQuery pour basculer les classes dans le menu et d\u00e9pla\u00e7ons tout le code jQuery personnalis\u00e9 vers script.js. Le dernier lien est la feuille de style principale de notre projet.<\/p>\n

    \n
    \"\"<\/a><\/figure>\n
    \n

    Bouton Hamburger<\/strong><\/h2>\n

    Un bouton hamburger est un attribut commun de la navigation d\u2019un site Web. Souvent, il est cr\u00e9\u00e9 avec une police d\u2019ic\u00f4nes, telle que FontAwesome, mais dans ce tutoriel, j\u2019aimerais y ajouter une animation, nous allons donc la construire \u00e0 partir de rien. Fondamentalement, notre bouton est une \u00e9tendue contenant trois div affich\u00e9s sous forme de barres horizontales.<\/p>\n

    <span class=\"toggle-button\">\n     <div class=\"menu-bar menu-bar-top\"><\/div>\n     <div class=\"menu-bar menu-bar-middle\"><\/div>\n     <div class=\"menu-bar menu-bar-bottom\"><\/div>\n<\/span>\n<\/pre>\n
    Les styles se pr\u00e9sentent comme suit :<\/p>\n
    .toggle-button {\n  position: fixed;\n  width: 44px;\n  height: 40px;\n  padding: 4px;\n  transition: .25s;\n  z-index: 15;\n}\n.toggle-button:hover {\n  cursor: pointer;\n}\n.toggle-button .menu-bar {\n  position: absolute;\n  border-radius: 2px;\n  width: 80%;\n  transition: .5s;\n}\n.toggle-button .menu-bar-top {\n  border: 4px solid #555;\n  border-bottom: none;\n  top: 0;\n}\n.toggle-button .menu-bar-middle {\n  height: 4px;\n  background-color: #555;\n  margin-top: 7px;\n  margin-bottom: 7px;\n  top: 4px;\n}\n.toggle-button .menu-bar-bottom {\n  border: 4px solid #555;\n  border-top: none;\n  top: 22px;\n}\n.button-open .menu-bar-top {\n  transform: rotate(45deg) translate(8px, 8px);\n  transition: .5s;\n}\n.button-open .menu-bar-middle {\n  transform: translate(230px);\n  transition: .1s ease-in;\n  opacity: 0;\n}\n.button-open .menu-bar-bottom {\n  transform: rotate(-45deg) translate(8px, -7px);\n  transition: .5s;\n}\n<\/pre>\n
    Le bouton a une position fixe et ne bouge pas lorsque vous faites d\u00e9filer la page. Il a \u00e9galement un indice z de 15, de sorte qu'il reste toujours au-dessus des autres \u00e9l\u00e9ments et les chevauche. Le bouton est compos\u00e9 de trois barres. Chaque barre partage des styles les uns avec les autres, je les ai donc transf\u00e9r\u00e9s dans la classe. .menu-bar<\/code> . Les autres styles sont d\u00e9plac\u00e9s dans des classes s\u00e9par\u00e9es. La \u00abmagie\u00bb se produit lorsque nous ajoutons une autre classe \u00e0 la classe conteneur, qui est .button-open<\/code>. Nous l'ajoutons avec l'aide de jQuery comme ceci :<\/p>\n
    $(document).ready(function() {\n  var $toggleButton = $('.toggle-button');\n  $toggleButton.on('click', function() {\n    $(this).toggleClass('button-open');\n  });\n});\n<\/pre>\n
    Pour ceux qui ne connaissent pas jQuery, laissez-moi vous expliquer ce qui se passe ici. Tout d'abord, nous initialisons une variable appel\u00e9e $toggleButton<\/code>, qui contient notre bouton. Nous le stockons dans une variable, de sorte que JavaScript n\u2019a pas besoin de chercher dans notre document ni de chercher le bouton chaque fois que nous le cliquons. Ensuite, nous cr\u00e9ons un \u00e9couteur d'\u00e9v\u00e9nement qui \u00e9coute les clics sur le bouton. Chaque fois que le bouton est cliqu\u00e9, l'\u00e9couteur d'\u00e9v\u00e9nements d\u00e9clenche la fonction toggleClass()<\/a> qui bascule la classe .button-open<\/code>.<\/p>\n
    Lorsque la classe\u00a0.button-open<\/code> est ajout\u00e9e, nous pouvons l\u2019utiliser pour changer la fa\u00e7on dont les \u00e9l\u00e9ments sont affich\u00e9s. Nous utilisons les fonctions CSS3 translate() et rotate() pour faire pivoter les barres sup\u00e9rieure et inf\u00e9rieure \u00e0 45 degr\u00e9s, et la barre centrale d\u00e9vie vers la droite et dispara\u00eet. Vous pouvez jouer avec le bouton et changer ses propri\u00e9t\u00e9s dans la d\u00e9mo de Codepen.<\/p>\n
    \n
    Menu de navigation coulissant<\/h2>\n
    Maintenant que notre bouton est cr\u00e9\u00e9, rendons-le utile et cr\u00e9ons le menu qui se coulisse lorsque vous cliquez sur le bouton. Voici \u00e0 quoi ressemble le balisage du menu :<\/p>\n
    <div class=\"menu-wrap\">\n    <div class=\"menu-sidebar\">\n        <ul class=\"menu\">\n            <li><a href=\"#\">Home<\/a><\/li>\n            <li><a href=\"#\">About<\/a><\/li>\n            <li><a href=\"#\">Blog<\/a><\/li>\n            <li class=\"menu-item-has-children\"><a href=\"#\">Click The Arrow<\/a>\n                <span class=\"sidebar-menu-arrow\"><\/span>\n                <ul class=\"sub-menu\">\n                    <li><a href=\"#\">Alignment<\/a><\/li>\n                    <li><a href=\"#\">Markup<\/a><\/li>\n                    <li><a href=\"#\">Comments<\/a><\/li>\n                <\/ul>\n            <\/li>\n            <li><a href=\"#\">Courses<\/a><\/li>\n            <li><a href=\"#\">Get In Touch<\/a><\/li>\n        <\/ul>           \n    <\/div>\n<\/div>\n<\/pre>\n
    Je ne d\u00e9taillerai pas chaque style de ce menu, je me concentrerai plut\u00f4t sur quelques points importants. Tout d\u2019abord, c\u2019est la div avec classe .menu-wrap<\/code> . Regardez les styles :<\/p>\n
    .menu-wrap {\n    background-color: #6968AB;\n    position: fixed;\n    top: 0;\n    height: 100%;\n    width: 280px;\n    margin-left: -280px;\n    font-size: 1em;\n    font-weight: 700;\n    overflow: auto;\n    transition: .25s;\n    z-index: 10;\n}\n<\/pre>\n
    La position est fixe, le menu reste donc toujours au m\u00eame endroit lorsque la page est d\u00e9fil\u00e9e. La hauteur 100% permet au menu d\u2019occuper tout l\u2019espace vertical de la page. Notez que la marge gauche est d\u00e9finie sur un nombre n\u00e9gatif, ce qui correspond \u00e0 la largeur du menu. Cela fait dispara\u00eetre le menu de la fen\u00eatre. Afin de le rendre \u00e0 nouveau visible, nous cr\u00e9ons une autre classe toggler avec jQuery. Notre fichier JavaScript ressemblerait \u00e0 ceci :<\/p>\n
    $(document).ready(function() {\n    var $toggleButton = $('.toggle-button'),\n        $menuWrap = $('.menu-wrap');\n\n    $toggleButton.on('click', function() {\n        $(this).toggleClass('button-open');\n        $menuWrap.toggleClass('menu-show');\n    });\n});\n<\/pre>\n
    Nous ajoutons une autre variable $menuWrap<\/code> qui contient le wrapper de menu et utilise le m\u00eame gestionnaire d\u2019\u00e9v\u00e9nements pour le bouton que nous avons cr\u00e9\u00e9 pr\u00e9c\u00e9demment. Seulement cette fois, nous basculons entre deux classes, une pour le bouton et une pour le wrapper du menu. La classe .menu-show<\/code> d\u00e9finit la marge gauche sur 0 et ajoute un effet d'ombre \u00e0 la bo\u00eete.<\/p>\n
    .menu-show {\n    margin-left: 0;\n    box-shadow: 4px 2px 15px 1px #B9ADAD;\n}\n<\/pre>\n
    \n
    Sous-menu et liens<\/h2>\n
    Vous remarquerez peut-\u00eatre que l\u2019un des \u00e9l\u00e9ments de la liste a la classe .menu-item-has-children<\/code> et contient un sous-menu. Aussi, juste apr\u00e8s le lien, il y a une p\u00e9riode avec la classe .sidebar-menu-arrow<\/code>.<\/p>\n
    <li class=\"menu-item-has-children\"><a href=\"#\">Click The Arrow<\/a>\n<span class=\"sidebar-menu-arrow\"><\/span>\n    <ul class=\"sub-menu\">\n    <!-- List items -->\n    <\/ul>\n<\/li>\n<\/pre>\n
    Le span a un pseudo-\u00e9l\u00e9ment ::after<\/code> qui contient une fl\u00e8che FontAwesome. Par d\u00e9faut, le sous-menu est masqu\u00e9 et ne sera visible que si vous cliquez sur la fl\u00e8che. Voici comment nous le faisons avec jQuery :<\/p>\n
    $(document).ready(function() {\n    var $sidebarArrow = $('.sidebar-menu-arrow');\n    $sidebarArrow.click(function() {\n        $(this).next().slideToggle(300);\n    });\n});\n<\/pre>\n
    Lorsque nous cliquons sur la fl\u00e8che, une fonction est appel\u00e9e, elle cible l\u2019\u00e9l\u00e9ment suivant juste apr\u00e8s l\u2019\u00e9tendue (dans notre cas, c\u2019est le sous-menu) et le rend visible. La fonction que nous utilisons est slideToggle<\/a>. Cela fait appara\u00eetre et dispara\u00eetre un \u00e9l\u00e9ment par un mouvement de glissement. La fonction dans notre exemple a un param\u00e8tre, qui est la dur\u00e9e de l'animation.<\/p>\n
    Enfin, les \u00e9l\u00e9ments de menu de notre d\u00e9mo ont un effet de survol. Il est cr\u00e9\u00e9 en utilisant un pseudo-\u00e9l\u00e9ment ::after<\/code>. Le code se pr\u00e9sente comme suit :<\/p>\n
    .menu-sidebar li > a::after {\n    content: \"\";\n    display: block;\n    height: 0.15em;\n    position: absolute;\n    top: 100%;\n    width: 102%;\n    left: 50%;\n    transform: translate(-50%);\n    background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);\n    transition: background-position .2s .1s ease-out;\n    background-size: 200% auto;\n}\n.menu-sidebar li > a:hover::after {\n    background-position: -100% 0;\n}\n<\/pre>\n
    Le pseudo-\u00e9l\u00e9ment ::after<\/code> contient un \u00e9l\u00e9ment de niveau de bloc positionn\u00e9 de mani\u00e8re absolue au bas de chaque lien, avec une hauteur de 0,15 em et une largeur totale. En d\u2019autres termes, c\u2019est notre soulignement. Ce qui est sp\u00e9cial ici, c'est que nous n'appliquons pas simplement la couleur de fond \u00e0 la ligne, nous utilisons la fonction linear-gradient()<\/a> sur l'image de fond. Bien que cette fonction soit destin\u00e9e \u00e0 la cr\u00e9ation de d\u00e9grad\u00e9s de couleurs, nous pouvons effectuer un changement de couleur brusque en sp\u00e9cifiant les pourcentages.<\/p>\n
    .menu-sidebar li > a::after {\n  background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);\n}\n<\/pre>\n
    Ici, une moiti\u00e9 de la ligne est transparente et une autre moiti\u00e9 est jaune. En faisant 200% de la taille de l\u2019arri\u00e8re-plan, nous doublons la largeur de notre bloc, de sorte que la partie transparente occupe toute la largeur du lien et que l\u2019autre, la partie jaune, soit d\u00e9plac\u00e9e vers la gauche et ne soit pas visible. En survol, nous modifions la position d'arri\u00e8re-plan sur -100%, ce qui d\u00e9place notre ligne \u00e0 double taille. La partie jaune devient visible et la partie transparente est maintenant masqu\u00e9e.<\/p>\n
    Au lieu de la partie transparente, vous pouvez utiliser n'importe quelle couleur. Cela cr\u00e9erait une illusion de la ligne remplie par une autre couleur, mais en r\u00e9alit\u00e9, il s\u2019agit d\u2019une ligne bicolore. Vous pouvez \u00e9galement exp\u00e9rimenter avec des d\u00e9grad\u00e9s au lieu de faire un changement de couleur brusque comme nous l'avons fait ici.<\/p>\n
    Allez-y et regardez ce que nous avons construit. Chacun des \u00e9l\u00e9ments que nous avons examin\u00e9s s\u00e9par\u00e9ment agissent ensemble dans leur ensemble. Aussi, n'h\u00e9sitez pas \u00e0 t\u00e9l\u00e9charger le code source de ce tutoriel et \u00e0 l'utiliser pour vos propres projets.<\/p>\n
    D\u00e9mo<\/a> | T\u00e9l\u00e9charger Source<\/a><\/p>\n
    Si vous avez des questions, faites-le moi savoir dans les commentaires ci-dessous.<\/p>\n
    \n
    \"\"<\/a><\/figure>\n
    \n
    Articles connexes<\/h3>\n
    WooCommmerce. Comment modifier l'ordre de tri des produits par d\u00e9faut<\/a><\/p>\n
    Comment cr\u00e9er et fa\u00e7onner votre portfolio avec Elementor Builder<\/a><\/p>\n
    Ajouter des champs personnalis\u00e9s au profil utilisateur dans WordPress<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Introduction Bouton Hamburger Menu de navigation coulissant Sous-menu et liens Introduction Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er un menu de navigation coulissant. Le menu de navigation coulissant est une tendance courante dans la conception Web moderne, et vous pouvez voir que de nombreux sites Web pr\u00e9f\u00e8rent ce type de menu. Il supprime […]<\/p>\n","protected":false},"author":1672325,"featured_media":1531,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29,25],"tags":[68,53,55],"yoast_head":"\nComment construire un menu de navigation coulissant avec CSS & jQuery<\/title>\n<meta name=\"description\" content=\"Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er un menu de navigation coulissant. Le menu de navigation coulissant est une tendance courante dans la conception Web moderne, et vous pouvez voir que de nombreux sites Web pr\u00e9f\u00e8rent ce type de menu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment construire un menu de navigation coulissant avec CSS & jQuery\" \/>\n<meta property=\"og:description\" content=\"Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er un menu de navigation coulissant. Le menu de navigation coulissant est une tendance courante dans la conception Web moderne, et vous pouvez voir que de nombreux sites Web pr\u00e9f\u00e8rent ce type de menu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog France\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-19T13:08:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-14T09:23:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/11\/featured_image1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Claire\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_France\" \/>\n<meta name=\"twitter:site\" content=\"@TM_France\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Claire\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/\"},\"author\":{\"name\":\"Claire\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\"},\"headline\":\"Comment construire un menu de navigation coulissant avec CSS & jQuery\",\"datePublished\":\"2018-11-19T13:08:29+00:00\",\"dateModified\":\"2020-05-14T09:23:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/\"},\"wordCount\":1314,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"keywords\":[\"Codage\",\"CSS3\",\"jQuery\"],\"articleSection\":[\"D\u00e9veloppement Web\",\"Tutoriels\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/\",\"name\":\"Comment construire un menu de navigation coulissant avec CSS & jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\"},\"datePublished\":\"2018-11-19T13:08:29+00:00\",\"dateModified\":\"2020-05-14T09:23:58+00:00\",\"description\":\"Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er un menu de navigation coulissant. Le menu de navigation coulissant est une tendance courante dans la conception Web moderne, et vous pouvez voir que de nombreux sites Web pr\u00e9f\u00e8rent ce type de menu.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment construire un menu de navigation coulissant avec CSS & jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"name\":\"TemplateMonster Blog France\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\",\"name\":\"MonsterPost France\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost France\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\",\"https:\/\/twitter.com\/TM_France\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\",\"name\":\"Claire\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Claire\"},\"description\":\"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.\",\"url\":\"https:\/\/monsterspost.com\/fr\/author\/claire\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment construire un menu de navigation coulissant avec CSS & jQuery","description":"Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er un menu de navigation coulissant. Le menu de navigation coulissant est une tendance courante dans la conception Web moderne, et vous pouvez voir que de nombreux sites Web pr\u00e9f\u00e8rent ce type de menu.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment construire un menu de navigation coulissant avec CSS & jQuery","og_description":"Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er un menu de navigation coulissant. Le menu de navigation coulissant est une tendance courante dans la conception Web moderne, et vous pouvez voir que de nombreux sites Web pr\u00e9f\u00e8rent ce type de menu.","og_url":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/","og_site_name":"TemplateMonster Blog France","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterFrance\/","article_published_time":"2018-11-19T13:08:29+00:00","article_modified_time":"2020-05-14T09:23:58+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/11\/featured_image1.jpg","type":"image\/jpeg"}],"author":"Claire","twitter_card":"summary_large_image","twitter_creator":"@TM_France","twitter_site":"@TM_France","twitter_misc":{"\u00c9crit par":"Claire","Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/"},"author":{"name":"Claire","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c"},"headline":"Comment construire un menu de navigation coulissant avec CSS & jQuery","datePublished":"2018-11-19T13:08:29+00:00","dateModified":"2020-05-14T09:23:58+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/"},"wordCount":1314,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"keywords":["Codage","CSS3","jQuery"],"articleSection":["D\u00e9veloppement Web","Tutoriels"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/","url":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/","name":"Comment construire un menu de navigation coulissant avec CSS & jQuery","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/#website"},"datePublished":"2018-11-19T13:08:29+00:00","dateModified":"2020-05-14T09:23:58+00:00","description":"Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er un menu de navigation coulissant. Le menu de navigation coulissant est une tendance courante dans la conception Web moderne, et vous pouvez voir que de nombreux sites Web pr\u00e9f\u00e8rent ce type de menu.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/fr\/comment-construire-un-menu-de-navigation-coulissant-avec-css-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Comment construire un menu de navigation coulissant avec CSS & jQuery"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/fr\/#website","url":"https:\/\/monsterspost.com\/fr\/","name":"TemplateMonster Blog France","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/fr\/#organization","name":"MonsterPost France","url":"https:\/\/monsterspost.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost France"},"image":{"@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterFrance\/","https:\/\/twitter.com\/TM_France"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c","name":"Claire","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Claire"},"description":"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.","url":"https:\/\/monsterspost.com\/fr\/author\/claire\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/1530"}],"collection":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/users\/1672325"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/comments?post=1530"}],"version-history":[{"count":6,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/1530\/revisions"}],"predecessor-version":[{"id":4298,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/1530\/revisions\/4298"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media\/1531"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media?parent=1530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/categories?post=1530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/tags?post=1530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}