9

利用可能なレスポンシブ ドロップダウン メニュー/ナビゲーション バーを見てきましたが、何も正しく機能していないようです。主に、JavaScript ハックに依存しない CSS ベースのメニューが必要です。

なぜJSを使わないのですか？JS ベースのソリューションは、Opera Mini などのプロキシ ブラウザでは機能しません。視聴者の大半はそれを使用しており、Blackberry ブラウザは JS でうまく動作しません。

多くの人が、モバイル ナビゲーションに選択メニューを使用することを推奨しています。興味深い解決策ですが、これも JS に依存しており、ネストされた複数レベルのメニューでは非常に面倒です。

では、どのようなナビゲーション システムを見つけたことがありますか?

4

6 に答える 6

5

Java スクリプトを使用しないマルチレベルのドロップダウン メニューについては、ここでサンプルを作成します。

HTML:

<ul>
    <li>
        Menu 1
        <ul>
            <li>Menu 1.1</li>
            <li>
                Menu 1.2
                <ul>
                    <li>Menu 1.2.1</li>
                    <li>
                        Menu 1.2.2
                        <ul>
                            <li>Menu 1.2.2.1</li>
                            <li>Menu 1.2.2.2</li>
                        </ul>
                    </li>
                    <li>Menu 1.2.3</li>
                    <li>Menu 1.2.4</li>
                </ul>
            </li>
            <li>Menu 1.3</li>
        </ul>
    </li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
</ul>​

CSS:

ul{
}
ul li{
    display:inline-block;
    position:relative;
}
ul li> ul{
    display:none;
    position:absolute;
    left:95%;
    top:15px;
}
ul li> ul li{
    display:block;
}
ul li:hover> ul{
    display:block;
}
​
于 2012-10-03T09:53:53.703 に答える
3

iOSデバイスで機能するpure-CSSドロップダウンメニューのオプションは1つだけです。アンカータグを使用して切り替えますdisplay: none/block（iOS Safariのホバー動作に関する短い記事）。

HTML：

<ul>
    <li><a href="#">Menu Item 1</a>
         <ul>
             <li>SubLink1.1</li>
             <li>SubLink1.2</li>
             <li>SubLink1.3</li>
             <li>SubLink1.4</li>
         </ul>
    </li>
    <li><a href="#">Menu Item 2</a>
         <ul>
             <li>SubLink2.1</li>
             <li>SubLink2.2</li>
             <li><a href="#">SubMenu3 &gt;&gt;</a>
                 <ul>
                     <li><a href="#">Nested Link 2.3.1 &gt;&gt;</a>
                     <ul>
                         <li>Nested Link 2.3.1.1</li>
                         <li>Nested Link 2.3.1.2</li>
                     </ul>
                     </li>
                     <li>Nested Link 2.3.2</li>
                 </ul>
             </li>
         </ul>
    </li>
    <li><a href="#">Menu Item 3</a>
         <ul>
             <li><a href="#">SubMenu3.1 &gt;&gt;</a>
                 <ul>
                     <li>Nested Link 3.1.1</li>
                     <li>Nested Link 3.1.2</li>
                     <li>Nested Link 3.1.3</li>
                     <li>Nested Link 3.1.4</li>
                     <li>Nested Link 3.1.5</li>
                     <li>Nested Link 3.1.6</li>
                 </ul>
             </li>
             <li>SubMenu3.2</li>
         </ul>
    </li>
</ul>

CSS：

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

私はこれをiPhone4iOS6でテストしましたが、正常に動作します。KindleFireでもテスト済み。テスト用のAndroidスマートフォンにアクセスできないので、これらのデバイスを確認します。

JSフィドル： http： //jsfiddle.net/aGYnU/2/

応答性を高める：

スタイルを少し試してみてください。位置を変更します。em寸法にはまたはpercentage%値を使用します。メニュー内のフォントサイズの値も使用する必要がある場合がありemます（またはメディアクエリを使用して、ビューポートサイズに基づいてフォントサイズを設定します）。

機能は引き続き機能するはずです。

于 2012-10-06T07:55:23.067 に答える
3

このソリューション/パターンはドロップダウンソリューションではないことを前もって言います。しかし、レスポンシブ デザインのナビゲーションを再考するための非常にクールな方法です。あなたのナビゲーションの必要性も完全にはわからないので、これはあなたにとって十分に複雑ではないかもしれません.

コンテンツ マガジンのサイトをご覧ください: http://contentsmagazine.com/

ロゴの下のメイン ナビゲーションに注意してください。小さいビューポートで表示すると (ブラウザーのサイズを変更します)、「探索」リンクが表示されます。そのリンクをタップすると、ナビゲーションに移動します。

ここに問題があります:これは単純なアンカー リンクです。

パターンは次のとおりです。ページ ソースの順序に関しては、ナビゲーションは実際にはページの下部に向かっています。(そして、セマンティクスの観点から、これは起動するのに非常に理にかなっています。) ページの上部に、ナビゲーションにジャンプする単純なアンカー リンクがあります (これは、アクセシビリティのベスト プラクティスでもあります)。

したがって、モバイル ファーストを考えると、ページはページの下部にあるナビゲーションで読み込まれますが、ユーザーはアンカー リンクをクリックしてそこに移動できます。アンカーリンクなのでジャンプは一瞬で、実はドロップダウンに近い感覚。

次に、ビューポートが大きくなると、CSS のみを使用して、ナビゲーションがページの上部に移動され (見栄え的にはともかく)、ロゴの下に配置されます。これは、単純な絶対位置決めによって達成されます。

于 2012-10-02T13:58:05.533 に答える
2

私もこの問題を解決しようとしました。そして、私のすべてのニーズをカバーするソリューションはまったく不可能だと思います。しかし、これはおそらくほとんどの人にとって十分でしょう: http://jsfiddle.net/selfthinker/T7dDm/

HTML:

<ul>
  <li class="dropdown" onclick=""><span>Menu</span>
    <ul>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Another menu item</a></li>
    </ul>
  </li>
</ul>

CSS:

li.dropdown > span {
    cursor: pointer;
    /* style the "Menu" to make it appear clickable (e.g. replace it with a house icon?) */
    font-size: 2em;
    font-weight: bold;
    color: #00c;
}
li.dropdown {
    position: relative;
}
li.dropdown:hover > ul,
li.dropdown:active > ul,
li.dropdown:focus > ul {
    display: block;
}
li.dropdown > ul {
    display: none;
    position: absolute;
    top: 1.5em;
    left: 0;
    /* and style away: */
    background-color: #ccc;
    font-size: 1.5em;
}

これは、新しい iPad の Safari と Opera Mini、Android (2.2.2、HTC Desire) のストック ブラウザと Opera Mini、およびいくつかのデスクトップ ブラウザでテストしました。そして、それは基本的にどこでも機能します。残りの問題は次のとおりです。

  1. キーボードからアクセスすることはできません。つまり、タブでメニュー項目を移動することはできません。タブ操作でメニュー ドロップダウン自体を表示させることもできますが、(JavaScript を使用せずに) その中の項目にアクセスできる方法を知る方法はありません。これは私にとって最大の問題です。
  2. iPad の Safari およびすべての Opera Mini で、メニューをタップしてもすぐにメニューが閉じなくなりました。リロードするか、リンクをクリックする必要があります。(Android ブラウザでは、画面上の他の場所をタップするだけでメニューを閉じることができます。) それに対する解決策はありますか?
  3. Opera Mini では、メニュー トリガーをタップするとページ全体がリロードされますが、その後は通常どおりメニューが表示されます。
于 2012-10-08T12:02:14.193 に答える
1

モバイル ブラウザは、リンクではない場合でも、タップすると :hover コンテンツを表示/非表示にすることがよくあります。次のコードを使用します。

HTML:

<ul>
<li id="showhide">I am visible, and can be tapped/hovered.
     <ul id="menu">
          <li>Menu item 1</li>
          <li>Menu item 2</li>
     </ul>
</li>
</ul>

CSS: (スタイリングなし)

#showhide{
     position:relative;
}
#menu{
     position: absolute;
     left: -999px
}
#showhide :hover #menu{
     left: 0px;
}

これがJSFiddleであることを確認してください：http://jsfiddle.net/VVqBU/

于 2012-10-02T13:57:32.853 に答える
0

div とアンカーを使用して例を作成しました。それが役に立てば幸い！

http://jsfiddle.net/UufP5/9/

html :

 <div class="mymenu">
<div class="menu">
    <div class="menu_title">
        menu 1
    </div>
    <div>
        <a href="#">submenu1</a>
        <a href="#">submenu2</a>
        <a href="#">submenu3</a>
        <a href="#">submenu4</a>
        <a href="#">submenu5</a>
        <a href="#">submenu6</a>
    </div>
</div>
<div class="menu">
    <div class="menu_title">
        menu 2
    </div>
    <div>
        <a href="#">submenu1</a>
        <a href="#">submenu2</a>
        <a href="#">submenu3</a>
        <a href="#">submenu4</a>
    </div>                
</div>
<div class="menu">
    <div class="menu_title">
        menu 3
    </div>
    <div>
        <a href="#">submenu1</a>
    </div>           
</div>

</p>

CSS:

 .mymenu{
font-size: 18px;
position:absolute;
z-index:1;
}
.menu{
    background: #222;
    color: #f9f9f9;
    height: 1em;
    overflow:hidden;
    display:inline-block;
    float:left;
    padding: 0.3em;
}

.menu:hover{
    height: auto;
}

.menu a{
    display:block;
    color: #abc;
}
于 2012-10-09T09:43:51.440 に答える