私は Twitter Bootstrap を使用して、デスクトップにカーソルを合わせるとメイン ナビゲーションが展開されるようにするソリューションに取り組んできましたが、キャレット モバイル (デスクトップではキャレットが非表示) をクリックするとメニューが展開されます。さらに、最上位のナビゲーション項目をモバイルでクリックできるようにしたいと考えました。
私が達成したこと：
- ホバーするとサブメニューが展開されます (デスクトップ)
- 最上位のナビゲーションはクリック可能 (デスクトップとモバイル)
- キャレットはデスクトップでは非表示ですが、モバイルでは表示されます
- キャレットの展開と折りたたみのクリック可能な領域 (モバイル)
正しく動作していないもの:
- トップ レベルのナビゲーション アイテムは、ライン全体を拡張します (モバイル)
- キャレットの展開/折りたたみ領域は 2 行目にあります (スクリーンショットの「サービス」の下の黒いバーを参照してください - モバイル)
私がしたいこと（スクリーンショットを参照）：
- 赤い線の右側にあるクリック可能な領域は、メニューの展開/折りたたみ用です (モバイル)
- 赤い線の左側のクリック可能な領域は、「サービス」トップ レベルのナビゲーション ページ (モバイル) にアクセスするためのものです。
要するに、デスクトップ バージョンは期待どおりに動作しますが、モバイル バージョンには未解決の問題があります。もちろん、パーセンテージが赤い線と完全に一致する必要はありませんが、基本的に同じ線で 2 つのクリック イベントが必要です。1 つはサービス ページにアクセスするためのもので、もう 1 つはサービス サブメニューを展開するためのものです。
これは、私が追加した唯一のカスタム CSS を使用した Twitter Bootstrap の現在の HTML セットアップと、モバイルでの現在のビューのスクリーンショットです。わかりやすくするために選択された不適切な配色。
<ul id="menu-mainnav" class="nav"><li><a href="http://localhost">Home</a></li>
<li class="dropdown">
<a href="http://localhost/services" data-hover="dropdown" data-target="#" class="dropdown-toggle pull-left js-activated disabled">Services</a>
<a data-toggle="dropdown" data-target="#"><b class="caret pull-right hidden-desktop"></b></a>
<ul class="dropdown-menu">
<li><a href="http://localhost/services/service1">Service 2</a></li>
<li><a href="http://localhost/services/service2">Service 1</a></li>
</ul>
</li>
</ul>
CSS
@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}
.caret {border-top: 6px solid #fff; border-right: 6px solid transparent; border-left: 6px solid transparent;}
.dropdown .caret {margin-top: -20px;}
現在の問題のスクリーンショット
