6

デスクトップブラウザではうまく機能するが、iPad または iPhone デバイスでは機能しない Web サイトのドロップダウンメニューがあります。ただし、動作しますが、Android デバイスで動作します。同じナビゲーション構造を持つ同様のサイトがあり、そのサイトで完全に機能します。

URL は www.aiimconference.org です。そして、これは nav 構造と CSS のサンプルです。また、完璧に機能するサイトもここにあります。このサイトではまったく同じ構造を使用しています。www.aiim.org。

<ul>
<li><a href="/conference">Home</a></il>
<li class="expandable"><a href="/conference">Program</a>
   <ul>
      <li class="expandable"><a href="/conference">Program</a></il>
      <li class="expandable"><a href="/conference">Program</a></il>
    </ul>
</il>
<li class="expandable"><a href="/conference">Connect</a></il>
<li class="expandable"><a href="/conference">Register</a></il>
<li class="expandable"><a href="/conference">Sponsors</a></il>
<li class="expandable"><a href="/conference">Venue</a></il>
</ul>


.mainNav li.expandable > a /* dropdown */{
   background: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/dropdown.jpg") no-repeat center right;
   padding-right: 16px;
   padding-bottom: 4px;}

.mainNav ul li.expandable li.expandable > a /* flyout */ {
   background-image: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/flyout.png") !important;
   background-repeat: no-repeat;
   background-position: 95% 50%;

. mainNav{
    margin: 0 auto;
    text-align: center;
    background: #007287 url(/assets/sites/aiimconference/www/conf2013/images/layout/main- nav-bkgd.jpg) repeat-x bottom;
    font-family: franklin-gothic-urw-condensed, arial, sans-serif;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    margin-top: 30px;

.mainNav ul ul li:hover > a { 
     background-color:#006372;}

.mainNav span {
     display:block; 
     position:absolute; 
     right:9999px; 
     top:-35px;}

.mainNav ul li:hover > ul {
     left:-1px; 
     top:30px; 
     z-index:-1;}
.mainNav ul ul li:hover > ul {
     left:100%; 
     top:auto; 
     margin-top:-31px; /*margin-left:-10px;*/ 
     z-index:10;}
4

2 に答える 2

1

私の知る限り、モバイルデバイスでは「ホバー」CSSセレクターを使用しないでください。これは、マウスがないため、持っていないカーソルによってトリガーされるためです。タップアンドホールドを試すこともできますが、よくわかりません。

これに対処するより良い方法は、メディア クエリを使用して表示し、モバイル デバイスでのみ特定の方法で動作させることです。親アイテムをクリックしてドロップダウンをトリガーするか、メニューを別の方法で表示することをお勧めします（サブメニューがすでに開いているなど）。

于 2012-10-15T20:35:53.503 に答える
1

これを確認することはできませんが、左の配置を使用してドロップダウン ナビゲーションを非表示にする代わりに、代わりに使用すると思われます

visibility: hidden;
height: 0;
opacity: 0;

それを隠すことと

visibility: visible;
height: auto;
opacity: 1;

それを表示するには、モバイルサファリとモバイルクロムで動作する必要があります.

于 2012-10-02T12:13:54.150 に答える