Simplifiez mon balisage pour un menu personnalisé (No Bootstrap!)

Question

J'ai créé un menu personnalisé avec l'icône hamburger, mais sans Bootstrap - je ne veux pas utiliser Bootstrap. Le problème est que je voudrais utiliser un balisage simple pour accomplir cela, mais j'ai dû ajouter une navigation séparée que je montre/cache avec les requêtes média et je sais qu'il doit y avoir un meilleur moyen mais je ne suis pas sûr comment.

Le modèle Bootstrap dispose d'un système de navigation distinct avec une classe de repli, mais ne devrais-je pas pouvoir le faire simplement en utilisant un nav?

Voici la JS Fiddle ce que j'ai jusqu'à présent: https://jsfiddle.net/zbu7ahmb/10/

Comme je le vois, je ne devrais pas avoir besoin de ce bien balisage pour accomplir ce que je veux. Je ne veux pas que cette barre de navigation effondrés menu:

<div id="header" class="inline-container max-width space-between"> 
<div> 
    <h1>LOGO</h1> 
</div> 

<nav class="menu inline-container"> 
    <ul> 
     <li class="nav-btn"> 
      <button id="my_btn" class="nav-link btn-link">Link 1</button> 
      <ul class="sub-menu"> 
       <li class="section">Section 1</li> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
       <li class="section row">Section 2</li> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
      </ul> 
     </li> 
     <li class="nav-btn"> 
      <button class="nav-link btn-link">Link 2</button> 
      <ul class="sub-menu"> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

<nav class="menu-collapsed"> 
    <div class="container nav-link" onclick="myFunction(this)"> 
     <div class="bar1"></div> 
     <div class="bar2"></div> 
     <div class="bar3"></div> 
    </div> 
    <ul class="sub-menu"> 
     <li class="section"><h3>Link 1</h3></li> 
     <li><a href="#">Sub link 1</a></li> 
     <li><a href="#">Sub link 2</a></li> 
     <li class="section row"><h3>Link 2</h3></li> 
     <li>Section 1</li> 
     <li><a href="#">Sub link 1</a></li> 
     <li><a href="#">Sub link 2</a></li> 
     <li class="row">Section 2</li> 
     <li><a href="#">Sub link 1</a></li> 
     <li><a href="#">Sub link 2</a></li> 
    </ul> 
</nav> 

Ne devrais-je être en mesure d'utiliser simplement 1 barre de navigation comme ceci:

<div id="header" class="inline-container max-width space-between"> 
<div> 
    <h1>LOGO</h1> 
</div> 

<nav class="menu inline-container"> 
    <ul> 
     <li class="nav-btn"> 
      <button id="my_btn" class="nav-link btn-link">Link 1</button> 
      <ul class="sub-menu"> 
       <li class="section">Section 1</li> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
       <li class="section row">Section 2</li> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
      </ul> 
     </li> 
     <li class="nav-btn"> 
      <button class="nav-link btn-link">Link 2</button> 
      <ul class="sub-menu"> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

Enfin , remarquez que je devais donner à mon "sous-menu affaibli par le menu" une largeur de 91% pour le faire s'étendre à travers ... mais c'est encore un peu éteint. Quelle est la meilleure façon de résoudre cela?

Vous avez des idées? Merci pour toute contribution!

Answer 1

Vous pouvez avoir un seul menu, et vous devez utiliser les requêtes média css pour changer les styles des éléments de menu au lieu d'afficher/masquer le menu entier.

1. Créez votre menu HTML avec la structure dont vous avez besoin.

2. Décidez quelle sera votre vue par défaut. Je préfère concevoir "Mobile First", car vous avez généralement plus de limitations, donc lorsque vous concevez plus tard la vue de bureau, vous avez plus d'options et d'espace, et pour moi, c'est plus facile à adapter.

3. Créez les styles CSS dans votre fichier CSS pour l'affichage par défaut que vous avez décidé. Faites en sorte que le menu ressemble et se comporte comme vous le souhaitez dans cette vue. Une fois que vous avez terminé et travaillé, il est temps de créer les requêtes CSS Media pour le reste des vues. Mettez ces règles après toutes les règles que vous avez créées pour votre vue par défaut. Maintenant vous ne changez pas le menu entier, vous ne faites que styliser votre menu et vos éléments de menu pour vous adapter à la nouvelle distribution et à l'apparence. Dans la plupart des cas, vous utiliserez la largeur de la fenêtre en tant que paramètre pour les requêtes de média CSS. Si votre style par défaut est pour mobile, vous pouvez ajouter des requêtes multimédia CSS pour modifier le menu une fois que vous avez atteint une largeur spécifique. Par exemple ...

   nav.menu { position: absolute; z-index: 10; width: 100%; background-color: #1c8db0; display: none; } 
   nav.menu li.nav-btn { width: 100; } 
   nav.menu li.nav-btn ul li { width: 100; } 
   /* Your default styles for "mobile" here */ 
   
   @media only screen and (min-width: 1024px) { 
       nav.menu { position: relative; z-index: 0; width: auto; display: block; } 
       nav.menu li.nav-btn { width: 250px; } 
       nav.menu li.nav-btn ul li { width: 250px; } 
       /* Modify and add styles when the viewport is at least 1024px */ 
   } 
   
   @media only screen and (min-width: 1280px) { 
       nav.menu li.nav-btn { width: 350px; } 
       nav.menu li.nav-btn ul li { width: 350px; } 
       /* Modify and add styles when the viewport is at least 1280px */ 
   } 
   

   Il suffit de jouer avec les styles pour adapter le menu, mais remarquez que le travail de cette façon vous modifiez les styles par défaut que vous avez créés, donc si vous avez besoin de changer de style pour la nouvelle largeur, vous devez l'écraser.

4. Et "Le bouton Hamburger"? Créez-le et placez-le dans la position qui doit être celle de la vue mobile. Ensuite, cachez-le simplement en utilisant les mêmes requêtes médias.

Ceci est juste une description rapide de mon processus de création de menus réactifs. Je n'aime pas avoir des menus différents, car il est généralement plus difficile à maintenir. Le même menu, mais changez juste à quoi cela ressemble.

J'espère que ça aide.