Lien inactif sous le menu

(reprise du message précédent)

Tu peux voir une page de mon site ICI
il est en construction, il y a d'autres erreurs comme le diaporama qui est au dessus du menu (j'ai trouvé le problème)
Mais on voit bien mon problème , la zone utilisé par le menu rend inactif les liens (controles des vidéos aussi)
Pour le script, je te l'ai mis dans mon dernier message

Bonjour,

Tu rajoutes à la fin du css :

#menu
{
  pointer-events: none;
}
#menu nav:not(.closed),
#menu nav.closed footer
{
  pointer-events: auto;
}

Explication : quand l'élément #menu est invisible, il est en fait toujours là avec sa taille initiale et empêche les clics d'atteindre les liens de la page qui se retrouvent parfois en dessous.

La propriété pointer-events: none; permet aux clics de "traverser" #menu (et rend tout ce qu'il y a dans le menu inactif). Il faut de plus ré-activer les clics pour les éléments du menu qui en ont besoin, c'est à dire sur l'ensemble de <nav> quand le menu est visible (i.e. quand <nav> n'a pas la classe "closed"), et seulement sur le <footer> du <nav> qui contient l'image "burger.png" quand le menu est invisible (i.e. quand <nav> a la classe "closed").

Amicalement,

Merci beaucoup parsimonhi, ça marche.
Tu me sauves la vie, enfin presque
J'étais en train de chercher un autre menu .... OUF

Du coup, vu que je me sens bien épaulé, je tente une nouvelle question (pas indispensable, j'avoue) mais que j'aimerais réaliser. Dites moi si il faut faire un autre post , vu que ce n'est plus le même problème
Le script pour l'animation javascript était à l'origine comme ceci :

var $els = $('.menu a, .menu header');
var count = $els.length;
var grouplength = Math.ceil(count/3);
var groupNumber = 0;
var i = 1;
$('.menu').css('--count',count+'');
$els.each(function(j){
    if ( i > grouplength ) {
        groupNumber++;
        i=1;
    }
    $(this).attr('data-group',groupNumber);
    i++;
});

$('.menu footer button').on('click',function(e){
    e.preventDefault();
    $els.each(function(j){
        $(this).css('--top',$(this)[0].getBoundingClientRect().top + ($(this).attr('data-group') * -15) - 20);
        $(this).css('--delay-in',j*.1+'s');
        $(this).css('--delay-out',(count-j)*.1+'s');
    });
    $('.menu').toggleClass('closed');
    e.stopPropagation();
});

// run animation once at beginning for demo
setTimeout(function(){
    $('.menu footer button').click();
    setTimeout(function(){
        $('.menu footer button').click();
    }, (count * 100) + 500 );
}, 1000);

A l'ouverture de la page, le menu était affiché, puis disparaissait puis réapparaissait.
Je l'ai modifié (que la fin) comme ceci :

// run animation once at beginning for demo
setTimeout(function(){
    $('.menu footer button').click();
    setTimeout(function(){
       
    }, (count * 100) + 500 );
}, 2500);

Maintenant le menu commence caché puis apparait.

Mais dans mes rêves les plus fous (enfin presque ), j'aimerais que le menu fasse comme ceci : le menu commence caché puis apparait en mode portrait (navigation mobile) et le menu commence directement affiché en mode paysage.
N'y aurait il pas un ptit code à rajouter (avec une condition media queries ou autre) pour y parvenir ??
Merci d'avance

Bonjour,

Je ne suis pas sûr d'avoir compris ce que tu veux faire exactement.

Je suppose pour la suite qu'en fenêtre étroite (que ce soit sur un ordi ou mobile), le menu est caché initialement, et en fenêtre large, le menu est montré.

J'ai supposé que la limite entre fenêtre étroite et fenêtre large était à 600px (c'est facile à modifier). J'ai supposé qu'il était inutile de considérer les modes portait et paysage, et de faire la distinction entre mobile et desktop, et que le seul point important était de distinguer fenêtre étroite et fenêtre large.

1) On ajoute à la fin du css :

nav.initial a,
nav.initial header
{
	transition:none;
}

2) On remplace dans le html :

<nav class="menu">

par

<nav class="menu initial">

3) On remplace dans le javascript :

$('.menu footer button').on('click',function(e){
    e.preventDefault();
    $els.each(function(j){
        $(this).css('--top',$(this)[0].getBoundingClientRect().top + ($(this).attr('data-group') * -15) - 20);
        $(this).css('--delay-in',j*.1+'s');
        $(this).css('--delay-out',(count-j)*.1+'s');
    });
    $('.menu').toggleClass('closed');
    e.stopPropagation();
});

// run animation once at beginning for demo
setTimeout(function(){
    $('.menu footer button').click();
    setTimeout(function(){

    }, (count * 100) + 500 );
}, 1000);

par

$('.menu footer button').on('click', function(e) {
  e.preventDefault();
  $('.menu').removeClass('initial');
  $els.each(function(j) {
    $(this).css('--top', $(this)[0].getBoundingClientRect().top + ($(this).attr('data-group') * -15) - 20);
    $(this).css('--delay-in', j * .1 + 's');
    $(this).css('--delay-out', (count - j) * .1 + 's');
  });
  $('.menu').toggleClass('closed');
  e.stopPropagation();
});

if ($(window).width() < 600) {
  $els.each(function(j) {
    $(this).css('--top', $(this)[0].getBoundingClientRect().top + ($(this).attr('data-group') * -15) - 20);
  });
  $('.menu').addClass('closed');
}

Si ensuite, tu veux rajouter un effet d'apparition progressif du menu en fenêtre étroite dès l'affichage initial de la page (je ne l'ai pas mis par défaut parce que j'avais un doute et que je trouve ça pas génial parce que ça cache du contenu avant même qu'on ait eu le temps de bien lire ce qu'il y a dans la page), il suffit de rajouter en plus à la fin du javascript :

if ($(window).width() < 600) {
  setTimeout(function() {
    $('.menu footer button').click();
  }, 2500);
}

Amicalement,

Bonjour,
Merci beaucoup, ça marche comme je voulais.
Je n'ai pas rajouté le dernier bout de javascript, (c'est mieux sans)
Je n'ai pas mis non plus le bout de css, sur ma simulation, cela coupait l'effet de transition, le menu passait directement de caché à deroulé.
Dans tous les cas, ça marche, c'est trop chouette

Bonjour,

Si tu ne mets pas le bout de css, tu n'as pas besoin de la class "initial" et tu peux donc la supprimer dans le html et supprimer la ligne js où elle apparait.

Quoi qu'il en soit, l'essentiel est que tu aies obtenu ce que tu voulais. Et tu me sembles maintenant en savoir assez pour faire évoluer la solution si nécessaire.

Amicalement,