Rendre le menu de navigation au format échelle pour les navigateurs largeur en html et css

Je tente de faire une barre de navigation qui remplit automatiquement la largeur de l'écran de tout ordinateur en juger par la largeur de la fenêtre du navigateur ouvert. Lorsque la personne redimensionne son navigateur, je souhaite que ma barre de navigation se redimensionne en conséquence. J'ai trois boutons de menu qui composent ma barre de navigation. Je me sens comme une valeur devrait être 33,334% ou quelque chose, mais je l'ai joué pendant une heure, et je ne peux pas réussir à le faire fonctionner.Rendre le menu de navigation au format échelle pour les navigateurs largeur en html et css

#navMenu { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    width: auto; 
 
    text-align: center; 
 
    display: table; 
 
    width: 1436px; 
 
} 
 

 
#navMenu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    list-style-type: none; 
 
    display: table-cell; 
 
} 
 

 
#navMenu li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    float: left; 
 
    position: relative; 
 
    background: #008000; 
 
} 
 

 
#navMenu ul li a { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-family: 'TopSecret'; 
 
    src: url('TopSecret.ttf'); 
 
     url('TopSecret.ttf') format('truetype'); 
 
    text-decoration: none; 
 
    height: 30px; 
 
    width: 476px; 
 
    display: block; 
 
    color: #FFF; 
 
    border: 1px solid #000; 
 
} 
 

 
#navMenu ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    top: 32px; 
 
} 
 

 
#navMenu ul li:hover ul { 
 
    visibility: visible; 
 
} 
 

 
#navMenu li:hover { 
 
    background: #329932; 
 
} 
 

 
#navMenu ul li:hover ul li a:hover { 
 
    background: #329932; 
 
    color: #000; 
 
} 
 

 
#navMenu a:hover { 
 
    color: #000 
 
} 
 

 
.clearFloat { 
 
    clear: both; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<body> 
 
    <div style="margin: 0 auto;"> 
 
     <div id="navMenu"> 
 
      <ul> 
 
       <li><a href="index.html">Home</a> 
 
       </li> 
 
       <li><a href="#">Gallery</a> 
 
        <ul> 
 
         <li><a href="#>2018</a></li> 
 
         <li><a href="#">2017</a></li> 
 
         <li><a href="#">2016</a></li> 
 
         <li><a href="#">2015</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="tankreviews.html">Shop</a> 
 
       </li> 
 
      </ul> 
 
      <br class="clearFloat"> 
 
     </div> 
 
    </div> 
 
</body>

Source

2017-07-20 Anonymous

Vous pouvez utiliser flexbox pour cela:

#navMenu { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    width: auto; 
 
    text-align: center; 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
#navMenu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    list-style-type: none; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
#navMenu ul li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    background: #008000; 
 
    flex: 1; 
 
} 
 

 
#navMenu ul li a { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-family: 'TopSecret'; 
 
    src: url('TopSecret.ttf'); 
 
    url('TopSecret.ttf') format('truetype'); 
 
    text-decoration: none; 
 
    height: 30px; 
 
    display: block; 
 
    color: #FFF; 
 
    border: 1px solid #000; 
 
} 
 

 
#navMenu ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    top: 32px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#navMenu ul li:hover ul { 
 
    visibility: visible; 
 
} 
 

 
#navMenu li:hover { 
 
    background: #329932; 
 
} 
 

 
#navMenu ul li:hover ul li a:hover { 
 
    background: #329932; 
 
    color: #000; 
 
} 
 

 
#navMenu a:hover { 
 
    color: #000 
 
} 
 

 
.clearFloat { 
 
    clear: both; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div> 
 
    <div id="navMenu"> 
 
    <ul> 
 
     <li> 
 
     <a href="index.html">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Gallery</a> 
 
     <ul> 
 
      <li> 
 
      <a href="#">2018</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">2017</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">2016</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">2015</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="tankreviews.html ">Shop</a> 
 
     </li> 
 
    </ul> 
 
    <br class="clearFloat "> 
 
    </div> 
 
</div>

Source

2017-07-20 11:17:48 sol

Est-ce que vous avez besoin? J'ai remplacé les flotteurs et utilisé flexbox.

#navMenu { 
 
    width: 1436px; 
 
} 
 

 
#navMenu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    list-style-type: none; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
#navMenu li { 
 
    background: #008000; 
 
    width: calc(100%/3); 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
} 
 

 
#navMenu ul li a { 
 
    font-weight: bold; 
 
    font-family: 'TopSecret'; 
 
    text-decoration: none; 
 
    width: 100% display: block; 
 
    color: #FFF; 
 
} 
 

 
#navMenu ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    top: 40px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
#navMenu ul ul li { 
 
    width: 100%; 
 
} 
 

 
#navMenu ul li:hover ul { 
 
    visibility: visible; 
 
} 
 

 
#navMenu li:hover { 
 
    background: #329932; 
 
} 
 

 
#navMenu ul li:hover ul li a:hover { 
 
    background: #329932; 
 
    color: #000; 
 
} 
 

 
#navMenu a:hover { 
 
    color: #000 
 
}

<div style="margin: 0 auto;"> 
 
    <div id="navMenu"> 
 
    <ul> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="#">Gallery</a> 
 
     <ul> 
 
      <li><a href="#">2018</a></li> 
 
      <li><a href="#">2017</a></li> 
 
      <li><a href="#">2016</a></li> 
 
      <li><a href="#">2015</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="tankreviews.html">Shop</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Source

2017-07-20 11:22:27 Gerard

Espérons que cela utile:

#navMenu { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    width: auto; 
 
    text-align: center; 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
#navMenu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    list-style-type: none; 
 
    display: table-cell; 
 
    width:100% 
 
} 
 

 
#navMenu li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    float: left; 
 
    position: relative; 
 
    background: #008000; 
 
    width: 33.3333%; 
 
} 
 

 
#navMenu ul li a { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-family: 'TopSecret'; 
 
    src: url('TopSecret.ttf'); 
 
     url('TopSecret.ttf') format('truetype'); 
 
    text-decoration: none; 
 
    height: 30px; 
 
    display: block; 
 
    color: #FFF; 
 
    border: 1px solid #000; 
 
} 
 

 
#navMenu ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    top: 32px; 
 
} 
 
#navMenu ul ul li { 
 
    float: none; 
 
    right:0; 
 
    left:0; 
 
    width:100% 
 
} 
 
#navMenu ul li:hover ul { 
 
    visibility: visible; 
 
} 
 

 
#navMenu li:hover { 
 
    background: #329932; 
 
} 
 

 
#navMenu ul li:hover ul li a:hover { 
 
    background: #329932; 
 
    color: #000; 
 
} 
 

 
#navMenu a:hover { 
 
    color: #000 
 
} 
 

 
.clearFloat { 
 
    clear: both; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<body> 
 
    <div style="margin: 0 auto;"> 
 
     <div id="navMenu"> 
 
      <ul> 
 
       <li><a href="index.html">Home</a> 
 
       </li> 
 
       <li><a href="#">Gallery</a> 
 
        <ul> 
 
         <li><a href="#>2018</a></li> 
 
         <li><a href="#">2017</a></li> 
 
         <li><a href="#">2016</a></li> 
 
         <li><a href="#">2015</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="tankreviews.html">Shop</a> 
 
       </li> 
 
      </ul> 
 
      <br class="clearFloat"> 
 
     </div> 
 
    </div> 
 
</body>

Source

2017-07-20 11:25:59 Vishnu

Donnez votre navmenu une taille relative soit 100% (vous pouvez aussi utiliser la largeur max si vous ne veux pas que ça devienne plus grand qu'une certaine taille) et place le 33% dans #navMenu li au lieu de #navMenu ul li a (N'avoir aucune largeur définie dans celui-ci va gâcher!).

Je voudrais également ajouter une autre classe aux liens déroulants de la Galerie afin que vous puissiez les styler séparément avec une largeur de 100% ou une taille fixe si vous le souhaitez.

C'est ce qu'il va ressembler à:

#navMenu { 
    margin: 0 auto; 
    padding: 0; 
    width: auto; 
    text-align: center; 
    display: table; 
    max-width: 1436px; 
width: 100%; 
} 

#navMenu ul { 
    margin: 0; 
    padding: 0; 
    line-height: 30px; 
    list-style-type: none; 
    display: table-cell; 
} 

#navMenu li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
    position: relative; 
    background: #008000; 
    width: 33%; 
} 

#navMenu ul.drop li { 
    width: 100%; 
} 

#navMenu ul li a { 
    text-align: center; 
    font-weight: bold; 
    font-family: 'TopSecret'; 
    src: url('TopSecret.ttf'); 
     url('TopSecret.ttf') format('truetype'); 
    text-decoration: none; 
    height: 30px; 
    display: block; 
    color: #FFF; 
    border: 1px solid #000; 
} 

#navMenu ul ul { 
    position: absolute; 
    visibility: hidden; 
    top: 32px; 
} 

#navMenu ul li:hover ul { 
    visibility: visible; 
} 

#navMenu li:hover { 
    background: #329932; 
} 

#navMenu ul li:hover ul li a:hover { 
    background: #329932; 
    color: #000; 
} 

#navMenu a:hover { 
    color: #000 
} 

.clearFloat { 
    clear: both; 
    margin: 0; 
    padding: 0; 
}

Source

2017-07-20 11:27:43 LouiseW

Rendre le menu de navigation au format échelle pour les navigateurs largeur en html et css

Répondre

Questions connexes