Indication du slide actif avec un slider Html/CSS

Indication du slide actif avec un slider Html/CSS - HTML/CSS - Programmation

Marsh Posté le 21-02-2018 à 14:27:16    

:hello:  
Je suis en train de réaliser un projet de site web qui aura une navigation horizontale, j'utilise donc un slider CSS  (pas de javascript)
 
Je souhaiterais pouvoir indiquer dans mon menu de navigation quelle page est active
J'ai fait des essai avec a.active en suivant ces indications:
https://disic.github.io/guide-integ [...] ctive.html
 
Mais ça ne fonctionne pas car le lien est constamment marqué comme actif,ce qui m’étonne pas vraiment car on est toujours sur la même page
 
je vous ai fait un petit jsfiddle:
https://jsfiddle.net/Julemane/71g09c20/2/
 
Si vous avez des suggestions ;)
Merci


Message édité par ptimimi05 le 21-02-2018 à 14:27:32

---------------
Watercooling X58 One Hundred - Watercooling Pure Base 500
Reply

Marsh Posté le 21-02-2018 à 14:27:16   

Reply

Marsh Posté le 21-02-2018 à 19:39:50    

Bonjour,

 
Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Page d'essai</title>
  6.    <style type="text/css">
  7.       :root {
  8.          --lien: "";
  9.       }
  10.       body {
  11.          margin: 0px 0px 0px 0px;
  12.          color: #000000;
  13.       }
  14.       div#main > div {
  15.          opacity: 0;
  16.       }
  17.       a {
  18.          text-decoration: none;
  19.       }
  20.       a[href=var(--lien)] {
  21.          text-decoration: underline;
  22.       }
  23.       div#main > div:target {
  24.          opacity: 1;
  25.          --lien: "#" attr(id string);
  26.       }
  27.    </style>
  28.    <script type="text/javascript">
  29.       function jawascript() {
  30.          return null;
  31.       }
  32.    </script>
  33. </head>
  34. <body onLoad="jawascript()">
  35.    <header>
  36.       <nav>
  37.          <ul>
  38.             <li><a href="#section1">Menu 1</a></li>
  39.             <li><a href="#section2">Menu 2</a></li>
  40.             <li><a href="#section3">Menu 3</a></li>
  41.          </ul>
  42.       </nav>
  43.    </header>
  44.    <div id="main">
  45.       <div id="section1">Section 1</div>
  46.       <div id="section2">Section 2</div>
  47.       <div id="section3">Section 3</div>
  48.    </div>
  49. </body>
  50. </html>
 

Peut-être que le temps que tu finisses ton site ce sera pris en charge. [:cosmoschtroumpf]

 

Mais sinon je ne vois pas pourquoi se prendre la tête alors qu'en JS ça se fait très bien. Après il y a surement moyen d'y arriver en faisant un truc dégueulasse : faire suivre chaque menu de sa section. Positionner le tout pour faire comme si ces éléments ne se suivaient pas. Puis sélectionner l'élément qui précède l'élément target pour le souligner.


Message édité par MaybeEijOrNot le 21-02-2018 à 19:47:05

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 21-02-2018 à 20:47:27    

Bon en fait ce n'est pas si facile que je le présumais, il n'y a pas de sélecteur parent donc on est bloqué à gérer sur un même noeud :
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Page d'essai</title>
  6.    <style type="text/css">
  7.       body {
  8.          margin: 0px 0px 0px 0px;
  9.          color: #000000;
  10.       }
  11.       li.section {
  12.          opacity: 0;
  13.       }
  14.       a {
  15.          text-decoration: none;
  16.       }
  17.       li:target + li.menu a {
  18.          text-decoration: underline;
  19.       }
  20.       li.section:target {
  21.          opacity: 1;
  22.       }
  23.    </style>
  24.    <script type="text/javascript">
  25.       function jawascript() {
  26.          return null;
  27.       }
  28.    </script>
  29. </head>
  30. <body onLoad="jawascript()">
  31.    <header>
  32.       <nav>
  33.          <ul>
  34.             <li class="section" id="section1">Section 1</li>
  35.             <li class="menu"><a href="#section1">Menu 1</a></li>
  36.             <li class="section" id="section2">Section 2</li>
  37.             <li class="menu"><a href="#section2">Menu 2</a></li>
  38.             <li class="section" id="section3">Section 3</li>
  39.             <li class="menu"><a href="#section3">Menu 3</a></li>
  40.          </ul>
  41.       </nav>
  42.    </header>
  43. </body>
  44. </html>


 
