ナビゲーションメニューを自動的にブラウザの幅にhtmlとcssで調整する

開いているブラウザウィンドウの幅で判断して、どのコンピュータの画面の幅を自動的に埋め込むナビゲーションバーを作成しようとしています。その人がブラウザを再スケーリングするとき、私はナビゲーションバーがそれに応じてそれを縮小することを望む。私はナビゲーションバーを構成する3つのメニューボタンを持っています。私は値が33.334％か何かであるべきであるように感じます、しかし私はそれを1時間手伝っています、そして私はそれを働かせることができません。ナビゲーションメニューを自動的にブラウザの幅にhtmlと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>

出典

2017-07-20 Anonymous

あなたはこのためflexboxを使用することができます。

#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>

出典

2017-07-20 11:17:48 sol

が、これは何が必要ですか？私はフロートを交換し、フレックスボックスを使用しました。

#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>

出典

2017-07-20 11:22:27 Gerard

・ホープ、この意志は役に立ち：

#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>

出典

2017-07-20 11:25:59 Vishnu

あなたNavMenu 100％に相対的な大きさ、すなわちを与えるあなたならば（あなたはまた、最大幅を使用することができますそれが特定のサイズよりも大きくならないようにする）、＃navMenu liの代わりに33％を入れます#navMenu ul li（これに設定されている幅はありません！）

別のクラスをギャラリーのドロップダウンリンクに追加して、必要に応じて幅を100％または固定サイズで個別にスタイルすることもできます。

これは、それがどのように見えるかです：

#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; 
}

出典

2017-07-20 11:27:43 LouiseW

ナビゲーションメニューを自動的にブラウザの幅にhtmlとcssで調整する

答えて

関連する問題