jquery メニューを自動追随させるメニュー

2014年10月12日更新 view: 114 view
photoBy: http://www.ultrap.net/wordpress/wp-content/uploads/2011/11/jquery199765795.jpg

サイドメニューを自動追随させる jQuery Ex Flex Fixed 使い方

メニュー左右メニューを固定させたい時がある。 そんなときは迷わずこのライブラリ。

色々なライブラリがあるが一番わかりやすく、使いやすい。 公式 http://d.hatena.ne.jp/cyokodog/20120427/exflexfixed01

サンプル http://www.matomater.com/helps/

コードをダウンロード https://github.com/cyokodog/jquery.ex-flex-fixed

使い方

スポンサードリンク

コードを読み込み

<script type="text/javascript" src="/app/webroot/js/jquery.js"></script>
<script type="text/javascript" src="/app/webroot/js/jquery.exflexfixed.js"></script>

今回は twitter bootstrap を使っての方法。

  • .tuizuiのメニューを固定させたい
<script type="text/javascript">
$(function() {
  $('.tuizui').exFlexFixed({
   container : 'body'
  });
});
</script>

<div class="container">
<div class="row">
    <div class="span3">
     <!-- 左サイドメニュー -->
        <div class="helpMenu tuizui">
            <h5>ヘルプメニュー</h5>
           
            <dl>
                <dt><a href="/">まとめーたーの特徴</a></dt>
                <dd>
                    <ul>
                        <li><a href="/">まとめーたーとは?</a></li>
                        <li><a href="/">あなたのやり方を投稿しよう</a></li>
                    </ul>
                </dd>
            </dl>
        </div>
   
    </div>
    <div class="span9">
     <!-- メインコンテンツ -->
    </div>
</div>
</div>

こんな感じで。OK。 公式サイトには色々なやり方が書いてあるが、こんなけでできてしまうんですね。 ユーザービリティ的に固定させるが最近の流行みたいなので是非取り入れてみて下さい。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

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

ピックアップ

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

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