0

現在、次のように機能するドロップダウンメニューがあります。

http://www.feimediasolutions.com/NRA_Website/index_test_menu.html

ブラウザーのサイズをスマートフォンや iPad のビューに合わせて変更し始めると、ドロップダウン サブメニューのみが、展開後に残りのメニュー項目を「プッシュ」するようになります。現在、サブ ドロップダウン項目は、残りのメニュー項目の上にのみ表示されます。

この場合、ドロップダウン メニューを効果的に展開するにはどうすればよいですか? 助けてください、よろしくお願いします!!

4

3 に答える 3

0

ここでの主な問題は、ドロップダウン メニューを保持するタグが完全に配置され、ドキュメント フローから削除されていることです。これは、ページ上の他の要素の位置に影響を与えないことを意味します。以下を使用する必要があります。

#colorNav li ul {
  position: relative;
}

...ページ上の他のコンテンツを「プッシュ」するドロップダウンが必要な場合は、全幅のレスポンシブ バージョンで。見栄えを良くするには、他のさまざまな CSS の修正が必要です。

ただし、タッチ デバイスには「ホバー」がないため、さらに多くの問題が発生するため、別の方法でドロップダウンをトリガーする必要があります。

于 2013-09-16T06:23:38.553 に答える
0 
@media screen and (max-width: 768px) {
  #colorNav li ul{
    position: relative;
    list-style:none;
    text-align:center;
    /*width:180px;*/
    width: 100%;
    left: -40px;
    top: 45px;
    /*left:50%;
    margin-left:-90px;
    top:70px;*/
    font-family: 'Lato', sans-serif;
    max-height:0px;
    overflow:hidden;

    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
  }
}
于 2013-09-16T06:27:47.017 に答える
0

こんにちは、あなたが達成したいドロップダウンは、レスポンシブレイアウトと呼ばれています..それに関して検索すると、それを行うための情報がたくさん見つかります...以下のすべてのリンクがあなたの原因に役立ちます.. http://www.1stwebdesigner.com/css /responsive-website-tutorial/ http://webdesignerwall.com/tutorials/responsive-design-in-3-steps http://www.hongkiat.com/blog/responsive-web-tutorials/

于 2013-09-16T06:15:09.300 に答える