IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Conception Web Discussion :

Animation menu (HTML + CSS + Javascript + Wordpress)


Sujet :

Conception Web

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2018
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2018
    Messages : 4
    Par défaut Animation menu (HTML + CSS + Javascript + Wordpress)
    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

    Nom : Menu1.png
Affichages : 331
Taille : 179,1 Ko

    3. Click hamburger ou 3. Scroll bas

    4. Menu disparait

    Nom : Menu2.png
Affichages : 273
Taille : 181,3 Ko

    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

  2. #2
    Membre chevronné
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Avril 2018
    Messages
    537
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : Avril 2018
    Messages : 537
    Par défaut
    Bonjour

    merci de transmettre le code source utilisé

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2018
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2018
    Messages : 4
    Par défaut
    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 !

  4. #4
    Membre chevronné
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Avril 2018
    Messages
    537
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données

    Informations forums :
    Inscription : Avril 2018
    Messages : 537
    Par défaut
    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?

Discussions similaires

  1. (D)HTML / CSS / Javascript : Menu idéal
    Par hpfx dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 30/08/2007, 14h25
  2. [HTML/CSS/Javascript] Problème respect des propriétés des caractères
    Par shako95 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 16/02/2007, 13h57
  3. Integration de menu HTML/CSS avec PHP
    Par sparrow dans le forum Langage
    Réponses: 7
    Dernier message: 31/01/2006, 02h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo