2

ほとんどのデスクトップ ブラウザーで適切に動作する CSS メニューを使用していますが、ドロップダウン メニューを IPad と Iphone で動作させるには問題がありました。問題のサイトは次のとおりです: http://bakersfield.kernhigh.org/

私はcssとjavascriptにまったく慣れていないので、どんな助けも素晴らしいでしょう.

ありがとう

4

3 に答える 3

2

現在、iOS は をサポートしていないため、iOS では:hoverデスクトップのようにナビゲーションが展開されません。

jQuery Mobile を検討したことがありますか? ただし、別のモバイルバージョンを開発している場合にのみお勧めします.

それ以外の場合は、次の jquery を使用できます (その場合、jQuery も含める必要があります)。

$('nav li').bind('touchstart', function(){
    $(this).addClass('hover');
}).bind('touchend', function(){
    $(this).removeClass('hover');
});

これにより、タッチ時にクラス (ホバー) が追加され、指を離すとクラスが削除されます。もちろん、必要に応じてこれを編集する必要があります。私がこれを言うのは、あなたが JavaScript に不慣れであり、私があなたを混乱させたくないからです。

于 2012-10-08T03:46:43.280 に答える
1

ドロップ ダウン メニューは、特にタッチ スクリーン デバイスで動作させるとうまくいかないことがあります。これは私がドロップダウンメニューを作成する方法です。これは純粋なCSSであり、chrome、ff、ie7 +、safari、iPhone、および複数のAndroidでテストしました（もちろん、色とサイズを微調整する必要があります）：

HTML

<div id="navigation">
    <ul id="nav">
        <li><a href="index.html>Home</a></li>
        <li><a href="#">Drop Down</a> <!--Notice didn't close the li yet->
            <ul>
            <li><a href="link">Drop Down Item</a></li>
            <li...../li>
            etc...
            </ul>
        </li>
        <li><a href="#">Another Drop Down</a></li>
            <ul>
            ...
            </ul
        </li>
    </ul>
</div>

CSS:

#nav {
    display: block;
    text-align: center;
    font-size: 1em;
    position: relative;
    height: 3em;
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
}

#nav li {
    float: left;
    display: block;
    width: 75px;
    height: 3em;
    position: relative;
}
#nav li a {
    text-decoration: none;
    display: block;
    height: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
}
#nav li a:hover {
    color: #990000;
    background-color: #999999;
}
#nav li ul  {
    width: 100%;
    display: none;
    z-index: 9999;
    position: absolute;
}

#nav li ul li {
    display: block;
    clear: both;
    width: 100%;
    height: 100%;
    background-color: #B5BDC8;
}
#nav li:hover ul  {
    display: block;
}

このすべての背後にあるアイデアは、リストを作成し、そのリスト内にドロップダウン要素を作成することです....

次に、そこから、最初にプライマリ リスト項目のみを表示し、ホバー時にドロップ ダウン メニューを表示します (または、モバイル デバイスの場合は、クリック時にメイン リスト項目を「#」へのリンクにして、作成してアクティブにします)。 /ホバー状態)...

唯一の問題は、display:none を使用するとスクリーン リーダーに適していないことですが、私は常に、スクリーン リーダーに適したサイト ナビゲーションと SEO に適したサイト ナビゲーションを下部に含めています。

この例は、私が取り組んでいるこのウェブサイトで実際に見ることができます。

于 2012-10-08T05:50:45.793 に答える