twitterbootstrap dropdownmenuをhoverで。

2014年10月12日更新 view: 31 view
photoBy: http://vuurr.com/wp-content/uploads/2012/01/twitter-bootstrap-vuurr.png

準備

dropdown.jsのダウンロードし、bootstrap-dropdown.jsに改名
http://twitter.github.com/bootstrap/customize.html

ライブラリを読み込み
※jqueryも読み込んでおいて下さいね。

<script type="text/javascript" src="/app/webroot/js/bootstrap-dropdown.js"></script>

コード

hoverで開くコード

$(function() {


  $('.dropdown').hover(
        function(){
            $(this).addClass('open').find('ul').stop(true,true).hide().slideDown(0);
        },
        function(){
            $(this).removeClass('open').find('ul').stop(true,true).slideUp(0);
        }
    );
    $('.dropdown-menu li').unbind('mouseover').unbind('mouseout');
});
スポンサードリンク

htmlコード

<div class="dropdown">
  <a href="/articles/add/">カーソル併せて</a>
  <ul class="dropdown-menu">
    <li><a href="/">ここがメニュー</a></li>
  </ul>
</div>

これで、hover使用時にドロップダウンメニューが表示されるようになる。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

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

ピックアップ

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

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