Naviguer dans les menus

18 juin 2021 à 16:35:34

Bonjour,

Je découvre le monde de la programmation, j'ai suivi les cours html/css et un peu php (merci d'ailleurs à ce site qui permet d'avoir des cours déja bien complet et accessible aux novices !!). J’essaie de créer un site comme support d'apprentissage, mais là j'avoue que je coince. En fait je voudrais faire 4 menus, jusque là ca va... mais je souhaite me compliquer la tache en rajoutant 2 sous-menus communs aux 4 autres (pour chaque menu, on pourrait par exemple choisir en intérieur ou en extérieur). j'ai beau chercher depuis plusieurs jours mais rien à faire ! J'ai cherché en javascript; jquery; bootstrap !!

Quelqu'un pourrait-il me conseiller sur le prochain langage à apprendre pour avoir cette liberté de navigation svp (et peut-être le langage que je devrais apprendre pour la suite de ma formation) ?!

Merci d'avance.

Clément Gaudinière

18 juin 2021 à 20:25:13

Bonjour, c'est très simplement réalisable en CSS, en utilisant les sélecteurs dynamiques tels que :hover.

Tu peux consulter un brève aperçu de ce que j'explique ici.

HTML :

<div id="menu">
  <ul>
    <li>
      <a href="page1.html">Menu 1</a>
      <ul class= "sousmenu">
        <li><a href="page1a.html">Sous-menu 1a</a></li>
        <li><a href="page1b.html">Sous-menu 1b</a></li>
      </ul>
    </li>
    <li>
      <a href="page2.html">Menu 2</a>
      <ul class= "sousmenu">
        <li><a href="page2a.html">Sous-menu 2a</a></li>
        <li><a href="page2b.html">Sous-menu 2b</a></li>
        <li><a href="page2c.html">Sous-menu 2c</a></li>
        <li><a href="page2d.html">Sous-menu 2d</a></li>
      </ul>
    </li>
    <li>
      <a href="page3.html">Menu 3</a>
      <ul class= "sousmenu">
        <li><a href="page3a.html">Sous-menu 3a</a></li>
        <li><a href="page3b.html">Sous-menu 3b</a></li>
        <li><a href="page3c.html">Sous-menu 3c</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS :

#menu ul{
  display: flex;
  flex-direction: row;
}
#menu ul li{
  padding: 0 10px;
  list-style-type: none;
} 
#menu .sousmenu{
  display: none;
  position: absolute;
}
#menu li:hover ul{
  display: block;
}
#menu ul li ul li{
  display: block;
}

En espérant t'avoir aidé.

-
Edité par Clément Gaudinière 18 juin 2021 à 20:26:54

AbcAbc6

18 juin 2021 à 22:51:38

Bonsoir, pour des raisons d'accessibilité on n'utilise pas display: none/block. Voir explication et code source sur http://www.frogweb.fr/

bozyboite

19 juin 2021 à 8:35:36

Bonjour,

Merci beaucoup Clément, . j'ai bien compris les sélecteurs :hoover, super utile, mais en fait ce que je cherche à faire c'est de pouvoir sélectionner un premier menu, puis un deuxième en fonction du premier. Je joins une img et mon code de menus ce sera plus parlant...

L'idée c'est qu'on puisse par exemple choisir "basket" puis "interieur ou exterieur", pareil pour foot ou tennis... tout ce que j'arrive à faire c'est remettre interieur/exterieur sous chaque catégorie, ce qui fait lourd et me chamboule toute ma présentation...

  
     
<!DOCTOTYPE html>
<html>

    <head>
        <!-- titre de la page -->
        <meta charset="utf-8" />
        <link rel="stylesheet" href="stylesport.css" />
        <title>Pouet.fr</title>
    </head>



<div>
        <nav class="MENUS">
        	<ul>
                
                     
                        <li><a href="basket.php">- basket -</a></li>
                   
           
                        <li><a href="foot.php">- foot -</a></li>
                    
                
                       <li><a href="tennis.php">- tennis -</a></li>
                   
               
                       <li><a href="divers.php">- DIVERS -</a></li>
                     
                     <li><a href="liens.php">Liens</a></li>  

        	</ul>
        </nav>

</div>
        <nav class="type">
            <ul>
                <li><a  href="#1" title="interieur">&#10149 interieur </a></li>

                
                 
                  
                <li><a href="#2" title="exterieur">&#10149 exterieur</a></li> 
           
               

            </ul>
        </nav>


       

</html>

Je crois qu'on peut le faire en JS avec les fonctions if/else ou switch, mais je n'ai pas réussi.

Si quelqu'un a une solution plus simple (peut être sur une autre organisation de mon code), ou me conseiller sur le langage qui me permettrait de faire ca...

-
Edité par bozyboite 19 juin 2021 à 9:34:03

Lamecarlate

19 juin 2021 à 9:21:21 - Message modéré pour le motif suivant : La demande de l'équipe de modération a été honorée

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

Aurélien10!

19 juin 2021 à 9:33:43

Bonjour.

Il y des erreurs html à corriger. C'est Doctype et non Doctotype

Il n'y a pas la balise body.

Pourquoi ne pas utiliser des onglets à l'intérieur de chaque page. Comme ça tu as les deux modes sur la même page.

Activer les erreurs PDO / (julp) htmlspecialchars / FAQ PHP / Pas d'aide par MP

bozyboite

19 juin 2021 à 9:49:28

En effet, des petites erreurs à corriger (c'est comme ca qu'on apprend..)

Pourquoi pas oui, cette solution pourrait être bien ! tu aurais un code ou un tuto à me conseiller sur la manière de faire ca stp ?!

Mickael_CR

20 juin 2021 à 10:42:23

Bonjour ,

voici un lien qui pourrait d'aider:

https://www.frogweb.fr/menu-deroulant-vertical/

Bon courage.

Pour apprendre on commence on fait des erreurs et après on s'améliore🤫