Lien inactif sous le menu

Bonjour,
Je suis nouveau sur le forum, mais j'espere que vous pourrez m'aider.
Je viens de refaire mon site pour qu'il soit responsive, (et aussi parce qu'il était principalement en flash ), mais après plusieurs heures de galère à coder un barre de menu qui apparait ou disparait, j'ai un problème.
Dans toute la zone utilisée par le menu quand il est déroulé, les liens presents sont inactifs (même quand le menu est enroulé).
Ce qui rend la navigation presque inutile sur un mobile.
Voici mes codes :

<div id="menu" height="100%" max-height="device-height"><nav  class="menu" >
    <header><span>×</span></header>
    <ol>
        <li class="menu-item"><a href="index.html"><n>Accueil</n></a></li>
    
        <li class="menu-item">
            <a class="plain" href="spectacles.html"><n>Spectacles</n></a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="sucresale.html"><nn1>- Sucré Salé</nn1></a></li>
                <li class="menu-item"><a href="aletbofie.html"><nn2>- Al & Bofie</nn2></a></li>
              
            </ol>
        </li>
        <li class="menu-item">
            <a href="tournee.html"><n>Tournée</n></a>
           
        </li>
        <li class="menu-item"><a href="lacie.html"><n>La Compagnie</n></a></li>
        <li class="menu-item"><a href="contacts.html"><n>Contacts</n></a></li>
    </ol>
    <footer><button aria-label="Toggle Menu"><img src="images/burger.png"></button></footer>
</nav></div>  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script  src="./scriptexp.js"></script>

Et le css

* {

  box-sizing: border-box;


 

}
body {
  background: black;
  margin: 0;
 

#menu {
  position: fixed;
  right: 0;
  border-top: 20px;  line-height: 0.7;
}


nav {
  --duration: 0.5s;
  --easing: ease-in-out;
  position: relative;
  width: 240px;
  margin: 20px;

}
nav ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav li {
  margin: -10px 0 0 0;
}

nav a{
  display: block;
  text-decoration: none;
  background:#fff;
  opacity: 1;
  transform-origin: top right;
  transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
  transition-delay: var(--delay-out);
  border-radius: 0 0 10px 10px;
  padding: 1em 1.52em;
}

