Discussion :

[vincent76e]

Bonjour, Bonjour !

J'ai une petite problématique d'animation de menu, je viens demander un peu d'aide car je patauge...

(Accessoirement je suis sous Wordpress avec le thème DIVI et je fais mes modifications dans functions.php/style.css/header.php/etc d'un thème enfant.)



Concrètement je cherche à modifier le style et l'animation de mon menu pour avoir les animations suivantes : (Que ça ressemble à ce site lien ici)

1.Click hamburger ou 1.Survoler le header avec la souris

2. Menu apparait



3. Click hamburger ou 3. Scroll bas

4. Menu disparait



Quelqu'un aurait il une idée s'il vous plait ???
(Actuellement j'ai le menu qui apparait au scroll top et disparait au scroll down.)

Je peux transmettes les fichiers style.css /functions.php / pour l'animation actuelle du menu : headroom.css / headroom-min.js / inithead.js
Merci merci pour votre aide

[bonjourajax]

Bonjour

merci de transmettre le code source utilisé

[vincent76e]

Merci pour ta réponse !

Ci dessous le code des différents fichiers : pour déclarer childtheme + nouveau menu : functions.php / pour l'animation actuelle du menu: monheadroom.css / headroom-min.js / inithead.js

1) FUNCTIONS.PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
/**
** activation theme
**/
*
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
*
/**
** Hide menu on scroll
**/
*
function my_enqueue_assets() {
**wp_enqueue_style( 'headroom-style', get_stylesheet_directory_uri().'/css/headroom.css' );***
****wp_enqueue_script( 'inithead.js', get_stylesheet_directory_uri().'/js/inithead.js','','',true);
****wp_enqueue_script( 'js-headroom', get_stylesheet_directory_uri().'/js/headroom-min.js','' ,'',true );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );
?>

2) HEADROOM.CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
.et_fixed_nav #main-header {position:fixed!important;}
.headroom {
****transition: transform 0.25s ease-in-out 0s;
****will-change: transform;
}
.headroom--pinned {
****transform: translateY(0px);
}
.headroom--unpinned {
****transform: translateY(-100%);
}
*
.animated {
****animation-duration: 0.5s;
****animation-fill-mode: both;
****will-change: transform, opacity;
}
@keyframes slideDown {
0% {
****transform: translateY(-100%);
}
100% {
****transform: translateY(0px);
}
}
@keyframes slideDown {
0% {
****transform: translateY(-100%);
}
100% {
****transform: translateY(0px);
}
}
@keyframes slideDown {
0% {
****transform: translateY(-100%);
}
100% {
****transform: translateY(0px);
}
}
.animated.slideDown {
****animation-name: slideDown;
}
@keyframes slideUp {
0% {
****transform: translateY(0px);
}
100% {
****transform: translateY(-100%);
}
}
@keyframes slideUp {
0% {
****transform: translateY(0px);
}
100% {
****transform: translateY(-100%);
}
}
@keyframes slideUp {
0% {
****transform: translateY(0px);
}
100% {
****transform: translateY(-100%);
}
}
.animated.slideUp {
****animation-name: slideUp;
}

