Problème menu

11 octobre 2021 à 11:24:06

Bonjour,

Une box s'affiche quand je suis sur la page d'accueil et quand je passe la souris au dessus des menus. Le problème c'est que quand je vais sur une autre page, il y a toujours la box sur la page d'accueil et pas la page actuelle.

<!DOCTYPE html>
<html lang="fr">
   <head>
      <title>Accueil</title>
      <meta charset="utf-8"/>
      <link rel="stylesheet" href="style.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>
       </header>
      
      </div>
   </body>
</html>

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

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

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

.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: #2bab0d;
  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)
}

-
Edité par Max123456 11 octobre 2021 à 11:25:46

AbcAbc6

11 octobre 2021 à 12:02:29

Bonjour, Évitez les titres de sujet avec "problème", si vous postez on se doute que vous avez un problème inutile de l'indiquer dans le titre cela n'apporte rien comme information quand au contenu du sujet.

Merci de modifier le titre de votre sujet pour un titre descriptif de votre problématique.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Problème menu)

Liens conseillés

Bonjour, vous avez une erreur HTML pour voir vos erreurs passez votre code au validateur => https://validator.w3.org

La <div> que vous ouvrez après le <header> est fermée après la fermeture du </header>. Vous n'avez même pas besoin d'ajouté de div vous pouvez placer les class sur les éléments eux même.

Pour votre problématique sur les autres pages vous devez supprimer la class active sur l'item de l'accueil et la placer sur l'item du lien de la page correspondante.

IL manque un sélecteur L1 en CSS, erreur de copier/coller sans doute.

-
Edité par AbcAbc6 11 octobre 2021 à 12:05:03

Anonyme

12 octobre 2021 à 19:56:30

Bonsoir Max, l'idée serait d'identifier précisément chaque lien (chaque bouton) de votre menu par un id. Une fois cela fait, utilisez un deuxième fichier CSS. Il est important de travailler avec deux fichiers CSS au minimum. L'un servirait de base pour toutes les pages du site tandis que l'autre serait le fichier CSS de la page en question. Selon cette méthode, ça donnerait :

base.css
votrepage.css

Dans le fichier "base.css" on retrouve donc les effets de hover etc, mais aucun lien ne doit être "activé" depuis ce fichier. L'activation d'un lien ne doit s'effectuer que depuis le fichier "votrepage.css".

Pour ça il suffit d'appliquer l'effet de box au lien souhaité à l'aide de l'ID qui vous sert à identifier le lien.

mohamedboulahia

12 octobre 2021 à 22:12:30 - Message modéré pour le motif suivant : Message complètement hors sujet

AbcAbc6

12 octobre 2021 à 22:15:35

@Monsieur_Nuns Bonsoir,

>> l'idée serait d'identifier précisément chaque lien (chaque bouton) de votre menu par un id.

Pour quelles raisons, il n'y a pas lieux d'utiliser le Javascript ici ou des ancres?? De préférence écrire des class dans un fichier CSS d'une par elles sont réutilisables et ont un poids inférieur à un identifiant.

Laisser les identifiants pour les ancres et le JS. C'est une question de poids des déclarations.

>> utilisez un deuxième fichier CSS. Il est important de travailler avec deux fichiers CSS au minimum.

Pourriez vous détailler vos propos? Pour quelles raison créer une nouvelle requête http pour charger un autre fichier CSS?

Quels serait, d'après vous, les avantages de multiplier les fichiers CSS plutôt qu'un seul? Car toutes les règles css que vous indiquez pourraient très bien être dans un fichier unique!

-
Edité par AbcAbc6 12 octobre 2021 à 22:18:53

Anonyme

13 octobre 2021 à 11:17:30

"Pour quelles raison créer une nouvelle requête http pour charger un autre fichier CSS?"

Dans le but de modifier le menu une seule fois et pas sur tous ses fichiers css s'il y a une modification à faire. C'est comme le principe des includes mais pour le css et sans include.

Je n'ai pas mentionné l'utilisation de JavaScript qui est inutile dans ce contexte. Pour pouvoir cibler un élément précis je lui ai proposé l'id mais j'aurais pu lui proposer nth-child car personnellement je n'utilise pas de class ni d'id dans mes menus. Seulement au vu du code actuel, lui ajouter une difficulté supplémentaire n'aurait pas été d'un grand secours.

AbcAbc6

13 octobre 2021 à 11:40:31

Monsieur_Nuns a écrit:

"Pour quelles raison créer une nouvelle requête http pour charger un autre fichier CSS?"

Dans le but de modifier le menu une seule fois et pas sur tous ses fichiers css s'il y a une modification à faire.

Ce qui revient à modifier le fichier de style une seule fois si celui-ci est unique. Vous n'indiquez pas les raisons de votre proposition d'utiliser plusieurs fichier CSS. Ce serait des fichiers .scss je comprendrais et je serais d'accord pour séparer le code dans plusieurs fichier. Ici je n'en vois aucune utilité.

Je n'ai pas mentionné l'utilisation de JavaScript qui est inutile dans ce contexte.

Dans ce cas l'utilisation des identifiants n'est pas nécessaire.

je lui ai proposé l'id mais j'aurais pu lui proposer nth-child

Je préfère effectivement ce sélecteur, plus concis et plus facile à surcharger le cas échéant.

Seulement au vu du code actuel, lui ajouter une difficulté supplémentaire n'aurait pas été d'un grand secours.

Je ne suis pas sur que cela soit une difficulté supplémentaire mais seul le PO pourrait le dire.

Merci pour votre réponse.

Problème menu

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Problème menu

Mauvais titre

Liens conseillés

Problème menu

Supprimer

Modérer

Signaler le message aux modérateurs