nav a:hover {
  background: #ffcc66;
}
nav .sub-menu a {
  font-size: 1em;
  color: #666666;
  border-left: 2em solid #fff;
  padding: 0.75em;
  background: #fff;
  opacity: 1;
}
nav .sub-menu a:hover {
  background: linear-gradient(to right, #ddd 2px, #ffcc00 2px);
}
nav header {
  font-weight: 600;
  display: block;
  height: 40px;
  background: #fff;
  opacity: 1;
  transform-origin: top right;
  transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
  transition-delay: var(--delay-out);
  border-radius: 10px 10px 0px 0px;
  padding: 1.5em 1em;
}
nav header span {
  border: none;
  background: transparent;
  font-size: 2.5em;
  padding: 0;
  border-right: 0;
  cursor: pointer;
  line-height: 0.2;
  float: right;
}
nav footer button {
  position: fixed;
  top:20px;
  right: 13px;
  z-index:100;
  border: none;

  cursor: pointer;
  outline: none;
  background: none;
  opacity: 0;
}
nav.closed a,
nav.closed header {
  transform: translateY(calc(var(--top) * -1)) scaleY(0.1) scaleX(0.2);
  transition-delay: var(--delay-in);
  color: transparent;
 
}
nav.closed footer button {
  transition-delay: 0s;
  opacity: 1;
  
}

Merci d'avance

Ici par exemple <li class="menu-item"><a href="index.html"><n>Accueil</n></a></li>
Modifié par comar91 (30 Jan 2021 - 11:18)

C'est des balises que je crée et qui renvoie à une autre feuille de style, j'en fais plein mon site pour gérer les styles (<f><f1><f2><q> ....). Je sais pas si c'est très "conventionnel", mais j'avais du voir quelquepart qu'on pouvait le faire, il y quelque temps.
Dans ma feuille de style , ça donne ça, et ça fonctionne :

N {
font-family: 'Indie Flower', cursive;
font-size: 30px;
color: black;
font-style: bold;
text-align: center ;
text-shadow: 2px 2px 5px #888;
text-decoration: none;  

}
NN1 {
font-family: 'Neucha', cursive;
font-size: 28px;
color: black;
text-align: center ;
text-shadow: 1px 1px 2px orange;

}
NN2 {
font-family: 'Neucha', cursive;
font-size: 28px;
color: black;
text-align: center ;
text-shadow: 1px 1px 1px red;

}

J'avais un site où ça fonctionnait très bien. Ce site était d'ailleurs responsive avec un menu (moins classe) mais qui se deroulait et s'enroulait mais il n'y avait pas ce problème de lien.

Hello,

klem1683 a écrit :
Je sais pas si c'est très "conventionnel", mais j'avais du voir quelquepart qu'on pouvait le faire, il y quelque temps.

Ce n'est pas une bonne idée d'inventer ses propres balises et pour de multiples raisons.

La première est tout simplement que cela va à l'encontre de la fonction même de HTML qui est de fournir du sens (de la "sémantique") à un document.

Les balises existantes, autorisées, sont connues et répertoriées. Les navigateurs les comprennent et connaissent la fonction de chacune des balises. Et pas seulement les navigateurs mais tous les agents utilisateurs destinés à comprendre une page web (imprimante, synthèse vocale, moteur de recherche, etc.).

Si tu "inventes" des balises, elles n'auront alors strictement aucun sens et n'apporteront aucune information à l'outil qui va tenter de les comprendre. Accessoirement, ces navigateurs pourront afficher n'importe comment ce document.
Modifié par Raphael (30 Jan 2021 - 14:16)

Bonjour,

En fin de compte, on n'a toujours pas répondu à la question initiale qui était relativement anodine. Mais on se retrouve avec une question beaucoup plus fondamentale : "Peut-on utiliser ses propres balises en HTML ?".

"klem1683" a écrit :
Je sais pas si c'est très "conventionnel", mais j'avais du voir quelque part qu'on pouvait le faire, il y quelque temps.

Ce n'est pas courant, mais effectivement on peut. C'est prévu dans les spécifications. Cependant il y a des restrictions sur le nom de la balise. Voir https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name

En gros, la balise doit contenir un "-". Donc, les noms que tu emploies sont invalides et doivent être évités (ils fonctionnent en pratique mais c'est un coup de bol, et c'est dû au fait que les navigateurs prennent la précaution de pouvoir supporter des balises futures dont le nom n'est pas encore connu).

Raphael a écrit :
Ce n'est pas une bonne idée d'inventer ses propres balises et pour de multiples raisons.

De ce que je comprends, les customElements sont destinés à permettre aux développeurs de définir des balises au comportement complexe. C'est d'ailleurs la raison pour laquelle il est possible de définir leurs comportements avec du javascript via la méthode CustomElementRegistry.define().

Voir https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements pour plus de détails.

Ceci étant, je suis d'accord avec Raphael : dans la plupart des cas c'est une mauvaise idée d'utiliser ses propres balises (pour les raisons qu'il a énoncées).

Il faudrait avoir une bonne raison pour le faire, ce qui ne me semble pas être le cas ici. S'il s'agit juste d'inventer des balises pour les cibler plus facilement dans le css, c'est une raison insuffisante.

Amicalement,

Bonjour,

klem1683 a écrit :
Dans toute la zone utilisée par le menu quand il est déroulé, les liens presents sont inactifs (même quand le menu est enroulé).

J'ai repris ton code tel quel.

Les liens présents dans le menu déroulé sont actifs chez moi. Ton problème est ailleurs.

Amicalement,

Ah, bon ben on dirait qu'il va falloir que je revoie ma copie alors Dommage, j'étais plutôt fier de moi .
Bon, je vais me pencher sur ce problème. Mais pour le problème de lien inactif, vous avez une idée, parce que je pense pas que cela soit en rapport.
Je crois que je vais finir par partir sur tout autre menu ...

J'ai essayé aussi ton code et les liens ne sont pas inactifs.
Cependant,

<script  src="./scriptexp.js"></script>

ne fait référence à rien car on n'a pas l'adresse et c'est peut-être ça qui bloque les liens...

Merci pour votre aide
Pour répondre à js_html voici le scriptexp.js :

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(){
       
    }, (count * 100) + 500 );
}, 2500);

Modifié par klem1683 (01 Feb 2021 - 11:21)

Pour répondre à js_html,
1- Bien compris, je m'y penche très vite
2- C'est en recopiant le css que j'ai oublié l'accolade, elle est bien présente sur mon site
3- Je viens de changer la colorisation de mon dernier message
4- Les liens du menu sont bien actifs, le problème est une fois le menu enroulé, les autres liens présents sur la page sont inactifs dans toute la zone occupée précédemment par le menu.

4/ Je pense que le problème est que le script qui enroule bloque les liens.
Serait-il possible de voir ce script ? Ou la page de ton site ? Ou sur un fiddle (https://codepen.io/pen/ https://jsfiddle.net/ https://jsbin.com/?html https://liveweave.com/ https://html-css-js.com/ http://htmlivecode.com/ https://codeshare.io/ https://markhillard.github.io/Editor/ https://www.w3schools.com/tryit/ https://codesandbox.io/s/ https://snack.expo.io/ https://stackblitz.com/ ) ?

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.