3) HEADROOM-MIN.JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
/**
*** Hide menu on scroll
***/
*
!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.Headroom=b()}(this,function(){"use strict";function a(a){this.callback=a,this.ticking=!1}function b(a){return a&&"undefined"!=typeof window&&(a===window||a.nodeType)}function c(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var d,e,f=a||{};for(e=1;e<arguments.length;e++){var g=arguments[e]||{};for(d in g)"object"!=typeof f[d]||b(f[d])?f[d]=f[d]||g[d]:f[d]=c(f[d],g[d])}return f}function d(a){return a===Object(a)?a:{down:a,up:a}}function e(a,b){b=c(b,e.options),this.lastKnownScrollY=0,this.elem=a,this.tolerance=d(b.tolerance),this.classes=b.classes,this.offset=b.offset,this.scroller=b.scroller,this.initialised=!1,this.onPin=b.onPin,this.onUnpin=b.onUnpin,this.onTop=b.onTop,this.onNotTop=b.onNotTop,this.onBottom=b.onBottom,this.onNotBottom=b.onNotBottom}var f={bind:!!function(){}.bind,classList:"classList"in document.documentElement,rAF:!!(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame)};return window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame,a.prototype={constructor:a,update:function(){this.callback&&this.callback(),this.ticking=!1},requestTick:function(){this.ticking||(requestAnimationFrame(this.rafCallback||(this.rafCallback=this.update.bind(this))),this.ticking=!0)},handleEvent:function(){this.requestTick()}},e.prototype={constructor:e,init:function(){return e.cutsTheMustard?(this.debouncer=new a(this.update.bind(this)),this.elem.classList.add(this.classes.initial),setTimeout(this.attachEvent.bind(this),100),this):void 0},destroy:function(){var a=this.classes;this.initialised=!1,this.elem.classList.remove(a.unpinned,a.pinned,a.top,a.notTop,a.initial),this.scroller.removeEventListener("scroll",this.debouncer,!1)},attachEvent:function(){this.initialised||(this.lastKnownScrollY=this.getScrollY(),this.initialised=!0,this.scroller.addEventListener("scroll",this.debouncer,!1),this.debouncer.handleEvent())},unpin:function(){var a=this.elem.classList,b=this.classes;!a.contains(b.pinned)&&a.contains(b.unpinned)||(a.add(b.unpinned),a.remove(b.pinned),this.onUnpin&&this.onUnpin.call(this))},pin:function(){var a=this.elem.classList,b=this.classes;a.contains(b.unpinned)&&(a.remove(b.unpinned),a.add(b.pinned),this.onPin&&this.onPin.call(this))},top:function(){var a=this.elem.classList,b=this.classes;a.contains(b.top)||(a.add(b.top),a.remove(b.notTop),this.onTop&&this.onTop.call(this))},notTop:function(){var a=this.elem.classList,b=this.classes;a.contains(b.notTop)||(a.add(b.notTop),a.remove(b.top),this.onNotTop&&this.onNotTop.call(this))},bottom:function(){var a=this.elem.classList,b=this.classes;a.contains(b.bottom)||(a.add(b.bottom),a.remove(b.notBottom),this.onBottom&&this.onBottom.call(this))},notBottom:function(){var a=this.elem.classList,b=this.classes;a.contains(b.notBottom)||(a.add(b.notBottom),a.remove(b.bottom),this.onNotBottom&&this.onNotBottom.call(this))},getScrollY:function(){return void 0!==this.scroller.pageYOffset?this.scroller.pageYOffset:void 0!==this.scroller.scrollTop?this.scroller.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop},getViewportHeight:function(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},getElementPhysicalHeight:function(a){return Math.max(a.offsetHeight,a.clientHeight)},getScrollerPhysicalHeight:function(){return this.scroller===window||this.scroller===document.body?this.getViewportHeight():this.getElementPhysicalHeight(this.scroller)},getDocumentHeight:function(){var a=document.body,b=document.documentElement;return Math.max(a.scrollHeight,b.scrollHeight,a.offsetHeight,b.offsetHeight,a.clientHeight,b.clientHeight)},getElementHeight:function(a){return Math.max(a.scrollHeight,a.offsetHeight,a.clientHeight)},getScrollerHeight:function(){return this.scroller===window||this.scroller===document.body?this.getDocumentHeight():this.getElementHeight(this.scroller)},isOutOfBounds:function(a){var b=0>a,c=a+this.getScrollerPhysicalHeight()>this.getScrollerHeight();return b||c},toleranceExceeded:function(a,b){return Math.abs(a-this.lastKnownScrollY)>=this.tolerance[b]},shouldUnpin:function(a,b){var c=a>this.lastKnownScrollY,d=a>=this.offset;return c&&d&&b},shouldPin:function(a,b){var c=a<this.lastKnownScrollY,d=a<=this.offset;return c&&b||d},update:function(){var a=this.getScrollY(),b=a>this.lastKnownScrollY?"down":"up",c=this.toleranceExceeded(a,b);this.isOutOfBounds(a)||(a<=this.offset?this.top():this.notTop(),a+this.getViewportHeight()>=this.getScrollerHeight()?this.bottom():this.notBottom(),this.shouldUnpin(a,c)?this.unpin():this.shouldPin(a,c)&&this.pin(),this.lastKnownScrollY=a)}},e.options={tolerance:{up:0,down:0},offset:0,scroller:window,classes:{pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",bottom:"headroom--bottom",notBottom:"headroom--not-bottom",initial:"headroom"}},e.cutsTheMustard="undefined"!=typeof f&&f.rAF&&f.bind&&f.classList,e});

4) INITHEAD.JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jQuery(function() {
****var header = document.querySelector("#main-header");
****if(window.location.hash) {
******header.classList.add("headroom--unpinned");
****}
****var headroom = new Headroom(header, {
********"offset": 200,
**"tolerance": 5,
**"classes": {
****"initial": "animated",
****"pinned": "slideDown",
"unpinned": "slideUp"
****}
****});
****headroom.init();
});

Merci merci pour l'aide !

[bonjourajax]

Je sais même pas comment ton code peut marcher avec toutes ses "*"

Tu as essayé de faire quoi pour avoir le scroll ?
Pour effectuer le nécessaire pour avoir le scroll il faudrait aussi que tu donne les éléments html sur lesquels tu veux agir
tu as le site en ligne?