Après en jouant sur les positions des li.menu et li.section tu dois surement pouvoir faire en sorte que le menu soit aligné et les sections en dessous.
Mais bon je maintiens qu'un coup de JS est plus propre.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 22-02-2018 à 10:27:01    

salut, merci pour ta proposition mais en effet pas de JS car c'est dans le cadre d'un projet que je fait pour ma formation avec openclassrooms et on n'a pas le droit d'utiliser JS pour ce projet :s


---------------
Watercooling X58 One Hundred - Watercooling Pure Base 500
Reply

Marsh Posté le 22-02-2018 à 20:05:51    

Il n'y a pas de solution en CSS à ma connaissance car à chaque fois cela demanderai de remonter dans le DOM pour bifurquer et donc sélectionner un parent à un moment. Or la sélection d'un parent implique de réévaluer tout le document car on ne peut savoir à l'avance quel élément sera modifié.
 
Sinon tu peux partir sur de la redondance, tu inclues le menu dans chaque section à afficher :

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Page d'essai</title>
  6.    <style type="text/css">
  7.       body {
  8.          margin: 0px 0px 0px 0px;
  9.          color: #000000;
  10.       }
  11.       a {
  12.          text-decoration: none;
  13.       }
  14.       a.active {
  15.          text-decoration: underline;
  16.       }
  17.       div.section {
  18.          background-color: #FFFFFF;
  19.          position: absolute;
  20.          top: 20px;
  21.       }
  22.       div.section:first-of-type {
  23.          opacity: 1;
  24.          z-index: 1;
  25.       }
  26.       div.section:target {
  27.          opacity: 1;
  28.          z-index: 2;
  29.       }
  30.       div.section:not(:target):not(:first-of-type) {
  31.          opacity: 0;
  32.          z-index: 0;
  33.       }
  34.    </style>
  35.    <script type="text/javascript">
  36.       function jawascript() {
  37.          return null;
  38.       }
  39.    </script>
  40. </head>
  41. <body onLoad="jawascript()">
  42.    <div class="section" id="section1">
  43.       <header>
  44.          <nav>
  45.             <ul>
  46.                <li class="menu"><a href="#section1" class="active">Menu 1</a></li>
  47.                <li class="menu"><a href="#section2">Menu 2</a></li>
  48.                <li class="menu"><a href="#section3">Menu 3</a></li>
  49.             </ul>
  50.          </nav>
  51.       </header>
  52.       <div>
  53.          <p>section 1</p>
  54.       </div>
  55.    </div>
  56.    <div class="section" id="section2">
  57.       <header>
  58.          <nav>
  59.             <ul>
  60.                <li class="menu"><a href="#section1">Menu 1</a></li>
  61.                <li class="menu"><a href="#section2" class="active">Menu 2</a></li>
  62.                <li class="menu"><a href="#section3">Menu 3</a></li>
  63.             </ul>
  64.          </nav>
  65.       </header>
  66.       <div>
  67.          <p>section 2</p>
  68.       </div>
  69.    </div>
  70.    <div class="section" id="section3">
  71.       <header>
  72.          <nav>
  73.             <ul>
  74.                <li class="menu"><a href="#section1">Menu 1</a></li>
  75.                <li class="menu"><a href="#section2">Menu 2</a></li>
  76.                <li class="menu"><a href="#section3" class="active">Menu 3</a></li>
  77.             </ul>
  78.          </nav>
  79.       </header>
  80.       <div>
  81.          <p>section 3</p>
  82.       </div>
  83.    </div>
  84. </body>
  85. </html>


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 26-02-2018 à 10:55:23    

merci pour ton aide, en effet sans js pas possible mais du coup j'ai revu mon intégration car celle ci finalement se fait ç la verticale et le slider est juste la pour mettre 2 images et non tout le contenu du site :)


---------------
Watercooling X58 One Hundred - Watercooling Pure Base 500
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed