Bootstrapのドロップダウンメニューをマウスオーバーで開く

マウスオーバー（hover）は、いわゆるタッチインターフェースでは原理上できないからUIとしては旧式という見方があるようだ。

でも、なんだかんだでクリックのコストって大きい。モバイルデバイスはともかく、PCでは開かせてもらいたい。

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}
a.menu:after, .dropdown-toggle:after {
    content: none;
}

ただし、これをそのまま書くとすべてのドロップダウンがぴゅんぴゅん開いてしまうのでクラスに auto を指定したものだけ、マウスオーバーで開くようにする。

css

ul.nav li.dropdown.auto:hover ul.dropdown-menu {
	display: block;
}
a.menu:after, .dropdown-toggle.auto:after {
	content: none;
}

一応、これで解決なんだけどPC系のデバイスでresponsive表示したときにメニューが縦なのにスッチャスッチャ開いてみにくい。

これを解決するには、カスタムイベントを定義してresponsiveデザインではhoverによるopenを無効にすればいい。　#TODO

ゲダってネハるデイズ★