ディスプレイの解像度に合わせてメニューを表示

-2

私は14のメニューを持っており、画面の解像度に合わせてメニューを設定したいと思います。画面解像度がsize <= 1280pxで8つのメニューがメニューバーに表示され、他のメニューがmoreのメニュードロップダウンに表示されます。ここでは（添付のスクリーンショットのように）ディスプレイの解像度に合わせてメニューを表示

出典

2017-01-10 Paresh Bhanderi

これまでに試したコードを教えてください。 – aavrug

まだ私はこのためのコードを書いていませんでした。まず、このことをどのように実装するかを提案する必要があります。 –

は、あなたは以下のとおりです。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
body {margin:0;} 
 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
ul.topnav li {float: left;} 
 

 
ul.topnav li a { 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
} 
 

 
ul.topnav li a:hover {background-color: #555;} 
 

 
ul.topnav li.icon {display: none;} 
 

 
@media screen and (max-width:680px) { 
 
    ul.topnav li:not(:first-child) {display: none;} 
 
    ul.topnav li.icon { 
 
    float: right; 
 
    display: inline-block; 
 
    } 
 
} 
 

 
@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; 
 
    } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<ul class="topnav" id="myTopnav"> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    <li class="icon"> 
 
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> 
 
    </li> 
 
</ul> 
 

 
<div style="padding-left:16px"> 
 
    <h2>Responsive Topnav Example</h2> 
 
    <p>Resize the browser window to see how it works.</p> 
 
</div> 
 

 
<script> 
 
function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
} 
 
</script> 
 

 
</body> 
 
</html>

注：

出典

2017-01-10 09:46:22 ThinhLe

彼はこの種のメニューを求めていません./彼はメニューの下をもっと包み込むことはしませんでした。 –

1つの問題の男を解決するための多くの方法。彼はちょうど "私に方法を教えてください"と尋ねる。 – ThinhLe

だけのメニューオプションを書き、それを実現するためにサイズを変更：

<ul class="flex menu"> 
    <li><a href="page.html">Menu Item</a></li> 
    <!-- more list items... --> 
</ul>

とメニューを初期化します。

$('ul.menu.flex').flexMenu();

はflexmenu.jsを含め、ここdemoです。

出典

2017-01-10 10:32:28

私のために働いてくれてありがとう –

ディスプレイの解像度に合わせてメニューを表示

答えて

関連する問題