phoenix-powerブログのカスタマイズです。Bootstrapでは、モバイルに対応したメニューのため、ドロップダウンメニューがクリックで開くようになっています。それを、マウスオーバーで開くようにします。

できるだけクリックしたくないです。更に、モバイルには簡易なメニューに適しているため、ドロップダウンメニューがそれほど必要には思えません。したがって、モバイルでは、タグリンクへの移動のみ対応することにします。

まず、デフォルトでは、以下の様な HTML になっています。

デフォルト
1
2
3
4
5
6
7
8
9
      <li class="dropdown">
        <a href="{{ root_url }}/blog/categories/tool/" class="dropdown-toggle" data-toggle="dropdown">Tool <b class="caret"></b></a>

        <ul class="dropdown-menu">
  <li><a href="{{ root_url }}/blog/2014/06/15/airgoogleplus/">airgoogleplus</a></li>
  <li><a href="{{ root_url }}/blog/2014/06/12/airchrome/">airchrome.zsh</a></li>
  <li><a href="{{ root_url }}/blog/2014/06/16/icon/">octopress-share-button</a></li>
        </ul>
      </li>

ここで、data-toggle="dropdown"がクリックでドロップダウンメニューを呼び出す命令になります。

この部分を削除した上で、以下のCSSを書きます。

1
2
3
4
5
6
ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;
}
a.menu:after, .dropdown-toggle:after {
    content: none;
}

私の場合は、表示崩れを懸念しているため、そして、そもそもモバイルでは、ドロップダウンメニューの必要性を理解していないため、以下のように非表示にしています。

source/assets/bootstrap/dist/css/bootstrap.min.css
1
@media (max-width:767px){.navbar-nav .open .dropdown-menu{display:none;position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none}

簡単に説明すると、@media { .navbar-nav .open .dropdown-menu }display:noneを設定します。

ここでいう@mediaというのは、最大幅を条件にしたレイアウトの設定のこと。

確認していませんので、現時点では、Octopress-Theme-octostrap3でのみ有効。