twitterbootstrap3 dropdown menu を hoverで開く。また、右寄せする

2014年2月26日更新 view: 5 view
photoBy: http://designup.jp/wp/wp-content/uploads/2013/11/…

bootstrap3でドロップダウンメニューを使おう。

hoverで開きたい

マウスをクリックでなく、カーソルをあわせるだけでドロップダウンメニューが開くようになります。

・CSSを追加するだけ!

.dropdown:hover .dropdown-menu {
    display: block;
}

右寄せしたい

ポップアップされたメニューを右寄せしたい場合は、.pull-right をつけます。

スポンサードリンク
<div class="dropdown">
                 <a href="/users/mypage/"><?=u('name');?> さん <span class="caret"></span></a>
                 <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
                    <li class="t-l" style="width:100%;"><a href="#" style="padding:10px;">hogeman</a></li>
                    <li class="t-l" style="width:100%;"><a href="#">ageeman</a></li>
                 </ul>
                </div>

クリックしたらリンクを移動させたい

右寄せしたいと同じタグで、 tarouさんをクリックしたら /users/mypage/ に移動するようになります。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

9月22日 ( 日 ) にアクセスが多かった記事はこちら!