5

次のようなメニューがあります。

|Home|Options|Settings|Tools|Preferences|Edit|

携帯電話の横方向のスペースが広い場合は問題ありませんが、ビューポートが狭いデバイスがページにアクセスする場合は、メニューを次のように表示したい

|Home|Options|Settings|+MORE+|

「MORE」メニューをクリックすると、垂直ドロップダウンに他の項目が表示されます。

個々のメニュー項目が表示されたときにどのくらいの幅になるか分からないので、手動でブレークポイントを設定したくありません。

私のメニューは現在<li>、<ul>

水平レイアウトの CSS は次のとおりです。

#menu ul, #menu li { margin: 0; padding: 0; list-style: none; }
#menu ul { overflow: auto; }
#menu li { float: left; }
#menu  a { display: block; padding: 0.5em; text-decoration: none; border-right: 1px solid #fff; font-size: 110%; }

jQuery のようなものを使用するのは気が進まない - たとえ最小化されたとしても、古いモバイル ブラウザーでは依然としてかなりのオーバーヘッドです。メディア クエリも一部の電話では問題があるため、それらに依存することは避けたいと思います。

ブラウザの幅に応じて要素を自動的に非表示にする CSS と (単純な) JavaScript に関する考えはありますか?

4

1 に答える 1

7

実際には、JavaScript をまったく使用せずに、メディア クエリ(これは本当に優れたサポートがあります+ 私が提示するこのソリューションはモバイル ファーストのものです) と:nth-last-child(これもまたOpera Mini でサポートされています) だけで実行できます。

デモ

（サイズを変更して動作を確認してください）

次のような構造が必要です。

<nav id='menu'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Options</a></li>
        <li><a href='#'>Settings</a></li>
        <li><a href='#'>Tools</a></li>
        <li><a href='#'>Preferences</a></li>
        <li><a href='#'>Edit</a></li>
        <li><a href='#'>+ MORE +</a></li>
    </ul>
</nav>

次に、 Tools、Preferences、Editを選択し、次のように設定する必要がありdisplayますnone。

#menu li:nth-last-child(-n+4):not(:last-child) { display: none; }

li:nth-last-child(-n+4)最後から最初の 4 つのリスト項目のみを選択します。+ MORE +リスト項目を表示し:not(:last-child)たいので、それに条件を追加します。

構造的な疑似クラスをよりよく理解するために、このツールをいじることができます。

最後に、メディア クエリを使用して、大きな画面の表示設定を変更する必要があります。

@media (min-width: 30em) {
    #menu li:nth-last-child(-n+4):not(:last-child) { display: block; }
    #menu li:last-child { display: none; }
}

以下の 2 つの理由から、emベースのメディア クエリではなく、ベースのメディア クエリを使用しています。px

  • 一つ、この記事;
  • px2 つ目は、1 年前にベースのメディア クエリを使用したため、自分のサイトはズームでがらくたのように見えます。

編集: クリックするとメニューが展開され、表示されるメニュー要素の数が画面の幅によって変化するようにするために、構造をもう少し変更しました。

<nav id='menu'>
    <a tabindex=1 class='ctrl' href='#'>+ MORE +</a>
    <ul>
        <li><a href='#' class='menu-link'>Home</a></li>
        <li><a href='#' class='menu-link'>Options</a></li>
        <li><a href='#' class='menu-link'>Settings</a></li>
        <li><a href='#' class='menu-link'>Tools</a></li>
        <li><a href='#' class='menu-link'>Preferences</a></li>
        <li><a href='#' class='menu-link'>Edit</a></li>
    </ul>
</nav>

また、CSS を少し変更しました。

#menu .ctrl { float: right; }
#menu ul, #menu li { margin: 0; padding: 0; list-style: none; }
#menu ul { overflow: auto; }
#menu li { float: left; }
#menu li:nth-last-child(-n+5) { display: none; }
#menu a {
    padding: 0.5em;
    text-decoration: none;
    border-right: 1px solid #fff;
    font-size: 110%;
}
#menu li a { display: block; }
#menu li:first-child a { border-left: 1px solid #fff; }
#menu .ctrl:focus, #menu .ctrl:active { display: none; outline: 0; }
#menu .ctrl:focus ~ ul li, #menu .ctrl:active ~ ul li { display: block; }

@media (min-width: 15em) {
    #menu li:nth-child(2) { display: block; }
}
@media (min-width: 20em) {
    #menu li:nth-child(3) { display: block; }
}
@media (min-width: 25em) {
    #menu li:nth-child(4) { display: block; }
}
@media (min-width: 30em) {
    #menu .ctrl ~ ul li { display: block; }
    #menu .ctrl { display: none; }
}

デモ

（ブラウザウィンドウのサイズを変更するときに画面の幅を明確にするために、5emごとに垂直線の背景も追加しました）

このメソッドは JavaScript なしで動作するはずです - デスクトップ ブラウザ、Opera Mobile、Android ブラウザ、iOS Safari でテスト済みです。ただし、Opera Mini についてはわかりません。テストする必要があります。

編集＃2：いいえ、Opera Miniでは機能しません（メニューは折りたたまれていますが、+ MORE +リンクをクリックしても展開されません）. JavaScript（ライブラリなし）で動作させようとしましたが、Opera Miniでも動作しません（デスクトップブラウザでは動作します）.

EDIT＃3：jQueryを使用して同じことを試みました。今回はOpera Miniでも動作します。（少なくとも私にとっては）本当に遅いですが、うまくいきます。これは私が使用したものです：

$('.ctrl').click(function() {
    $(this).css({'display': 'none'}).next().children().css({'display': 'block'});
});

EDIT#4 ::targetメソッドを試してみました -デモ(これも CSS のみ)。Chrome を使用しているラップトップでは正常に動作し (別のデスクトップ ブラウザーではテストしていません)、Opera Mini では動作しません (メニューが折りたたまれており、+ MORE +リンクをクリックしても展開されません)。ただし、Opera Mobile では動作します。

于 2012-09-18T16:16:55.147 に答える