css hamburger menu pour la navigation déroulante

Question

J'ai une barre de navigation fixe simple, un des éléments de la liste a un vol stationnaire.

Le problème - La navigation déroulante m'a rendu difficile d'appliquer un menu hamburger lorsque l'écran atteint une certaine largeur.

Initialement, j'ai essayé de créer un petit menu div qui serait caché puis affiché à une certaine largeur, cela n'a malheureusement pas fonctionné. Je suis honnêtement perdu à la façon de faire cela.

Voici le code - voici une codepen

CSS -

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    } 

/* clear fix */ 
.c-f::after { 
    content: ""; 
    display: table; 
    clear: both; 
    } 

    ul, ol { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
} 

    .large-trunk { 
    width: 100%; 
    max-width: 1700px; 
    margin-right: auto; 
    margin-left: auto; 
    } 

    .inline-block-container > * { 
    display: -moz-inline-stack; 
    display: inline-block; 
    } 

/* Grid Units */ 
.col-1 {width:100%;} 

body { 
    margin: 0; 
} 

/* Links ------------------*/ 

a { 
    color: #000000; 
    text-decoration: none; 
} 

a:hover { 
    color: #ffd800 !important; 
} 

#menu-menu a:hover { 
    text-decoration: underline; 
    opacity: 0.6; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 



/* Typography ------------------*/ 

html { 
    font-family: 'Avenir Book', sans-serif; 
    font-weight: 200; 
    font-style: normal; 
    font-size: 15px; 
    line-height: 1.35em; 
} 


/* Navigation ------------------*/ 

.header-menu { 
    position:fixed; 
    top:0px; 
    border-bottom: 1px solid #ddd; 
    background-color: #fff; 
    z-index: 10; 
} 

.header-menu ul li a { 
    padding: 0 2.5rem; 
    line-height: 3.5rem; 
    display: block; 
} 

.main-menu { 
    margin: 0px auto; 
    overflow: hidden; 
    padding-left: 5rem; 
} 

.home-logo-container { 
    float: left; 
    line-height: 3.5rem; 
    border-right: 1px solid #ddd; 
} 

#menu-menu { 
    text-align:center; 
    padding-right: 0.6rem; 
} 

.sub-menu-item { 
    display: none; 
    position: absolute; 
    overflow: hidden; 
    border: 1px solid #ddd; 
} 

.sub-menu:hover .sub-menu-item { 
    display: block; 
    width: 200px; 
} 



/* mobile nav ----------------*/ 
.sm-logo { 
    display: none; 
} 

HTML -

<div class="header-menu col-1"> 
    <!-- .mobile-only-logo --> 
    <div class="sm-logo"> 
    <img src=""> 
    </div> 
    <div class="main-menu large-trunk float-container"> 
    <div class="home-logo-container"> 
     <a href="#" class="home-link"> 
      Rare Select &emsp; 
      </a> 
    </div> 
    <!-- .main-navigation --> 
    <nav id="site-nav" class="main-nav float-container"> 
     <div class="menu-container"> 
     <ul id="menu-menu" class="inline-block-container"> 
      <li> 
      <a href="#">Home</a> 
      </li> 
      <li class="sub-menu"> 
      <a href="#">Info</a> 
      <ul class="sub-menu-item"> 
       <li> 
       <a href="#">About us</a> 
       </li> 
       <li> 
       <a href="#">T's & C's</a> 
       </li> 
       <li> 
       <a href="#">Find us</a> 
       </li> 
      </ul> 
      </li> 
      <li> 
      <a href="#">Newsletter</a> 
      </li> 
      <li> 
      <a href="#">Contact</a> 
      </li> 
     </ul> 
     </div> 
    </nav> 
    </div> 
</div> 

Pour clarifier - J'ai simplement besoin d'une méthode utilisant css ou jQuery affichera un menu hamburger à une largeur d'écran plus petite.

Merci

Answer 1

<nav class="navbar navbar-fixed-top navbar-bootsnipp" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" onclick="openMenuNav()"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="{{ url('/') }}">Rare Select</a> 
     </div> 

     <div class="menunav " id="menuNav"> 
      <ul class="nav navbar-nav"> 
       <li> 
     <a href="#">Home</a> 
     </li> 
     <li class="sub-menu"> 
     <a href="#">Info</a> 
     <ul class="sub-menu-item"> 
      <li> 
      <a href="#">About us</a> 
      </li> 
      <li> 
      <a href="#">T's & C's</a> 
      </li> 
      <li> 
      <a href="#">Find us</a> 
      </li> 
     </ul> 
     </li> 
     <li> 
     <a href="#">Newsletter</a> 
     </li> 
     <li> 
     <a href="#">Contact</a> 
     </li> 
      </ul> 



     </div> 

    </div> 
</nav> 

Try this .. Espérons que cela peut aider à résoudre votre problème

Answer 2

Vous pouvez y parvenir sans jQuery ou JavaScript. Tout ce que vous devez utiliser sont des requêtes de médias CSS. Les requêtes multimédias vous permettent de n'afficher le contenu que lorsque certaines conditions sont remplies. Dans ce cas, la largeur de votre fenêtre doit correspondre à certaines contraintes.

Le format de base pour une requête de médias est:

@media (/* Condition */) { 
    /* CSS for when condition is met. */ 
} 

Si vous exécutez le code suivant, la requête des médias, le menu hamburger à apparaître que lorsque l'écran est inférieure à 768px de large. Cela est dû au fait qu'une fois la largeur est 768px ou plus, la requête de média est satisfaite, de sorte que le CSS à l'intérieur s'exécute, et définit la propriété display à none pour l'image.

img { 
 
    width: 100px; 
 
    display: block; 
 
} 
 

 
@media (min-width: 768px) { 
 
    img { 
 
    display: none; 
 
    } 
 
}

<html> 
 
<body> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png"> 
 
</body> 
 
</html>

Vous pouvez en savoir plus sur les requêtes des médias sur le MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries