2

順序付けされていないインラインの水平リスト メニューがあります。モバイル メディア クエリが開始されたときに、css を変更して、クリックするとメニューの子リンクが垂直リストに表示される「メニュー」という親項目が含まれるようにします。

これを達成するための最良の方法は何ですか？

両方のタイプのメニューを作成し、css を使用して表示を切り替える必要がありますか、または最初のメニューを新しい 2 番目のメニューにする方法はありますか?

どんな助けでも本当に感謝しています。それぞれの隠しcssプロパティを切り替えるとうまくいくと確信していますが、これがどれほどセマンティックフレンドリーになるかはわかりませんでしたか?

乾杯

4

3 に答える 3

2

そうです、少し手間がかかりましたが、ここで何を求めているかの実例を作成しました

HTML

<a href="#" id="nav-status">Open / Close</a>
<ul id="navigation">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li>
        <a href="#">Item 5</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
</ul>

<strong>CSS

/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {
    #nav-status {
        display: none;    
    }

    ul {
        width: 100%;    
        min-height: 25px;
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-right: 1px solid #333;
        width: 96px;
        height: 21px;
        padding:2px;
        display: block;
        float: left;
        position: relative;    
    }

    ul li:last-child {
        border-right: none;
    }

    ul li ul {
        display: none;
        width: 100px;
        color:#fff;
        background:#666;
        position: absolute; 
        top: 25px; 
        left: 0px;
        overflow: hidden;
    }

    ul li:hover ul {
        display: block;    
    }
}

/* FOR MOBILE RESOLUTIONS */
@media screen and (max-width: 480px) {
    #nav-status {
        display: block;
        width: 100%;
        height: 21px;
        padding: 2px;
        background: #000;
        color: #FFF;   
    }

    ul {
        display: none;
        width: 100%;       
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-bottom: 1px solid #333;
        width: 100%;
        min-height: 21px;
        padding:2px;
        display: block;        
        position: relative;    
    }

    ul li:last-child {
        border-bottom: none;
    }

    ul li ul {
        display: block;
        width: 100%;
        color:#fff;
        background:#666;        
        overflow: hidden;
        position: relative;
    }        
}
​

ジャバスクリプト

$(function() {
    $('#nav-status').click(function(e) {
        e.preventDefault();
        $('#navigation').toggle();
    });​
});

要約すると、解像度が幅 480 ピクセル未満になると、モバイル スタイルが適用されます。これにより、基本的にメニュー項目が垂直にスタックされ、開く/閉じるリンクでナビゲーションを折りたたんだり展開したりできるようになります。480px より大きいものは、メニュー項目を水平に並べるデフォルトのスタイルを使用します。

うまくいけば、それはすべて理にかなっています:-)

于 2012-11-06T10:27:22.993 に答える
1

HTML マークアップを同じままにできますが、メディア クエリを設定して、選択した解像度をインターセプトし、要素のスタイルを変更します。

例: http://jsfiddle.net/rYVz4/

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>​

CSS

@media screen and (min-width: 600px) {
  ul { display: block; width: 100%; overflow: hidden; }
  ul li { display: inline-block; padding: 2px 5px 2px 5px; width: 100px; float: left; } 
}

@media screen and (max-width: 600px) {
  ul { display: block; width: 110px; overflow: hidden; }
  ul li { display: inline-block; padding: 2px 5px 2px 5px; width: 100px; } 
}

ご覧のとおり、解像度が幅 600 ピクセルを超える場合は常に、要素は左にフロートし、画面の幅の 100% を占めるようにスタイル設定されます。

それより小さい解像度では、要素は垂直方向に積み重ねられます。

メディア クエリの詳細については、こちらをご覧ください。

より高度な動作が必要な場合は、これを JavaScript と結び付けることができます。これはそれを行う1つの方法です：

function checkResolution() {
  // Resolution width > 600px
  if ($(window).innerWidth() > 600) {
    // implement styling for these devices                                          
  }
}

$(function () {
  $(window).resize(function () {
    checkResolution();
  });

  checkResolution();
});

このコードは、ブラウザのサイズが変更された場合に関連するコードを実行する window.resize イベントに関連付けられます。

</p>

于 2012-11-05T11:51:47.323 に答える
0

メニューに両方のケースで同じ項目がある場合、2 つのコピーを作成する理由がわかりません。「通常の」ブラウザ用とモバイル メディア用の 2 つの異なる css ファイルを作成します。「通常」のものでは、「メニュー」の親アイテムが非表示になり、メニューが横になります。モバイル メディアでは、メニューの親アイテムが表示されます。メニューは、メニューの親アイテムがクリックされたときに (CSS または JavaScript を介して) 表示される非表示の垂直リストです。

于 2012-11-05T11:47:18.280 に答える