1

iphone または ipad で正しく動作しない css を使用したドロップダウン メニューがあります。

私がチェックした他のすべてのブラウザーとデバイスで、私が望むように動作します。

元のバージョンのコードのように、メニュー テキスト (たとえば、'face' という単語) が href タグで囲まれていないという事実に絞り込みました。それが違いを生むものです。face という単語を href タグで囲むと、ipad/iphone でドロップダウンが正常に機能します

明らかに、href を追加するだけで完了できますが、そうする必要はありません。そうしないと、通常はメニュー テキストをタップしてドロップダウンを表示する必要があるタッチ スクリーンを使用するすべての人が、どこにでも移動します。リンクポイント。そもそもドロップダウンのポイント全体を台無しにしています!

コードは次のとおりです。

<div id="dropMenuWrapper">
  <div id="dropMenu">
        <ul class="level1">
        <li class="submenu">Face
            <ul class="level2">
                <li class="subCatodd"><a href="">powder</a></li>
                <li class="subCateven"><a href="">cream</a></li>
            </ul>
        </li>
    </ul>
  </div>
</div>

css:

body {  behavior: url(includes/csshover.htc);}
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}


#dropMenuWrapper {
width:100%;
height:25px;
margin:0;
font-size:11px;
}

div#dropMenu {
width:750px;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin: 0; 
padding: 0;
}

div#dropMenu li {
position: relative; 
list-style: none; 
margin: 0; 
float: left; 
line-height: 1em;
}

div#dropMenu ul.level1 {
width:750px; 
margin:0 auto; 
text-align:center;
background:#4F4F4F;
height:25px;
z-index:1000;
}

div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block;text-decoration: none;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

簡単にするために、jsfiddle: http://jsfiddle.net/VvT6Y/1/

テキストをリンクにすることなく、iPhone/iPadでドロップダウンを機能させる方法を誰かが指摘できますか?

前もって感謝します ：）

4

2 に答える 2

4

「誰かがメニューボタンをタップしたときにドロップダウンメニューを表示するには、追加するだけです

onClick=”return true”

<LI>メニューのポップアップをトリガーするリスト項目 ( など) 内の「A」タグに。これは、カスケード メニューでも機能します。」

から - http://blog.travelvictoria.com.au/2012/03/31/make-sure-your-websites-drop-down-menus-work-on-an-ipad/

于 2013-03-26T09:54:38.517 に答える