Sujet Précédent Sujet Suivant

Probleme menu

Fermé
Max0123456 Messages postés 97 Date d'inscription dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023 - 4 nov. 2021 à 13:12
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 4 nov. 2021 à 17:33
Bonjour,

Une box s'affiche quand je suis sur la page d'accueil et quand je passe la souris au dessus des menus.




Je voudrais que la box indique sur quelle page on est. Par exemple Accueil si on est sur la page Accueil, A Propos si on est sur la page A Propos.

Le problème est que lorsque je clique sur A Propos par exemple, la box Acceuil est toujours sélectionné. J'ai créé un fichier css pour chaque page. j'ai rajouté 
<link  rel="stylesheet" href="index.css">
dans le html et 
a:active {
  color: #12ab0d;
}
dans la nouveau fichier css

Après avoir fait ceci (quand je clique sur service) :



mon code html : 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <title>Accueil</title>
      <meta charset="utf-8"/>
      <link  rel="stylesheet" href="menu.css">
      <link  rel="stylesheet" href="index.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   </head>
   <body>
     <header>
       <div class="bar-menu">
         <nav>
            <ul>
               <li class="active"><a href="index.html"><i class="fas fa-home"></i>Accueil</a></li>
               <li>
                  <a href="page1.html"><i class="fas fa-clone"></i>Services</a>
                  <div class="sous-menu1">
                     <ul>
                        <li><a href="#">aaa</a></li>
                        <li><a href="#">aaa</a></li>
                        <li><a href="#">aaa</a></li>
                     </ul>
                  </div>
               </li>
               <li>
                  <a href="page2.html"><i class="fas fa-user"></i>A propos</a>
                  <div class="sous-menu1">
                     <ul>
                        <li><a href="#">bbbbb</a></li>
                        <li class="hover-me">
                           <a href="#">ccccc</a><i class="fas fa-angle-right"></i>
                           <div class="sous-menu2">
                              <ul>
                                 <li><a href="#">1</a></li>
                                 <li><a href="#">2</a></li>
                                 <li><a href="#">3</a></li>
                              </ul>
                           </div>
                        </li>
                        <li class="hover-me">
                           <a href="#">ddddd</a><i class="fas fa-angle-right"></i>
                           <div class="sous-menu2">
                              <ul>
                                 <li><a href="#">1</a></li>
                                 <li><a href="#">2</a></li>
                                 <li><a href="#">3</a></li>
                                 <li><a href="#">4</a></li>
                                 <li><a href="#">5</a></li>
                              </ul>
                           </div>
                        </li>
                     </ul>
                  </div>
               </li>
               <li><a href="page3.html"><i class="fas fa-users"></i>Clients</a></li>
               <li><a href="page4.html"><i class="fas fa-tags"></i>Prix</a></li>
               <li><a href="page5.html"><i class="fas fa-edit"></i>Design</a></li>
               <li><a href="page6.html"><i class="fas fa-phone"></i>Contact</a></li>
            </ul>
         </nav>
         </div>
       </header>
      
      
   </body>
</html>


mon code css : 

{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  background-image: url(backgroud.jpg);
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

.bar-menu{
  background: rgb(0,100,0);
  text-align: center;
  padding: 0;
  margin: 0;
}

.bar-menu ul{
  display: inline-flex;
  list-style: none;
  color: #fff;
}

.bar-menu ul li{
  width: 120px;
  margin: 15px;
  padding: 15px;
}

.bar-menu ul li a{
 text-decoration: none;
 color: #fff;
}

.active, .bar-menu ul li:hover{
  background: #12ab0d;
  border-radius: 3px;
}

.bar-menu .fas{
  margin-right: 5px;
}

.sous-menu1{
  display: none;
}

.bar-menu ul li:hover .sous-menu1{
  display: block;
  position: absolute;
  background: rgb(0,100,0);
  margin-top: 15px;
  margin-left: -15px;
}
 .bar-menu ul li:hover .sous-menu1 ul{
   display: block;
   margin: 10px;
 }

.bar-menu ul li:hover .sous-menu1 ul li{
  width: 150px;
  padding: 10px;
  border-bottom: 1px dotted #fff;
  background: transparent;
  border-radius: 0;
  text-align: left;
}

.bar-menu ul li:hover .sous-menu1 ul li:last-child{
  border-bottom: none;
}

.bar-menu ul li:hover .sous-menu1 ul li a:hover{
  color: #b2ff00;
}

.fa-angle-right{
  float: right;
}

.sous-menu2{
  display: none;
}

.hover-me:hover .sous-menu2{
  position: absolute;
  display: block;
  margin-top: -40px;
  margin-left: 140px;
  background: rgb(0,100,0)
}
A voir également:

4 réponses

Réponse 1 / 4
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
4 nov. 2021 à 14:07
Bonjour,

Ton menu fonctionne correctement.
Le menu qui reste affiché avec une couleur plus claire vient de la classe "active" qui est appliqué sur la balise li qui contient le menu.

Il me semble que tu utilises PHP pour ton site. Une solution possible est donc de récupérer la page active en PHP et modifier le menu html pour appliquer la classe "active" sur la balise li du menu correspondant à la page visité.
Par exemple si j'applique la classe "active" sur la balise li qui contient le menu Service, c'est bien ce menu qui restera avec une couleur plus claire : https://jsfiddle.net/Lq2ma85n/

Au passage tu as une erreur de syntaxe sur la première règle de ton fichier css : il manque le sélecteur css pour cette règle.
Il faudrait à priori appliquer cette règle sur le sélecteur "html" (évite d'appliquer cette règle sur le sélecteur "*" si c'était le cas) : 
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* ... suite du code css ... */
0
Réponse 2 / 4
Max0123456 Messages postés 97 Date d'inscription dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023
Modifié le 4 nov. 2021 à 15:10
Je n'ai donc pas besoin de créer un fichier css pour chaque menu. Je mets juste 
<li class="active">
au bon endroit. Je n'utilise pas PHP.

Quand je clique sur "A Propos", il se décale et son sous-menu disparait 



<!DOCTYPE html>
<html lang="fr">
   <head>
      <title>DesignType</title>
      <meta charset="utf-8"/>
      <link rel="stylesheet" href="menu.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   </head>
   <body>
     <header>
      <div class="bar-menu">
         <nav>
            <ul>
               <li><a href="index.html"><i class="fas fa-home"></i>Accueil</a></li>
               <li>
                  <a href="page1.html"><i class="fas fa-clone"></i>Services</a>
                  <div class="sous-menu1">
                     <ul>
                        <li><a href="#">aaa</a></li>
                        <li><a href="#">aaa</a></li>
                        <li><a href="#">aaa</a></li>
                     </ul>
                  </div>
               </li>
               <li>
                 <li class="active">
                  <a href="page2.html"><i class="fas fa-user"></i>A propos</a></li>
                  <div class="sous-menu1">
                     <ul>
                        <li><a href="#">bbbbb</a></li>
                        <li class="hover-me">
                           <a href="#">ccccc</a><i class="fas fa-angle-right"></i>
                           <div class="sous-menu2">
                              <ul>
                                 <li><a href="#">1</a></li>
                                 <li><a href="#">2</a></li>
                                 <li><a href="#">3</a></li>
                              </ul>
                           </div>
                        </li>
                        <li class="hover-me">
                           <a href="#">ddddd</a><i class="fas fa-angle-right"></i>
                           <div class="sous-menu2">
                              <ul>
                                 <li><a href="#">1</a></li>
                                 <li><a href="#">2</a></li>
                                 <li><a href="#">3</a></li>
                                 <li><a href="#">4</a></li>
                                 <li><a href="#">5</a></li>
                              </ul>
                           </div>
                        </li>
                     </ul>
                  </div>
               </li>
               <li><a href="page3.html"><i class="fas fa-users"></i>Clients</a></li>
               <li><a href="page4.html"><i class="fas fa-tags"></i>Prix</a></li>
               <li><a href="page5.html"><i class="fas fa-edit"></i>Design</a></li>
               <li><a href="page6.html"><i class="fas fa-phone"></i>Contact</a></li>
            </ul>
         </nav>
      </div>
     </header>
   </body>
</html>
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
4 nov. 2021 à 15:57
Attention à la syntaxe html (pense à utiliser le validateur w3c pour corriger les erreurs html) :
- tu as une balise <li> en trop ligne 26
- à la fin de la ligne 27, tu as une balise fermante </li> qui est incorrecte. Si le sous menu juste en dessous doit être inclus dans le menu "A propos", cette balise fermante </li> devrait se situer après la balise fermante </div> correspondant au sous-menu 

<header>
  <div class="bar-menu">
    <nav>
      <ul>
        <li><a href="index.html"><i class="fas fa-home"></i>Accueil</a></li>
        <li>
          <a href="page1.html"><i class="fas fa-clone"></i>Services</a>
          <div class="sous-menu1">
            <ul>
              <li><a href="#">aaa</a></li>
              <li><a href="#">aaa</a></li>
              <li><a href="#">aaa</a></li>
            </ul>
          </div>
        </li>
        <li class="active">
          <a href="page2.html"><i class="fas fa-user"></i>A propos</a>
          <div class="sous-menu1">
            <ul>
              <li><a href="#">bbbbb</a></li>
              <li class="hover-me">
                <a href="#">ccccc</a><i class="fas fa-angle-right"></i>
                <div class="sous-menu2">
                  <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                  </ul>
                </div>
              </li>
              <li class="hover-me">
                <a href="#">ddddd</a><i class="fas fa-angle-right"></i>
                <div class="sous-menu2">
                  <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li><a href="page3.html"><i class="fas fa-users"></i>Clients</a></li>
        <li><a href="page4.html"><i class="fas fa-tags"></i>Prix</a></li>
        <li><a href="page5.html"><i class="fas fa-edit"></i>Design</a></li>
        <li><a href="page6.html"><i class="fas fa-phone"></i>Contact</a></li>
      </ul>
    </nav>
  </div>
</header>


https://jsfiddle.net/n08wLx2d/

Effectivement pas besoin de créer un fichier css pour chaque page.
Sans PHP, il suffit effectivement d'appliquer la classe active sur le bon menu pour chaque page html.
0
Réponse 3 / 4
Max0123456 Messages postés 97 Date d'inscription dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023
Modifié le 4 nov. 2021 à 16:24
J'ai enlevé tous les menus après A Propos.

Mon code est il correct ? 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <title>DesignType</title>
      <meta charset="utf-8"/>
      <link rel="stylesheet" href="menu.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   </head>
   <body>
     <header>
  <div class="bar-menu">
    <nav>
      <ul>
        <li><a href="index.html"><i class="fas fa-home"></i>Accueil</a></li>
        <li>
          <a href="page1.html"><i class="fas fa-clone"></i>Services</a>
          <div class="sous-menu1">
            <ul>
              <li><a href="#">aaa</a></li>
              <li><a href="#">aaa</a></li>
              <li><a href="#">aaa</a></li>
            </ul>
          </div>
        </li>
        <li class="active">
          <a href="page2.html"><i class="fas fa-user"></i>A propos</a>
          </li>
        </li>
      </ul>
    </nav>
  </div>
</header>
   </body>
</html>
</html>
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
4 nov. 2021 à 16:24
Non tu as encore quelques erreurs de syntaxe :
- une balise fermante </div> en trop ligne 29
- une balise fermante </li> en trop ligne 30
- une balise fermante </ul> en trop ligne 31

Au passage, la balise meta charset devrait être la première balise dans le head du document html : 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8"/>
    <title>DesignType</title>
    <link rel="stylesheet" href="menu.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  </head>
  <body>
    <header>
      <div class="bar-menu">
        <nav>
          <ul>
            <li><a href="index.html"><i class="fas fa-home"></i>Accueil</a></li>
            <li>
              <a href="page1.html"><i class="fas fa-clone"></i>Services</a>
              <div class="sous-menu1">
                <ul>
                  <li><a href="#">aaa</a></li>
                  <li><a href="#">aaa</a></li>
                  <li><a href="#">aaa</a></li>
                </ul>
              </div>
            </li>
            <li class="active">
              <a href="page2.html"><i class="fas fa-user"></i>A propos</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </body>
</html>
0
Réponse 4 / 4
Max0123456 Messages postés 97 Date d'inscription dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023
Modifié le 4 nov. 2021 à 17:15
J'ai un problème pour la page2 quand je clique sur "Services" :

(j'ai ajouté un logo dans le header mais cela n'a rien à voir avec le problème) 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8"/>
    <title>DesignType</title>
    <link rel="stylesheet" href="menu.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  </head>
  <body>
    <header>
      <div class="bar-menu">
        <a href="index.html"><img src="DT.png" alt="Logo"/></a>
        <nav>
          <ul>
            <li><a href="index.html"><i class="fas fa-home"></i>Accueil</a></li>
            <li>
              <a href="page1.html"><i class="fas fa-clone"></i>Services</a>
              <div class="sous-menu1">
                <ul>
                  <li><a href="#">aaa</a></li>
                  <li><a href="#">aaa</a></li>
                  <li><a href="#">aaa</a></li>
                </ul>
              </div>
            </li>
            <li class="active">
              <a href="page2.html"><i class="fas fa-user"></i>A propos</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </body>
</html>
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
4 nov. 2021 à 17:21
Quel est le problème du coup ? En cliquant sur le menu Services, tu devrais arriver sur la page page1.html
0
Max0123456 Messages postés 97 Date d'inscription dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
Modifié le 4 nov. 2021 à 17:25


quand je clique sur le menu Services
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525 > Max0123456 Messages postés 97 Date d'inscription dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023
Modifié le 4 nov. 2021 à 17:33
Tu dois donc avoir des erreurs dans le fichier page1.html.

Ton menu sur page1.html : https://jsfiddle.net/4wqs0j76/
Ton menu sur page2.html : https://jsfiddle.net/4wqs0j76/1/
(j'ai seulement déplacé la classe "active" sur le menu actif)
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses
menu caché
laurent -
ChariduP -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses