CSSのナビゲーションバーを「応答可能」にして、画面サイズがどのようなものであっても、要素の大きさを調整します。

Question

これは、リストアイテムが多数含まれているWebサイトです。このコードでは、ブラウザのサイズを変更すると、他のすべての要素がスケールされますが、ナビゲーションバーとすべてのリストアイテムは表示されず、奇妙に見えます。ここで

は、CSSです：

<div class="header"> 
     <div class="wrap"> 

     <div class="top-nav"> 
      <ul> 
       <li class="active"><a href="index.html">Home</a></li> 
       <li><a href="about.html">About</a></li> 
       <li><a href="services.html">Prices & Services</a></li> 
       <li><a href="training.html">Training</a></li> 
       <li><a href="training.html">Press</a></li> 
       <li><a href="training.html">Makeup Studio <span class="arrow">&#9660;</span></a></li> 
       <li><a href="contact.html">Contact us</a></li> 
      </ul> 
     </div> 
     <div class="clear"> </div> 
    </div> 
</div> 

私は水平ナビゲーション・バーの応答性にし、より良い、それを拡張したいと思います：

.top-nav{ 

display:inline-block; 

} 
.top-nav ul li{ 

display:inline-block; 
} 
.top-nav ul li a{ 

font-family: 'Karla', sans-serif; 
color: #f8abbe; 
text-transform: uppercase; 
padding: 45px 25px; 
display: inline-block; 
font-weight: normal; 
transition: 0.5s ease; 
-o-transition: 0.5s ease; 
-webkit-transition: 0.5s ease; 

} 


.top-nav li.active> a, .top-nav li> a:hover { 
background: #f8abbe; 
color:#fff; 
} 

そして、ここではHTMLです。ありがとう！ （ "応答ナビゲーションバー" を検索するときに）

Answer 1

このソリューションは、あなたがここにいくつかのオプションがあり、Googleで最初の結果から直接

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ 
 
function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
}

.top-nav{ 
 

 
display:inline-block; 
 

 
} 
 
.top-nav ul li{ 
 

 
display:inline-block; 
 
} 
 
.top-nav ul li a{ 
 

 
font-family: 'Karla', sans-serif; 
 
color: #f8abbe; 
 
text-transform: uppercase; 
 
padding: 45px 25px; 
 
display: inline-block; 
 
font-weight: normal; 
 
transition: 0.5s ease; 
 
-o-transition: 0.5s ease; 
 
-webkit-transition: 0.5s ease; 
 

 
} 
 

 
.top-nav li.active> a, .top-nav li> a:hover { 
 
background: #f8abbe; 
 
color:#fff; 
 
} 
 
    
 
/* Style the links inside the list items */ 
 
ul.topnav li a { 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 14px; 
 
} 
 

 
/* Hide the list item that contains the link that should open and close the topnav on small screens */ 
 
ul.topnav li.icon {display: none;} 
 

 
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */ 
 
@media screen and (max-width:680px) { 
 
    ul.topnav li:not(:first-child) {display: none;} 
 
    ul.topnav li.icon { 
 
    float: right; 
 
    display: inline-block; 
 
    } 
 
} 
 

 
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */ 
 
@media screen and (max-width:680px) { 
 
    ul.topnav.responsive {position: relative;} 
 
    ul.topnav.responsive li.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
    float: none; 
 
    display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
}

<div class="header"> 
 
     <div class="wrap"> 
 
     <div class="top-nav"> 
 
<ul class="topnav" id="myTopnav"> 
 
<li class="active"><a href="index.html">Home</a></li> 
 
       <li><a href="about.html">About</a></li> 
 
       <li><a href="services.html">Prices & Services</a></li> 
 
       <li><a href="training.html">Training</a></li> 
 
       <li><a href="training.html">Press</a></li> 
 
       <li><a href="training.html">Makeup Studio <span class="arrow">&#9660;</span></a></li> 
 
       <li><a href="contact.html">Contact us</a></li> 
 
    <li class="icon"> 
 
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> 
 
    </li> 
 
</ul> 
 
</div> 
 
<div class="clear"> </div> 
 
    </div> 
 
</div>

Source

Answer 2

を撮影されました、いずれかを動作させるにはmedia queriesを使用する必要があります。

これをほぼ完全にCSSにするために、like this fiddleに従うことができます。

wrap{ 
 
    overflow:hidden; 
 
} 
 

 
top-nav{ 
 

 
display:inline-block; 
 

 
} 
 
.top-nav ul li{ 
 

 
display:inline-block; 
 
} 
 
.top-nav ul li a{ 
 

 
font-family: 'Karla', sans-serif; 
 
color: #f8abbe; 
 
text-transform: uppercase; 
 
padding: 45px 25px; 
 
display: inline-block; 
 
font-weight: normal; 
 
transition: 0.5s ease; 
 
-o-transition: 0.5s ease; 
 
-webkit-transition: 0.5s ease; 
 

 
} 
 
.top-nav li.active> a, .top-nav li> a:hover { 
 
background: #f8abbe; 
 
color:#fff; 
 
} 
 

 
/* here is the meat of your CSS changes */ 
 
@media only screen and (max-width: 1100px) { 
 
    
 
    .top-nav{ 
 
     position: relative; 
 
     width: 100%; 
 
     overflow-y: scroll; 
 
     
 
    } 
 
    .wrap:before{ 
 
     content:""; // you can add a carat here if you want, but additional styling may be necessary 
 
     position: absolute; 
 
     display: block; 
 
     color: #000; 
 
     margin: 1em 0; 
 
     right:0; 
 
     z-index : 1; 
 
     background-image : linear-gradient(to right, 
 
        rgba(243,245,246, 0), 
 
        rgba(243,245,246, 1) 60%); 
 
     width : 80px; //adjust so that the fade can be seen on the last menu item visible 
 
     height : 100%; 
 
    } 
 
    
 
    .top-nav ul{ 
 
     position: relative; 
 
     display: block; 
 
     width: 1050px; // needs to be wide enough that all emnu items can o 
 
        // be stacked horizontally insode the container. 
 
        // You may want to make it a little wider if you 
 
        // increase the fade width 
 
     height: 100px; 
 
    } 
 
}

<div class="header"> 
 
     <div class="wrap" id="nav-wrap"> 
 

 
     <div class="top-nav" id="top-nav"> 
 
      <ul> 
 
       <li class="active"><a href="index.html">Home</a></li> 
 
       <li><a href="about.html">About</a></li> 
 
       <li><a href="services.html">Prices & Services</a></li> 
 
       <li><a href="training.html">Training</a></li> 
 
       <li><a href="training.html">Press</a></li> 
 
       <li><a href="training.html">Makeup Studio <span class="arrow">&#9660;</span></a></li> 
 
       <li><a href="contact.html">Contact us</a></li> 
 
      </ul> 
 
     </div> 
 
     <div class="clear"> </div> 
 
    </div> 
 
</div>

メニューULはブロック要素に作られており、容器は、任意のオーバーフローを非表示に設定されています。右のフェードは、見るべきメニュー項目がもっとあることを視覚的に示しています。これはシンプルで100％CSSですが、あなたが探しているものではないかもしれません。

そこに含まれるjavascriptは、理想的には、divの水平スクロールバーが見えなくなるようにdivを調整します。現代のブラウザーのほとんどはこれを処理していたので、スクロールバーは従来よりも洗練されていますが、一部のユーザーはWindows 7などで動かなくなっている可能性があります。

var parent = document.getElementById('nav-wrap'); 
 
var child = document.getElementById('top-nav'); 
 
child.style.paddingBottom = child.offsetWidth - child.clientWidth + "px";

あなたはより多くのスタックに崩壊および/はクリックで開閉メニューを探しているなら、あなたはJavaScriptを使用する必要があります。 CSSにクリック擬似セレクタはなく、折りたたみ可能なメニューに単独でホバーを使用すると、モバイルデバイスの誰もがあなたのメニューを見ることができなくなります。