開閉するサイドバーを作成するJavascript「PBB SideBar」


Contents Outline

カッコよく開閉できるサイドバー「PBB SideBar」 …ですが、そのままだとただ開閉するだけで、何もできませんでした。

そこで、MRBで少しコードを改修し、内容を直接HTMLで書き込めるようにしました。
仮にJavascriptがOFFになっていても、コンテンツの一部として普通に表示されます。


ダウンロード

  • pbbsidebar.mrb.js(右クリックで保存してください)
  • サンプル込み一式ダウンロード(ZIP)

  • pbbsidebar.mrb.jsの他、mootoolsからmootools.jsをダウンロードしてください。


    使用方法

    <script type="text/javascript" src="./mootools.js"></script>
    <script type="text/javascript" src="./pbbsidebar.mrb.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    MySideBar = new PBBSideBar();
    }
    </script>

    上記を記述したらアンカー要素などにonclick="javascript:MySideBar.display();を追記してください。

    <a onclick="javascript:MySideBar.display();">Open/Close</a>


    オプションは以下の通り。

    例:

    MySideBar = new PBBSideBar({
    position : 'left',
    styles: {
    'width': '500',
    'color': 'white',
    'background-color': 'red',
    'opacity': 0.6
    },
    showDuration: 500,
    showEffect: Fx.Transitions.backOut,
    hideDuration: 500,
    hideEffect: Fx.Transitions.quadInOut
    });


    サンプル

    opne/close
    Firefoxなら、"A"を押しても開閉できます。

    備考

    jsoutlineと相性が悪い、というか複数のwindow.onloadの問題(仕様)。


    HOME][イイカンジプロジェクト][高密度商業地域

    開閉式メニュー

    ここにいろいろ記述できます。当然、アフィリエイト広告も載せられます。