Partage
  • Partager sur Facebook
  • Partager sur Twitter

ERR ancre li:active

Impossibilité de faire l’ancre active

NathalieBayle
7 février 2023 à 0:07:36

Bonjour la communauté, 

Je suis à cours d'intégration pour mon projet web un véritable défi 2023 pour ma part étant auto-didacte!

Je rencontre un blocage sur mon envie qu'une ancre de mon menu détecte l'emplacement d'où on se trouve sur la one page.

En effet, j'aimerai que quand une partie de la page est afficher l'ancre dans le menu garde un background-color: red que se soit quand l'on as cliquer ou au défilement de la page. J'aimerai que ce menu reconnaisse le positionnement dans la page automatiquement. 

Je sait qu'il faut certainement du JS mais cela fait 10 jours je bloque sur cela ....

Je vous dit merci par avance pour le coup de code ^^

Voici mon code html du menu :

1
<span style="color:#3366ff;"><nav class="side-nav"> <div class="wrapper"> <div class="three-dots-container"> <div class="dot d1"></div> <div class="dot d2"></div> <div class="dot d3"></div> </div> <div class="nav-bloc n-1"> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="file" class="svg-inline--fa fa-file fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" > <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM241 119c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31H120c-13.3 0-24 10.7-24 24s10.7 24 24 24H238.1l-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9l-72-72z"></path> </svg> <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --> <div class="sub-nav"> <h3>DECOUVERTE</h3> <ul id="top-menu"> <li class="active"> <a href="#accueil">ACCUEIL</a> </li> <li> <a href="#apropos">A PROPOS</a> </li> <li> <a href="#matiere">MATIERE</a> </li> <li> <a href="#bureau">BUREAU</a> </li> <li> <a href="#bienfait">BIENFAIT</a> </li> <li> <a href="#paiement">PAIEMENT</a> </li> <li><a href="#livraison">LIVRAISON</a> </li> <li><a href="#delai">DELAI</a> </li> <li><a href="#supp">EN +</a> </li> <li><a href="#community">COMMUNITY</a> </li> </ul> </div> </div> <div class="nav-bloc n-2"> <div> <a href="shopping.html"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-alt" class="svg-inline--fa fa-user-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M547.6 103.8L490.3 13.1C485.2 5 476.1 0 466.4 0H109.6C99.9 0 90.8 5 85.7 13.1L28.3 103.8c-29.6 46.8-3.4 111.9 51.9 119.4c4 .5 8.1 .8 12.1 .8c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.2 0 49.3-11.4 65.2-29c16 17.6 39.1 29 65.2 29c4.1 0 8.1-.3 12.1-.8c55.5-7.4 81.8-72.5 52.1-119.4zM499.7 254.9l-.1 0c-5.3 .7-10.7 1.1-16.2 1.1c-12.4 0-24.3-1.9-35.4-5.3V384H128V250.6c-11.2 3.5-23.2 5.4-35.6 5.4c-5.5 0-11-.4-16.3-1.1l-.1 0c-4.1-.6-8.1-1.3-12-2.3V384v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V384 252.6c-4 1-8 1.8-12.3 2.3z"></path></a> </svg></div> </div> </div> </nav> </span>

En voici le CSS :

1
<span style="color:#993366;">/*-----------------NAV PRINCIPALE CÔTE GAUCHE--------------*/ /* New Stacking Context with Fixed */ .side-nav { position: fixed; left: 2px; top: 0; z-index: 30; } /* To hide the sub-nav */ .wrapper { background: aliceblue; box-shadow: 3px 3px 6px #d6d6d6, -3px -3px 6px #f0f8ff; width: 45px; border-radius: 15px; padding: 10px 0px; } .three-dots-container { display: flex; justify-content: center; align-items: center; height: 60px; } .dot { flex-shrink: 0; margin: 10px 3px; width: 8px; height: 8px; border-radius: 50%; background: #000; } .d1 {background: crimson;} .d2 {background: yellow;} .d3 {background: lightgreen;} .nav-bloc { padding: 20px 0; display: flex; justify-content: center; cursor: pointer; font-size: 1.4rem; } .navbloc n-1{ border-bottom: 1px solid white; } .nav-bloc:hover { background: rgb(24, 24, 24); } .nav-bloc:hover .sub-nav { transform: translateX(63px); } .nav-bloc svg { width: 40px; fill: black; transition: 0.2s ease-in-out ; } .nav-bloc:hover svg { fill: #50bddf; } .sub-nav { padding: 0px; width: 200px; height: 540px; position: absolute; top: 71px; left: -16px; background: aliceblue; box-shadow: 3px 3px 6px #d6d6d6, -3px -3px 6px #f0f8ff; z-index: -1; color: white; /* Hidden at the left side */ transform: translateX(-100%); transition: transform 0.2s ease-in-out; border-radius: 10px; } .sub-nav h3 { font-family: open sans, sans-serif; height: 50px; display: flex; justify-content: center; align-items: center; background: #222; border-radius: 0px 5px 0px 0px; } .sub-nav ul { list-style-type: none; } .sub-nav li { padding: 15px 10px; display: flex; justify-content: center; } .sub-nav li:hover { background: rgba(160, 160, 160, 0.555); } .sub-nav li a { color: black; text-decoration: none; font-weight: 600; padding: 0 50px; } .main-content { padding-left: 75px; } .main-content h1 { font-family: Open Sans, sans-serif; text-align: center; margin: 30px 0; font-size: 40px; } .main-content p { max-width: 780px; margin: 0 auto; padding: 0 30px; line-height: 1.7; } <br></
  • Partager sur Facebook
  • Partager sur Twitter
Lamecarlate
  • HTML / CSS
7 février 2023 à 7:33:16

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet : https://openclassrooms.com/forum/sujet/ancre-active-menu-deroulant-js

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)