Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
964 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Indication du slide actif avec un slider Html/CSS

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Indication du slide actif avec un slider Html/CSS

n°2311392
ptimimi05
Id PSN : Noobarus
Posté le 21-02-2018 à 14:27:16  profilanswer
 

: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
mood
Publicité
Posté le 21-02-2018 à 14:27:16  profilanswer
 

n°2311425
MaybeEijOr​Not
but someone at least
Posté le 21-02-2018 à 19:39:50  profilanswer
 

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.
n°2311428
MaybeEijOr​Not
but someone at least
Posté le 21-02-2018 à 20:47:27  profilanswer
 

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.
n°2311469
ptimimi05
Id PSN : Noobarus
Posté le 22-02-2018 à 10:27:01  profilanswer
 

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
n°2311502
MaybeEijOr​Not
but someone at least
Posté le 22-02-2018 à 20:05:51  profilanswer
 

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.
n°2311614
ptimimi05
Id PSN : Noobarus
Posté le 26-02-2018 à 10:55:23  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Indication du slide actif avec un slider Html/CSS

 

Sujets relatifs
Problème d'affichage d'image[JavaScript]Imprimer une div avec les CSS
[Langage C] Problème d'affichage Chat 2 clients[CSS] Débutant - Barre horizontale en barre verticale
[Résolu] HTML aide pour bout de codeTransition de page en html et css
Re cherche aide HTML pour corriger un fichier[HTML/CSS][PHP][JS][SQL] Quelques bon livres ?
CSS Menu navigation responsive et fixe 
Plus de sujets relatifs à : Indication du slide actif avec un slider Html/CSS

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.080 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR